:root {

    color-scheme: light dark;

    /* z-order */
    --z-sticky-ui: 50;

    /* Themes */
    --theme-main-backdrop-image: url("https://cdn.cara.app/production/posts/f63e79e2-ff14-4371-b842-9983e63419d7/zahdernia-iTmLr5Kf7yszOG2muXONC-Dreamweaver01_DesktopBackground_2025-01-03-1237_Signed.png"); /* #0A0A0A */
    --theme-main-backdrop-scale: cover;
    --theme-main-color-primary: #bebbee; /* The Main Colour. */
    --theme-main-accent-panel-overlay: url("/assets/gui/bg_plaid_overlay.png");

    --theme-thyne-backdrop-image: url("https://cdn.cara.app/production/posts/d47c539a-381d-418f-b54d-b7929cd8ee67/zahdernia-ZMAveCQYz1g_Ex_i-9HuK-Rosaire-(Zahdernia----1080-Signed).png");
    --theme-thyne-backdrop-scale: cover;
    --theme-thyne-color-primary: red;
    --theme-thyne-accent-panel-overlay: url("/assets/gui/bg_stars.png");

    /* Backdrop */


    --backdrop-image: var(--theme-main-backdrop-image);
    --backdrop-scale: var(--theme-main-backdrop-scale); 
    --backdrop-color: color-mix(in hsl, black, var(--color-primary) 15%);

    --backdrop-footer: #000000e6;

    --backdrop-blur: Blur(2.5px);

    --panel-color: rgba(225, 225, 225, 0.95);
    --panel-color-hover: color-mix(in hsl, var(--panel-color), var(--color-primary) 50%);

    --accent-panel-color-lightdark: light-dark(#aaaaaa40, #00000040);
    --accent-panel-overlay: var(--theme-main-accent-panel-overlay);
    --accent-panel-color: color-mix(in hsl, var(--color-primary), var(--accent-panel-color-lightdark) 75%);

    --color-primary: var(--theme-main-color-primary);

    --color-warning: #BB5659;
    --color-warning-bg: color-mix(in hsl, var(--color-warning), transparent 50%);

    /* Layout */
    --grid-gap: 0.75rem;

    /* TEXT */

    /* Text Colours */
    --text-color: black;
    --text-color-footer: white;

    --text-shadow: black;

    /* Links */
    --link-color-main: color-mix(in hsl, var(--color-primary), var(--text-color) 25%);
    --link-color-visited: var(--link-color-main);
    --link-color-hover: white; /* color-mix(in hsl, var(--link-color-main), white 50%); */

    /* Fonts & Sizing */
    --font-main: var(--font-seriffirst);
    --font-sansfirst: 'Calibri', sans-serif, serif;
    --font-seriffirst: 'Book Antiqua', serif, sans-serif;

    --text-size: 1.2em;
    --text-size-big: 1.25em;
    --text-size-h1: 2em;
    --text-size-h2: 1.8em;
    --text-size-h3: 1.5em;
    --text-size-h4: 1.3em;
    --text-size-h5: 1.2em;
    --text-size-h6: 1.1em;
    --text-size-sub1: 0.85em;
    --text-size-footer: 0.8em;

    /* Borders */
    --border-thick: 3px double var(--color-primary);
    --border-thin: 1px solid var(--color-primary);
    --border-dotted: 1px dashed var(--color-primary);
    --border-inset: 2px inset var(--color-primary);

    --border-outer-width: 2px;

    /* Transitions */
    --transition-hover: 0.25s;

    /* Icons */
    --icon-menu: url("/assets/gui/icon_merida.svg");

}

/* Animations */

@keyframes glow-pulse {
    /* Adds a "glow" effect that pulses on and off. */
    /* Use with animation-direction alternate. */

    0% {text-shadow: 
        0px 0px 1px var(--color-primary), 
        0px 0px 3px var(--color-primary),
        0px 0px 5px var(--color-primary);} 
    50% {text-shadow: 
        0px 0px 1px var(--color-primary), 
        0px 0px 3px var(--color-primary), 
        0px 0px 5px var(--color-primary), 
        0px 0px 10px var(--color-primary), 
        0px 0px 15px var(--color-primary),
        0px 0px 25px var(--color-primary);}
    100% {text-shadow: 
        0px 0px 1px var(--color-primary), 
        0px 0px 3px var(--color-primary),
        0px 0px 5px var(--color-primary);} 

}

.glow-pulse {

    animation: glow-pulse 1s ease-in-out infinite;
    -webkit-animation: glow-pulse 1s ease-in-out infinite;

    @media (prefers-reduced-motion: reduce) {
        /* If reduced motion is turned on, disable the animation. */
        animation: none;
        -webkit-animation: none;

        /* Add a static glow, instead. */
        text-shadow: 0px 0px 5px var(--color-primary), 0px 0px 15px var(--color-primary);
    }

}

@keyframes rotate-wiggle {

    0% {transform: rotate(0deg);}
    25% {transform: rotate(15deg);}
    75% {transform: rotate(-15deg);}
    100% {transform: rotate(0deg);}

}

/* Elements */

a {

    /* Appearance */
    color: var(--link-color-main);

    /* Animations & Transitions */
    transition: var(--transition-hover);

}

a:visited {

    /* Appearance */
    color: var(--link-color-visited);

    /* Animations & Transitions */
    transition: var(--transition-hover);

}

a:hover, a:visited:hover {

    /* Appearance */
    color: var(--link-color-hover);

    text-shadow:
        -2px 0px 3px var(--link-color-main),
        2px 0px 3px var(--link-color-main);

    /* Animations & Transitions */
    transition: var(--transition-hover);

    /* Other */
    cursor: pointer;

}

.focuslink {

    /* Display */
    display: block;

    /* Margin & Padding */
    margin: auto;
    padding: 0px;

    /* Text */
    text-align: center;
    font-size: var(--text-size-big);

}

p {
    font-size: var(--text-size);
}

h1, h2, h3, h4, h5, h6 {
    /* Margins & Padding */
    margin: 0.25px;
    padding: 0.25rem;

    /* Border */
    border-bottom: var(--border-dotted);

    /* Text */
    text-align: center;
    text-shadow: 
        /* Outline */
        1px 0px 0px var(--panel-color),
        1px 1px 0px var(--panel-color),
        0px 1px 0px var(--panel-color),
        -1px 1px 0px var(--panel-color),
        -1px 0px 0px var(--panel-color),
        -1px -1px 0px var(--panel-color),
        0px -1px 0px var(--panel-color),
        1px -1px 0px var(--panel-color),
        /* Glow */
        0px 0px 3px var(--panel-color),
        0px 0px 5px var(--panel-color),
        0px 0px 7px var(--panel-color),
        0px 0px 9px var(--panel-color);
}

h1 {
    font-size: var(--text-size-h1);
}
h2 {
    font-size: var(--text-size-h2);
}
h3 {
    font-size: var(--text-size-h3);
}
h4 {
    font-size: var(--text-size-h4);
}
h5 {
    font-size: var(--text-size-h5);
}
h6 {
    font-size: var(--text-size-h6);
}

hgroup {
    /* Display */
    display: flex;
    flex-direction: row;

    align-items: baseline;
    justify-content: space-between;

    /* Size */
    min-width: 0px;

    /* Margins & Padding */
    margin: 0.25rem;
    padding: 0.25rem;

    /* Border */
    border-bottom: var(--border-dotted);

    h1, h2, h3, h4, h5, h6 {
        text-align: left;
        border: none;

        margin: 0px;
        padding: 0px;
    }

    p {
        text-align: right;
        border: none;

        margin: 0px;
        padding: 0px;
    }

}

.titlecard {
    /* Display */
    display: block;

    /* Margins & Padding */
    margin: auto;
    padding: 10rem 0px;
    padding-top: 15rem;

    @media ( orientation: portrait ) {
        padding-top: 5rem;
        padding-bottom: 2.5rem;
    }

    /* Borders */
    border: none;

    /* Text */
    text-align: center;
    font-family: var(--font-seriffirst);

    h1 {
        /* Margins & Padding */
        margin: 2.5rem;

        /* Text */
        font-size: calc(3 * var(--text-size-h1));
        
        color: white;

        animation-duration: 5s;
        
        text-align: center;
        text-transform: uppercase;
        
        
    }

    p {
        /* Text */
        font-size: var(--text-size-h3);
        color: var(--text-color-footer);
        text-align: center;
        font-style: italic;

        text-shadow: 
            0px 0px 1px var(--backdrop-footer), 
            0px 0px 2px var(--backdrop-footer), 
            0px 0px 3px var(--backdrop-footer), 
            0px 0px 5px var(--backdrop-footer), 
            0px 0px 10px var(--backdrop-footer), 
            0px 0px 15px var(--backdrop-footer);
    }

}

/* Lists */
ol {
    /* Alignment */
    align-content: left;

}

ul {
    /* Appearance */
    list-style-type: "\❖ ";

    /* Alignment */
    align-content: left;

    

    ul {

        list-style-type: "\⬩ ";

    }
}

li {
    text-align: left;

    font-size: var(--text-size);
}

blockquote {
    /* Appearance */
    background-color: var(--panel-color);
    background-image: var(--accent-panel-overlay);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--color-focus); /* Adds the Panel Background Border */

    border: var(--border-thin);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

    /* Margins & Padding */
    margin: 1rem;
    padding: 1.5rem;

    /* Text */
    text-align: center;

    p.attribution {
        text-align: right;
        padding: 0px 2rem;
    }

    p.attribution::before {
            content: "— ";
        }
}

