:root {
    /** Globals **/
        --font-family: 'Arial', sans-serif;
        --text-color: #f0f0f0;
        --background-color: #11111100;
        --border-width: 0.5rem;
        --border-color: #00d6f7FF;
        --text-color-muted: #d8d8d8;
        --text-color-soft: #b8b8b8;
        --text-color-subtle: #949494;
        --text-color-dim: #6f6f6f;

    /** Base Theme **/
        --theme-surface-gradient-start: #262626;
        --theme-surface-gradient-end: #1b1b1b;
        --theme-accent-gradient-start: #2e2e2eff;
        --theme-accent-gradient-end: #232323ff;
        --theme-accent-outline-color: #0057ff;
        --theme-accent-outline-width: 0.4rem;
        --theme-accent-active-gradient-start: #181818ff;
        --theme-accent-active-gradient-end: #111111ff;
        --theme-accent-active-outline-color: #ff2b2b;
        --theme-accent-active-outline-width: var(--theme-accent-outline-width);

    /** Header **/
        --header-gradient-start: var(--theme-surface-gradient-start);
        --header-gradient-end: var(--theme-surface-gradient-end);
        --header-border-color: var(--border-color);

    /** Main Panels **/
        --panel-gradient-start: #222222;
        --panel-gradient-end: #151515;

    /** Buttons **/
        /* Buttons - Default */
            --button-text-color: #f2f2f2;
            --button-gradient-start: #1e2c41;
            --button-gradient-end: #162233;
            --button-outline-color: #0057ff;
            --button-outline-width: var(--theme-accent-outline-width);
            --button-tilt-deg: 0deg;
            --button-border-radius: 0.2em;
            
        /* Buttons - Hover */
            --button-hover-text-color: #ffffff;
            --button-hover-gradient-start: #43212b;
            --button-hover-gradient-end: #2e171d;
            --button-hover-outline-color: #ff2b2b;
            --button-hover-outline-width: var(--theme-accent-outline-width);
            --button-hover-tilt-deg: -1deg;
            
        /* Buttons - Active */
            --button-active-text-color: #fff1d9;
            --button-active-outline-color: #ff8a1e;
            --button-active-outline-width: var(--theme-accent-active-outline-width);
            --button-active-gradient-start: #c86f1c;
            --button-active-gradient-end: #7d3f0b;
            --button-active-tilt-deg: 1deg;

    /** Alerts **/
        --alert-outline-color: #ff2b2b55;
        --alert-gradient-start: #2d111155;
        --alert-gradient-end: #1c0a0a55;

    /** Board / Post **/
        --media-hover-outline-color: #0057ff;
        --media-active-outline-color: #ff2b2b;
        --post-divider-color: rgba(255, 255, 255, 0.12);
        --post-gradient-start: #242424;
        --post-gradient-end: #161616;
        --post-indent-color: #ff8a1e;
        --post-indent-hover-color: #ffb04d;
        --post-indent-width: var(--post-outline-width);

        /* Post outlines */
            --post-outline-color: var(--theme-accent-outline-color);
            --post-outline-width: var(--theme-accent-outline-width);
            --post-hover-outline-color: var(--theme-accent-active-outline-color);
            --post-hover-outline-width: var(--theme-accent-active-outline-width);
            --post-outline-offset: 0rem;

    /** Link / Brand **/
        --sts-highlight-color: #0057ff;
        --youtube-color: red;
        --github-color: #f2f2f2;
        --email-primary-color: #0057ff;
        --email-secondary-color: #ff2b2b;

    /** Shop **/
        --shop-header-text-color: #f8f8f8;
        --shop-divider-color: rgba(255, 255, 255, 0.18);
        --shop-row-separator-color: rgba(255, 255, 255, 0.12);
        --shop-row-text-color: var(--button-text-color);
        --shop-row-hover-text-color: #ffffff;
        --shop-row-active-text-color: #f2f2f2;
        --shop-row-outline-color: var(--button-outline-color);
        --shop-row-outline-width: var(--button-outline-width);

        /* Shop Rows - Default */
            --shop-row-default-gradient-start: var(--button-gradient-start);
            --shop-row-default-gradient-end: var(--button-gradient-end);
            --shop-row-default-outline-width: var(--button-outline-width);
            --shop-row-default-outline-color: var(--button-outline-color);

        /* Shop Rows - Hover */
            --shop-row-hover-gradient-start: var(--button-hover-gradient-start);
            --shop-row-hover-gradient-end: var(--button-hover-gradient-end);
            --shop-row-hover-outline-width: var(--button-hover-outline-width);
            --shop-row-hover-outline-color: var(--button-hover-outline-color);

        /* Shop Rows - Active */
            --shop-row-active-gradient-start: var(--button-active-gradient-start);
            --shop-row-active-gradient-end: var(--button-active-gradient-end);
            --shop-row-active-outline-width: var(--shop-row-outline-width);
            --shop-row-active-outline-color: var(--button-active-outline-color);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    background-color: #111111;
}
body {
    font-family: var(--font-family);
    color: var(--text-color);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 16em 1fr;
}
@media (max-width: 780px) {
    body {
        background-image: url(../Assets/dasmbPortrait.png);
    }
}