/*--------------------------------------------------------*/
:root {

    --c-a0:#ffffff; /* trasgemder les🅱️ian white */
    --c-a1:#fff8e7; /* cosmic latte */
    --c-a2:#ffd3ba; /* cosmic flat white (mine) */
    --c-a3:#ce6464; /* mmh tasty clay */
    --c-a4:#48212a; /* #ef2d5633 on #1f1e1eff */
    --c-a5:#ef2d56; /* freaking nice coral (mine) */
    --c-a6:#f78088; /* a little brighter*/
    --c-a7:#f5a9b8; /* trans pink */
    --c-a8:#e5fffe; /* is this blue?*/
    --c-a9:#b8f9ff; /* oh shit this is blue*/
    --c-aa:#5bcefa; /* trans blue */
    --c-ab:#6185e2; /* boris johnson voice "blue" */
    --c-ac:#53ff53; /* yooo green also? */
    --c-ad:#b4f839; /* this color tastes so sour */
    --c-ae:#fff433; /* enby yellow (outside of binary) */
    --c-af:#ff69b4; /* pride sex */

    --c-b0:#000000; /* black */
    --c-b1:#1f1e1e; /* uuh brown but gray (mine) */
    --c-b2:#48403c; /* more brown */
    --c-b3:#665e4e; /* more more brown */
    --c-b4:#254938; /* #40f99b33 on #1f1e1eff */
    --c-b5:#40f99b; /* nice freaking mint (mine) */
    --c-b6:#0bdbbf; /* nice middle point to the turquoise */ 
    --c-b7:#00c0c0; /* pride magic/art */
    --c-b8:#a30262; /* L */
    --c-b9:#b55690; /* E */
    --c-ba:#d162a4; /* S */
    --c-bb:#ff9a56; /* I */
    --c-bc:#ef7627; /* A */
    --c-bd:#d52d00; /* N */
    --c-be:#9b59d0; /* enby purple (mix of binary gender) */
    --c-bf:#400098; /* pride serenity */

    --c-background-dark:    var(--c-b0, #000000);
    --c-background:         var(--c-b1, #1f1e1e);
    --c-background-alt:     var(--c-b2, #48403c);
    --c-background-bright:  var(--c-b3, #665e4e);

    --c-main-dark:          var(--c-a3, #ce6464);
    --c-main:               var(--c-a2, #ffd3ba);
    --c-main-alt:           var(--c-a1, #fff8e7);
    --c-main-bright:        var(--c-a0, #ffffff);
    
    --c-side-dark:          var(--c-ab, #6185e2);
    --c-side:               var(--c-aa, #5bcefa);
    --c-side-alt:           var(--c-a9, #b8f9ff);
    --c-side-bright:        var(--c-a8, #e5fffe);
    
    --c-contrast-dark:      var(--c-a4, #48212a);
    --c-contrast:           var(--c-a5, #ef2d56);
    --c-contrast-alt:       var(--c-a6, #f78088);
    --c-contrast-bright:    var(--c-a7, #f5a9b8);
    
    --c-comp-dark:          var(--c-b4, #254938);
    --c-comp:               var(--c-b5, #40f99b);
    --c-comp-magic:         var(--c-b7, #00c0c0);
    --c-comp-magic-alt:     var(--c-b6, #0bdbbf);
    
    --c-grad-1:             var(--c-b8, #a30262);
    --c-grad-2:             var(--c-b9, #b55690);
    --c-grad-3:             var(--c-ba, #d162a4);
    --c-grad-4:             var(--c-bb, #ff9a56);
    --c-grad-5:             var(--c-bc, #ef7627);
    --c-grad-6:             var(--c-bd, #d52d00);
    
    --c-add-sex:            var(--c-af, #ff69b4);
    --c-add-mix:            var(--c-be, #9b59d0);
    --c-add-serenity:       var(--c-bf, #400098);

    --c-add-green:          var(--c-ac, #53ff53);
    --c-add-apple:          var(--c-ad, #b4f839);
    --c-add-yellow:         var(--c-ae, #fff433);
}

/*--------------------------------------------------------*/




@font-face {
    font-family: rosetinted;
    font-weight: normal;
    font-style: normal;
    src: url(./webfonts/rose-tinted_regular_v1.1-webfont.woff2);
}

@font-face {
    font-family: rosetinted;
    font-weight: bold;
    font-style: normal;
    src: url(./webfonts/rose-tinted_bold_v1.1-webfont.woff2);
}

@font-face {
    font-family: rosetinted;
    font-weight: normal;
    font-style: italic;
    src: url(./webfonts/rose-tinted_italic_v1.1-webfont.woff2);
}

@font-face {
    font-family: rosetinted;
    font-weight: bold;
    font-style: italic;
    src: url(./webfonts/rose-tinted_bolditalic_v1.1-webfont.woff2);
}

@font-face {
    font-family: pixelfrac;
    src: url(./webfonts/pixel-fraktur-f-webfont.woff2);
}

@font-face {
    font-family: departure;
    src: url(./webfonts/DepartureMono-Regular.woff2);
}

@font-face {
    font-family: pixeloid;
    src: url(./webfonts/PixeloidSans.woff2);
    font-weight: normal;
}

@font-face {
    font-family: pixeloid;
    src: url(./webfonts/PixeloidSans-Bold.woff2);
    font-weight: bold;
}




* {
    margin: 0;
    box-sizing: border-box;
    font-family: "rosetinted", monospace;
}

body {
    background-color: var(--c-background);
    background-image: url(pentranarchy.svg);
    background-size: 80% 80%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    color: var(--c-main);
}

/*--------------------------------------------------------*/

.grid-container {
    display: grid;
    grid-template-areas:
        "gcheader"
        "gcmenu"
        "gcmain"
        "gcfooter"
        "gcborder"
        "gcrings"
}

.grid-container div {
    padding-left: 10px;
    padding-right: 10px;
}

.gcheader {
    margin-top: 1lh;
    margin-bottom: 1lh;
    grid-area: gcheader;
    text-align: center;
    font-size: xx-large;
    font-weight: bold;
}

.gcmenu {
    grid-area: gcmenu;
    text-align: center;
}

.gcmain {
    grid-area: gcmain;
    text-align: left;
}

.gcborder {
    margin-top: -1lh;
    grid-area: gcborder;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    font-size: medium;
    margin-bottom: 1lh;
}

.gcfooter {
    margin-top: 1lh;
    grid-area: gcfooter;
    margin-bottom: 0.1lh;
}

.gcrings {
    margin-top: 1lh;
}

/*--------------------------------------------------------*/

h1,
h2,
h3 {
    line-height: 1.1;

    margin-bottom: 0.1lh;
    margin-left: calc(3% + 1rem);
    margin-right: 20%;
    padding-left: 1rem;

    font-family: "pixelfrac", monospace;
    font-size: xxx-large;
    font-weight: normal;
    font-style: normal;

    border-bottom: 1px solid var(--c-main);
    text-decoration: 1px overline var(--c-background-alt);
}

h4,
h5,
h6 {
    line-height: 1.4;
    margin-top: 0.3lh;
    margin-bottom: 0.1lh;
    margin-left: calc(3% + 1rem);
    margin-right: 40%;

    font-family: "pixelfrac", monospace;
    font-size: xx-large;
    font-weight: normal;
    font-style: normal;

    border-bottom: 1px solid var(--c-background-alt);
    text-decoration: 1px overline var(--c-background-alt);
}

table,
td,
th {
    vertical-align: top;
    border: 1px solid var(--c-background-alt);
    border-collapse: collapse;
}

table {
    width: calc(97% - 2em);
    margin-top: 1lh;
    margin-bottom: 1lh;
    margin-left: calc(3% + 1rem);
}

td,
th {
    padding: 5px;
}

ul {
    list-style-type: "\2766   ";
}

li {
    margin: 0.5lh;
}

/*--------------------------------------------------------*/

a:link {
    color: var(--c-contrast);
    text-decoration: none;
    text-decoration-skip-ink: none;
}

a:visited {
    color: var(--c-contrast-alt);
    background-color: none;
}

a:hover {
    color: var(--c-contrast-alt);
    background-color: var(--c-contrast-dark);
}

a:active {
    color: var(--c-comp);
    background-color: var(--c-comp-dark);
}

/*--------------------------------------------------------*/

.txt {
    line-height: 1.5;
    font-weight: normal;
    font-style: normal;
    text-align: justify;
    font-size: medium;
    padding-left: calc(3% + 1rem);
    padding-right: calc(3% + 1rem);
}

.addend {
    list-style-type: "\2765   ";
    line-height: 1;
    margin-bottom: 0.3lh;
    padding-left: 1rem;
    padding-right: 3rem;
    font-size: small;
    font-style: italic;
    color: var(--c-main-dark);
}

.emphase {
    color: var(--c-main-alt);
}

.infrak {
    font-family: "pixelfrac", monospace;
    font-size: xxx-large;
}

span.abr { white-space: nowrap;}

.notyet {
    color: var(--c-background-bright); 
    text-decoration: line-through;
}

.emoji {
    font-size: xx-large; 
    text-align: center; 
    vertical-align: middle;
}

.fitc {
    margin-left: calc(3% + 1rem);
    width: fit-content;
    height: fit-content;
}

.code{
    margin: 1lh;
    margin-left: calc(3% + 1rem);
    margin-right: calc(3% + 1rem);
    width: fit-content;
    height: fit-content;
    padding: 0.25lh;
    font-family: "departure";
    font-size: smaller;
    color: var(--c-side);
    background-color: var(--c-add-serenity);
    border: 2pt solid var(--c-side-dark);
}



/*--------------------------------------------------------*/
/* 
.silent:hover {
    color: unset;
    background-color: unset;
}
.silent:active {
    color: unset;
    background-color: unset;
} */

.yugopromotion {
    aspect-ratio: 0.123609394313967861557478368356;
    object-fit: contain;
    width: 100%;
}