.textdecoration {

    /* Display */
    display: block;

    align-self: center;
    justify-self: center;

    /* Margins & Padding */
    margin: auto;
    padding: 0.5rem;

    /* Text */
    color: var(--color-primary);
    text-align: center;

    font-size: var(--text-size-big);

    text-shadow:
        0px 0px 1px var(--panel-color),
        0px 0px 3px var(--panel-color);
    

}

hr {
    margin: 0.5rem;

    border: none;
    border-bottom: var(--border-dotted);
}

.vr {
    @media (orientation: portrait) {display: none; margin:0px;} /* This is irrelevant on mobile. */
    
    /* Size */
    min-height: 0px;
    height: auto;
    min-width: 0px;
    width: 1rem;

    /* Margin */
    margin: 0.5rem;
    
    /* Border */
    border: none;
    border-right: var(--border-dotted);
    
}

iframe {
    /* Positioning */
    align-self: center;
    justify-self: center;

    /* Size */
    width: 90%;
    height: auto;
    aspect-ratio: 16/9;

    /* Margins & Padding */
    margin: 0.5rem;
    padding: 0px;

    /* Border */
    border: var(--border-inset);

}

figure {
    /* Margins & Padding */
    margin: 0.25rem;
    padding: 0.25rem;

    align-content: center;
    align-items: center;

    text-align: center;

    figcaption {
        text-align: center;
        font-size: var(--text-size-sub1);
    }

    img {
        /* Size */
        max-width: 100%;

        /* Border */
        border: var(--border-inset);
    }

    iframe {
        min-width: 0px;
        margin: 0px;
        padding: 0px;
        }
}

.figure-left {
    display: grid;
    grid: ' figure textbox textbox ';
    
    figure { 
        grid-area: figure; 
        padding: 0.75rem; 
        padding-left: 0px;
        border-right: var(--border-dotted);
        min-width: 0px;
    }
    div { 
        grid-area: textbox; 
        margin: 0.25rem; 
        min-width: 0px;
    }
}

.figure-right {
    display: grid;
    grid: ' textbox textbox figure ';

    figure { 
        grid-area: figure; 
        padding: 0.75rem; 
        padding-right: 0px;
        border-left: var(--border-dotted);
        min-width: 0px;
    }
    div { 
        grid-area: textbox; 
        margin: 0.25rem; 
        min-width: 0px;
    }
}

/* Main Building Blocks */

html {
    /* Background */
    background-image: var(--backdrop-image);
    background-color: var(--backdrop-color);
    background-position: center;

    background-attachment: fixed;
    background-size: var(--backdrop-scale);
    image-rendering: auto;

    box-sizing: border-box;

    /* Margins & Padding */
    margin: 0px;
    padding: 0px;

    /* Text & Fonts */
    font-family: var(--font-main);
    color: var(--text-color);

}

body {
    /* Display & Alignment */
    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    /* Size */
    min-height: 100vh;

    /* Margins & Padding */
    margin: 0px;
    padding: 0px;

    /* Text & Fonts */
}

#nav-button {

    content: var(--icon-menu);
    /* Display */
    position: fixed;
    z-index: calc(1 + var(--z-sticky-ui)); /* This keeps it on top. */

    transform-origin: center;

    /* Size */
    min-width: 0px;
    min-height: 0px;
    max-width: 3.5rem;
    max-height: 3.5rem;
    
    aspect-ratio: 1 / 1;

    /* Margins & Padding */
    margin: 0px;
    padding: 0.5rem;

    

    /* Animations */
    animation: rotate-wiggle 0.5s ease 0.5s 1;
    -webkit-animation: rotate-wiggle 0.5s ease 0.5s 1;
    @media ( prefers-reduced-motion: reduce ) {
        animation: none;
        -webkit-animation: none;
    }

    transition: var(--transition-hover);

}

#nav-button:hover {
    /* Appearance */
    filter: 
        drop-shadow(0px 0px 3px var(--color-primary)) 
        drop-shadow(0px 0px 10px var(--color-primary));

    /* Animation */
    animation: rotate-wiggle 0.5s infinite;
    -webkit-animation: rotate-wiggle 0.5s infinite;
    @media ( prefers-reduced-motion: reduce ) {
        animation: none;
        -webkit-animation: none;
    }

    transition: calc(var(--transition-hover) / 2);

    /* Other */
    cursor: pointer;
}

.navbar-hidden { /* Use when the navbar should be hidden. */
    position: fixed;

    transform-origin: bottom;
    transform: translateY(-115%);

    /* Margins & Padding */
    
    @media (orientation: landscape) {padding-left: 4.5rem !important;}
}

.navbar-main {

    /* Display & Orientation */
    z-index: var(--z-sticky-ui);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    /* Background & Appearance */
    background-color: var(--accent-panel-color);
    backdrop-filter: var(--backdrop-blur);

    /* Size */
    width: 100%;
    min-height: 4.5rem;

    /* Margins & Padding */
    margin: 1.5rem auto;
    padding: 0px;

    /* Border */
    border-top: var(--border-thick);
    border-bottom: var(--border-thick);

    box-shadow: 0px 0px 0px var(--border-outer-width) var(--accent-panel-color);

    /* Base Text Appearance */
    color: var(--text-color-footer);
    text-decoration: none;
    text-shadow: none;

    /* Other */
    user-select: none;

    h1 { /* Site Title */

        /* Margins & Padding */
        margin: 0.5rem;
        padding: 0.2rem;

        /* Borders */
        border: none;

        /* Text */
        font-size: var(--text-size-h2);
        text-shadow: none;

    }

    a, h3 { /* Nav Headers & Links */

        /* Margins & Padding */
        margin: 0.25rem;;
        padding: 0.2rem;

        /* Borders */
        border: none;

        /* Text */
        color: var(--text-color-footer);
        font-size: var(--text-size-h5);
        text-shadow: none;
        text-decoration: none;
        
    }

    a:hover, a:visited:hover {
        /* Text */
        text-decoration: underline;

        text-shadow: 
            0px 0px 1px var(--color-primary),
            0px 0px 3px var(--color-primary),
            0px 0px 5px var(--color-primary);

    }

    nav { /* This holds the link containers. */

        /* Display & Orientation */
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: start;

        margin: 0.5rem;
        padding: 0.2rem;

        border-left: var(--border-dotted);

        p, div { /* Removes margins/padding from contents. */
            margin: 0px;
            padding: 0px;
        }

    }

    div { /* These are the lines of links. */

        /* Display & Orientation */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        justify-content: center;
        align-items: center;

        /* Background */
        background-color: transparent;
        backdrop-filter: none;

        /* Margins & Padding */
        margin: 0.25rem;

    }

}

.navbar-thin {
    /* Display */
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-ui);

    display: flex;
    flex-direction: row;
    @media (orientation:portrait) {flex-direction: column;}

    align-items: center;

    box-sizing: border-box;

    /* Background */
    background: var(--backdrop-footer); 

    /* Size */
    min-width: 0px;
    min-height: 4.5rem;
    width: 100%;

    /* Margins & Padding */
    margin: 0px;
    padding: 0.5rem 0px;

    /* Animation */
    transition: 0.5s;

    /* Text */
    text-align: center;

    /* Other */
    user-select: none;

    h1 {
        
        /* Size */
        min-width: 0px;
        min-height: 0px;
        /* Margin & Padding */
        padding: 0.5rem 1rem;

        /* Border */
        border: none;
        border-right: var(--border-dotted);

        /* Text */
        font-size: var(--text-size-h3);
        color: var(--text-color-footer);
        text-align: center;

        text-shadow: 
            /* Outline */
            1px 0px 0px var(--color-primary),
            1px 1px 0px var(--color-primary),
            0px 1px 0px var(--color-primary),
            -1px 1px 0px var(--color-primary),
            -1px 0px 0px var(--color-primary),
            -1px -1px 0px var(--color-primary),
            0px -1px 0px var(--color-primary),
            1px -1px 0px var(--color-primary),
            /* Glow */
            0px 0px 3px var(--color-primary),
            0px 0px 5px var(--color-primary),
            0px 0px 7px var(--color-primary),
            0px 0px 9px var(--color-primary);

        transition: var(--transition-hover);
    }

    h2 {
        /* Size */
        min-width: fit-content;
        min-height: 0px;
        height:max-content;

        /* Margin & Padding */
        padding: 0.5rem 1rem;

        /* Border */
        border: none;
        @media (orientation: landscape) {border-right: var(--border-dotted);}

        /* Text */
        font-size: var(--text-size-h4);
        color: var(--text-color-footer);
        text-align: center;

        text-shadow: 
            /* Outline */
            1px 0px 0px var(--color-primary),
            1px 1px 0px var(--color-primary),
            0px 1px 0px var(--color-primary),
            -1px 1px 0px var(--color-primary),
            -1px 0px 0px var(--color-primary),
            -1px -1px 0px var(--color-primary),
            0px -1px 0px var(--color-primary),
            1px -1px 0px var(--color-primary),
            /* Glow */
            0px 0px 3px var(--color-primary),
            0px 0px 5px var(--color-primary),
            0px 0px 7px var(--color-primary),
            0px 0px 9px var(--color-primary);

        transition: var(--transition-hover);
    }

    h1:hover {
        text-decoration: underline;
        transition: var(--transition-hover);
    }

    nav {
        /* Display */
        display: flex;
        flex-direction: row;
        @media (orientation: portrait) {flex-direction: column;}
        flex-wrap: wrap;
        align-content: baseline;
        align-items: center;

        box-sizing: border-box;

        justify-content: space-between;
        @media (orientation: portrait) {justify-content: center;}

        line-height: 1.25rem;

        /* Size */
        min-width: 0px;
        min-height: 0px;
        flex-grow: 1;

        /* Margins & Padding */
        margin: 0px 1rem;
        @media (orientation: portrait) {margin: 0px 0.5rem;}

        /* Text */
        text-align: center;
        
    }

    div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        box-sizing: border-box;

        align-items: center;

        /* Size */
        min-width: 0px;
        min-height: 0px;
        width: fit-content;

        /* Margins & Padding */
        margin: 0px;
        padding: 0px;

        /* Text */
        text-align: center;
    }

    a, a:visited {
        /* Text */
        color: var(--text-color-footer);
        font-size: var(--text-size-big);
        text-decoration: none;
    }

    a:hover, a:visited:hover {
        /* Text */
        color: var(--color-primary);
        text-decoration: underline;
        
    }

    p { 
        color: var(--text-color-footer);
        font-size: var(--text-size-big);
        margin: 0.5rem;
        @media (orientation: portrait) {margin: 0.25rem;}
    }

    

}



footer {
    /* Display & Alignment */
    align-self: end;

    box-sizing: border-box;

    /* Background */
    background: linear-gradient(
        180deg, 
        transparent 0%,
        var(--backdrop-footer) 25%
        );

    mask: linear-gradient(
        180deg, 
        transparent 0%, 
        black 25%
    );

    backdrop-filter: var(--backdrop-blur);

    /* Size */
    width: 100%;

    /* Margins & Padding */
    margin: 0px;
    margin-top: auto;

    padding: 0px;
    padding-top: 4rem;
    padding-bottom: 1rem;

    /* Text & Fonts */
    color: var(--text-color-footer);
    text-shadow:
        0px 0px 1px var(--text-shadow),
        0px 0px 3px var(--text-shadow),
        0px 0px 5px var(--text-shadow),
        0px 0px 7px var(--text-shadow),
        0px 0px 9px var(--text-shadow);

    text-align: center;
    font-size: var(--text-size-footer) !important;

    a, a:visited {
        color: color-mix(in hsl, var(--color-primary), var(--text-color-footer) 35%);
    }
    
}

section {
    /* Display & Alignment */
    display: block;

    box-sizing: border-box;
    
    /* Background */
    background-color: var(--accent-panel-color);
    background-image: var(--accent-panel-overlay);
    backdrop-filter: var(--backdrop-blur);

    /* Size */
    min-width: 0px;
    min-height: 0px;
    max-height: fit-content;

    /* Margins & Padding */
    margin: 0.25rem;
    margin-top: var(--grid-gap);
    padding: 0.5rem;

    /* Border */
    border: var(--border-thick);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--accent-panel-color);

}

article {
    /* Display & Alignment */
    display: block;
    flex-direction: column;

    box-sizing: border-box;

    /* Background */
    background-color: var(--panel-color);
    backdrop-filter: var(--backdrop-blur);

    /* Margins & Padding */
    margin: 0.5rem;
    margin-top: var(--grid-gap);
    padding: 0.75rem;

    /* Border */
    border: var(--border-thin);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

    /* Text */
    text-align: left;

}

main {
    /* Display & Alignment */
    display: grid;
    justify-content: center;

    box-sizing: border-box;

    /* Background */
    background-color: transparent; /* var(--accent-panel-color); */
    background-image: none; /* var(--accent-panel-overlay); */
    backdrop-filter: none; /* var(--backdrop-blur); */

    /* Margins & Padding */
    margin: 0px;
    padding: 1.5rem 7rem;
    @media (orientation: portrait) {
        padding: 0rem 1rem;
    }

}

.gridslot-about { grid-area: about; }
.gridslot-bulletin { grid-area: bulletin; }
.gridslot-changelog { grid-area: changelog; }
.gridslot-other { grid-area: other; }
.gridslot-welcome { grid-area: welcome; }

.col-left { grid-area: col-left }
.col-right { grid-area: col-right }
.col-main { grid-area: col-main }

.layout-home {
    /* Display & Alignment */

    display: grid;
    gap: var(--grid-gap);
    /* grid-auto-flow: column; */

    /* grid-template: repeat(1fr, 5fr, 1fr); */
    grid:
        'col-left col-main col-main col-main col-right';

    @media (orientation: portrait) {
        display: grid;
        gap: 0px;
        grid: 
            /* 'welcome'
            'changelog'
            'bulletin'
            'stream'
            'about'
            'other'; */
            'col-left'
            'col-main'
            'col-right';
    }

    /* Background */
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;

    section {
        /* Size */
        min-width: 0px;
        flex-grow: 1;

        /* Margins & Padding */
        margin: 0px;
        margin-top: var(--grid-gap);
        
    }

}

.gridslot-stream { /* Mobile Controls for the Stream Section */

    div { /* For the button bank. */
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        /* Size */
        min-width: 0px;
    }

    button {
        /* Background */
        background-color: var(--panel-color);
        backdrop-filter: var(--backdrop-blur);

        /* Size */
        min-width: 0px;
        width: 100%;

        /* Margins & Padding */
        margin: 0.75rem;
        margin-bottom: 0px;

        /* Border */
        border: var(--border-thin);
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

        /* Text */
        color: var(--text-color);
        font-size: var(--text-size);
        font-family: var(--font-main);
    }

    button:hover {
        /* Background */
        background-color: var(--panel-color-hover);

        /* Border */
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color-hover);

        /* Text */
        text-shadow:
            0px 0px 1px var(--panel-color), 
            0px 0px 3px var(--panel-color), 
            0px 0px 5px var(--panel-color);
    }

    p {
        margin: 0.5rem;
    }

}

.gridslot-stream-box {
    display: flex;
}

/* Specialty */

.index { /* For the main element on the index page. */
    /* Display */
    display: flex;
    align-self: flex-start;

    /* Size */
    min-width: 0px;
    min-height: 0px;

    /* Margins & Padding */
    margin: auto;
    margin-top: 25vh;
    padding: 1rem;

    /* Text */
    text-align: center;

    section {
        /* Size */
        max-width: 50%;
        @media ( orientation: portrait ) { max-width: 100%;}
    }

    article {
        /* Text */
        text-align: center;
    }

}

.schedule {

    /* Display & Orientation */
    flex-grow: 1;
    height: fit-content;
    border-collapse: collapse;

    /* Margins & Padding */
    margin: 10px auto;

    th {
        /* Size */
        width: 40%;

        /* Margins & Padding */
        padding: 2px;
        padding-right: 5px;

        /* Appearance */
        text-align: right;
        border: none;
        border-right: var(--border-dotted);
    }
    td {
        /* Size */
        width: 40%;

        /* Margins & Padding */
        padding: 2px;
        padding-left: 5px;

        /* Appearance */
        text-align: left;
        border: none;
        border-left: var(--border-dotted);

    }

    caption {
        border-bottom: var(--border-dotted);
    }
}

.arcade {
    --box-hover-color: white; /* color-mix(in hsl, var(--panel-color), color-mix(in hsl, var(--color-primary), transparent 50%) 50%); */

    /* Display */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    @media (orientation: portrait) {display: block;}

    box-sizing: border-box;

    /* Size */

    /* Margins & Padding */
    margin: 1rem;
    padding: 0px;

    a { /* Game Buttons */
        /* Display */
        display: flex;
        flex-direction: column;
        @media (orientation: portrait) {flex-direction: row;}

        /* Background */
        background-color: var(--panel-color);

        /* Size */
        flex-grow: 1;

        /* Margins & Padding */
        @media (orientation: portrait) {margin: 1rem 0px;}

        /* Border */
        border: var(--border-dotted);
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

        /* Text */
        color: var(--text-color);
        text-decoration: none;

        /* Animations & Transitons */
        transition: var(--transition-hover);
    }

    img {
        @media (orientation: portrait) {
            /* Size */
            min-width: 0px;
            max-width: 50%;
        }
    }

    hgroup {
        justify-content: space-between;

        h3 {
            font-size: var(--text-size-h3);
            align-self: center;
            text-align: left;

            text-shadow: unset;
        }
        div {
            margin: 0px;
        }
        p {
            margin: 0px;

            font-size: var(--text-size-sub1);
            font-style: italic;
            text-align: right;
        }

        @media (orientation:portrait) {
            display: flex;
            flex-direction: column;

            div {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                justify-items: baseline;

                min-width: 0px;
                width: 100%;
            }
        }
    }

    div {
        /* Display */
        justify-content: space-between;

        /* Margins & Padding */
        margin: 0.5rem;
    }

    p {
        margin: 0.5rem;
    }

    a:hover {
        transform: scale(105%);
        background-color: var(--box-hover-color);

        box-shadow: 
        0px 0px 0px var(--border-outer-width) var(--box-hover-color), 0px 0px 10px 5px var(--box-hover-color);

        color: color-mix(in hsl, var(--color-primary), var(--text-color) 50%);

        text-shadow:
            0px 0px 1px var(--color-primary),
            0px 0px 3px color-mix(in hsl, var(--color-primary), transparent 50%),
            0px 0px 5px color-mix(in hsl, var(--color-primary), transparent 75%);
    }

}

.arcade-gameinfo {
    /* Display */
    box-sizing: border-box;

    justify-content: center;
    justify-items: center;

    article { /* Main Page */
        /* Display & Alignment */
        display: block;

        box-sizing: border-box;
        
        /* Background */
        background-color: var(--accent-panel-color);
        background-image: var(--accent-panel-overlay);
        
        backdrop-filter: var(--backdrop-blur);

        /* Margins & Padding */

        /* Border */
        border: var(--border-thick);
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--accent-panel-color);
    }

    hgroup { /* Title & Sub-Title */
        /* Display & Alignment */
        display: flex;
        flex-direction: row;

        box-sizing: border-box;

        /* Background */
        background-color: var(--panel-color);
        backdrop-filter: var(--backdrop-blur);

        /* Margins & Padding */
        margin: 0.5rem;
        padding: 0.5rem;

        /* Outline */
        border: var(--border-dotted);
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

    }

    div {
        /* Display */
        display: flex;
        justify-content: center;

        box-sizing: border-box;

        /* Size */
        min-width: 0px;
        min-height: 0px;

        /* Margins & Padding */
        margin: auto;
    }

    iframe { /* Game Frame */
        /* Display */
        box-sizing: border-box;

        /* Size */
        min-height: 0px;
        min-width: 0px;

        /* Margins & Padding */
        margin: 1rem auto;
        padding: auto;
        
    }

    section { /* Description, Game Info */
        /* Display & Alignment */
        display: block;
        flex-direction: column;

        box-sizing: border-box;

        /* Background */
        background-color: var(--panel-color);
        backdrop-filter: var(--backdrop-blur);

        /* Margins & Padding */
        margin: 1rem;
        margin-top: var(--grid-gap);
        padding: 0.75rem;

        /* Border */
        border: var(--border-thin);
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

        /* Text */
        text-align: left;

    }

    table {
        background-color: var(--panel-color);
        border: var(--border-thin);
        padding: 0px;
        margin: 1rem auto;

        align-self: center;

        th {
            border: var(--border-thin);
            margin: 0px;
            padding: 0.25rem;
        }

        td {
            border: var(--border-thin);
            margin: 0px;
            padding: 0.25rem;
            text-align: center;
        }

    }

    .game-info {
        display: flex;
        flex-direction: row;
        @media (orientation: portrait) {flex-direction: column;}

        box-sizing: border-box;
        align-content: center;

        div {
            display: block;
            width: 50%;
            
            margin: 1rem;
            justify-content: center;

            @media (orientation: portrait) {
                width: unset;
            }

        }
    }

}

.artgallery {
    /* Display */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;

    box-sizing: border-box;

    /* Background */
    /* background-color: var(--panel-color);
    background-image: var(--accent-panel-overlay);
    
    backdrop-filter: var(--backdrop-blur); */

    /* Size */
    min-width: 0px;
    width: 100%;
    min-height: 0px;

    /* Margin & Padding */
    margin: 1rem;
    padding: 1rem;

    /* Border */
    /* border: var(--border-thick);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--accent-panel-color); */

    img {
        overflow: hidden;
        clip-path: content-box;

        position: relative;
        transform-origin: center;

        image-rendering: auto;
    }
}

.library {
    --box-hover-color: white;

    /* Display */
    display: block;

    box-sizing: border-box;

    /* Sizing */
    min-width: 0px;
    min-height: 0px;
    flex-grow: 1;

    /* Margins & Padding */
    margin: 0.5rem;
    padding: 0px;

    a { /* Library Button */
        /* Display */
        display: flex;
        flex-direction: row;


        /* Background */
        background-color: var(--panel-color);

        /* Size */
        min-width: 0px;
        min-height: 0px;
        width: auto;
        flex-grow: 1;

        /* Margins & Padding */
        margin: 0.5rem;
        padding: 0.5rem;
        
        /* Border */
        border: var(--border-thin);
        box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

    }

    img {

        border: var(--border-thin);
        aspect-ratio: 6/9;
        overflow: hidden;
        object-fit: cover;

        /* Size */
        min-width: 0px;
        min-height: 0px;

        width: auto;
        max-height: 25vh;

        @media ( orientation: portrait ) {
            width: 50vw;
            max-height: 100%;
        }

        image-rendering: auto;
    
    }

    hgroup {
        /* Display */
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        
        margin: 0px;
        padding: 0px;

        h3 {

            width: 100%;
            color: var(--text-color);
            font-size: var(--text-size-h3);
            text-align: left;
            margin: 0.25rem;
            padding: 0px;
            align-self: center;

            text-shadow: unset;

            @media (orientation: portrait ) { text-align: center;}
        }

        div {
            margin: 0px;
            border: none;
        }

        p {
            /* Margin & Padding */
            margin: 0.25rem;
            padding: 0px;

            /* Border */
            border: none;

            /* Text */
            color: var(--text-color);
            font-style: italic;
            font-size: var(--text-size-sub1);
            text-align: right;
            
        }

        @media (orientation:portrait) {
            display: flex;
            flex-direction: column;

            div {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                justify-items: baseline;

                min-width: 0px;
                width: 100%;
            }
        }

    }

    div {

        box-sizing: border-box;
        
        min-width: 0px;
        width: 100%;

        min-height: 0px;
        height: 100%;

        margin: 0rem 0.5rem;
        
    }

    .description {
        display: flex;
        flex-direction: column;
        flex-grow: 1;

        min-height: 0px;
        height: auto;

        margin: 0rem;
        padding: 0rem;

        border: none;

        line-height: 1.15rem;
    }

    p {
        /* Background */
        background: unset;

        /* Margin & Padding */
        margin: 0.5rem;
        padding: 0px;

        /* Border */
        border: none;
        box-shadow: none;

        /* Text */
        color: var(--text-color);
        font-size: var(--text-size);
        text-align: justify;
        
    }

    blockquote {
        /* Background */

        /* Margin & Padding */
        margin: 1rem;
        padding: 1rem;

        /* Border */
        border: unset;
        box-shadow: unset;

        /* Text */
        color: var(--text-color);
        font-style: italic;
        font-size: var(--text-size);
        text-align: justify;
        
    }

    a:hover {
        transform: scale(105%);
        background-color: var(--box-hover-color);

        box-shadow: 
        0px 0px 0px var(--border-outer-width) var(--box-hover-color), 0px 0px 10px 5px var(--box-hover-color);

        color: color-mix(in hsl, var(--color-primary), var(--text-color) 50%);

        text-shadow:
            0px 0px 1px var(--color-primary),
            0px 0px 3px color-mix(in hsl, var(--color-primary), transparent 50%),
            0px 0px 5px color-mix(in hsl, var(--color-primary), transparent 75%);

    }

}

.warning {

    /* Appearance */
    background-color: var(--panel-color);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color); /* Adds the Panel Background Border */

    backdrop-filter: var(--backdrop-blur);

    border: var(--border-thick);
    border-color: var(--color-warning);


    /* Margins & Padding */
    margin: 1rem 0.5rem;

    
    text-align: center;

    p {
        margin: 0px;
        padding: 1rem;

        font-size: var(--text-size);
    }

    summary {
        background-color: var(--color-warning);
        font-weight: bold;
        padding: 0.75rem;
        min-width: 0px;
        width: auto;
        font-size: var(--text-size);
    }

    summary:hover {
        text-shadow: 
            0px 0px 1px white,
            0px 0px 3px white,
            0px 0px 5px white;
        cursor: pointer ;
    }

    ul {
        list-style-type: "\⬩ ";
        margin: auto;
        text-align: start;
        width: fit-content;

        font-size: var(--text-size);
    }


}

/* Worlds */

.worldcontainer {
    --blur-height: 200px;

    /* Background */
    
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in hsl, var(--backdrop-footer), transparent 15%) var(--blur-height)
    );    
    
    mask: linear-gradient(
        180deg, 
        transparent 0%,
        black var(--blur-height)
    );
    backdrop-filter: var(--backdrop-blur);

    /* Size */
    min-width: 0px;
    min-height: 0px;

    /* Margins & Padding */
    margin: 0px;
    padding-top: var(--blur-height);


}

.worldfooter {
    /* Background */
    background: var(--backdrop-footer);
    mask: unset;

    /* Margins & Padding */
    margin: 0px;
    padding: 1rem 0px;

    /* Border */
    border-top: var(--border-thick);
    /* box-shadow: 0px 0px 0px var(--border-outer-width) var(--backdrop-footer); */
}


.comingsoon {
    /* Display & Alignment */
    display: block;
    flex-direction: column;

    box-sizing: border-box;

    /* Background */
    background-color: var(--panel-color);
    backdrop-filter: var(--backdrop-blur);

    /* Margins & Padding */
    margin: 0.5rem;
    padding: 0.75rem;

    /* Border */
    border: var(--border-thin);
    box-shadow: 0px 0px 0px var(--border-outer-width) var(--panel-color);

    /* Text */
    text-align: center;
    font-size: var(--text-size-h1);
}

/* Images */

#zahdi-float {
    /* The Image */
    content: url("/assets/images/zahdi_rendered.png");
    image-rendering: auto;

    /* Placement */
    z-index: var(--z-image-sticker);
    align-self: center;

    /* Margins & Padding */
    margin: 1rem;
    padding: 0px;

    /* Size */
    width: 25%;
    height: 25%;
    max-width:250px;

    /* Additional Effects */
    filter: drop-shadow(0px 0px 4px var(--panel-color)) drop-shadow(12px 3px 2px var(--accent-panel-color-lightdark));
    }