html {
    --c_gray5:                #131a20;
    --c_gray4:                #1d262f;
    --c_gray3:                #242e38;
    --c_gray2:                #2f3b46;
    --c_gray1:                #e5e8eb;
    --c_green1:               hsl(160, 100%, 37%);

    --c_background:           black;

    --c_default: rgb(127,127,127);
    --c_valuedefault: rgb(255,255,255);
    --c_fire: rgb(150,0,0);
    --c_cold: rgb(54,100,146);
    --c_lightning: rgb(255,215,0);
    --c_chaos: rgb(208,32,144);
    --c_augmented: rgb(136,136,255);
    --c_crafted: rgb(184,218,242);
    --c_fractured: rgb(162,145,98);
    --c_enchanted: rgb(184,218,242);
    --c_hellscaped: rgb(255,110,37);
    --c_brequelmutated: rgb(205,34,133);
    --c_allocatedcruciblemod: rgb(255,115,57);
    --c_unmet: rgb(210,0,0);
    --c_uniqueitem: rgb(175,96,37);
    --c_unique: rgb(175,96,37);
    --c_rareitem: rgb(255,255,119);
    --c_rare: rgb(255,255,119);
    --c_magicitem: rgb(136,136,255);
    --c_magic: rgb(136,136,255);
    --c_whiteitem: rgb(200,200,200);
    --c_normal: rgb(200,200,200);
    --c_gemitem: rgb(27,162,155);
    --c_gem: rgb(27,162,155);
    --c_currencyitem: rgb(170,158,130);
    --c_currency: rgb(170,158,130);
    --c_questitem: rgb(74,230,58);
    --c_quest: rgb(74,230,58);
    --c_nemesismod: rgb(255,200,0);
    --c_nemesismodoutline: rgb(219,34,0);
    --c_talismanmod: rgb(141,241,79);
    --c_talismanmodoutline: rgb(0,0,0);
    --c_title: rgb(231,180,120);
    --c_corrupted: rgb(210,0,0);
    --c_favour: rgb(170,158,130);
    --c_supporterpacknewitem: rgb(180,96,0);
    --c_supporterpackitem: rgb(163,141,109);
    --c_supporterpackincludes: rgb(242,162,47);
    --c_bloodlinemod: rgb(210,0,220);
    --c_bloodlinemodoutline: rgb(58,0,125);
    --c_tormentmod: rgb(50,230,100);
    --c_tormentmodoutline: rgb(0,78,117);
    --c_canttradeormodify: rgb(210,0,0);
    --c_lockedtoaccount: rgb(136,136,255);
    --c_divination: rgb(14,186,255);
    --c_prophecy: rgb(181,75,255);
    --c_essencemod: rgb(164,210,255);
    --c_essencemodoutline: rgb(0,41,82);
    --c_premiumchat: rgb(253,242,126);
    --c_premiumchatoutline: rgb(209,46,46);
    --c_uniquefoil: rgb(130,173,106);
    --c_legacy: rgb(212,145,63);
    --c_bestiarymod: rgb(255,255,255);
    --c_bestiarymodoutline: rgb(219,34,0);
    --c_blightmod: rgb(255,255,255);
    --c_blightmodoutline: rgb(215,0,0);
    --c_afflictionmod: rgb(22,25,28);
    --c_afflictionmodoutline: rgb(151,164,181);
    --c_necropolisupside: rgb(255,204,27);
    --c_necropolisdownside: rgb(175,181,203);
    --c_necropolisoutline: rgb(0,0,0);
    --c_necropoliscraftbook: rgb(33,32,31);
    --c_stackitemlevel: rgb(255,255,255);
    --c_harvestprimary: rgb(100,111,73);
    --c_harvestsecondary: rgb(83,130,161);
    --c_craftingcaster: rgb(179,248,254);
    --c_craftingphysical: rgb(199,157,147);
    --c_craftingfire: rgb(255,154,119);
    --c_craftingcold: rgb(147,216,255);
    --c_craftinglightning: rgb(248,203,118);
    --c_craftingchaos: rgb(216,167,211);
    --c_craftingspeed: rgb(207,238,165);
    --c_craftingcrit: rgb(178,167,214);
    --c_craftingred: rgb(200,103,110);
    --c_craftingblue: rgb(162,207,251);
    --c_craftinggreen: rgb(134,189,163);
    --c_craftinglife: rgb(201,110,110);
    --c_craftingdefences: rgb(168,143,103);
    --c_craftingattack: rgb(218,129,77);
    --c_heist: rgb(25,30,25);
    --c_heiststolenitem: rgb(210,0,0);
    --c_atlasmaven: rgb(182,12,169);
    --c_ultimatumnumber: rgb(254,92,81);
    --c_incursionunreachable: rgb(90,90,90);
    --c_lockedinplaceitem: rgb(127,127,127);
    --c_craftaffectremove: rgb(254,153,0);
    --c_craftaffectwarning: rgb(235,200,80);
    --c_craftaffectreroll: rgb(254,153,0);
    --c_craftaffectpropertyremove: rgb(254,51,0);
    --c_skillpopuptitle: rgb(249,230,202);
    --c_disabledstats: rgb(150,150,167);
    --c_skillextrainfo: rgb(255,192,119);
    --c_fakeitemcount: rgb(200,200,200);
    --c_atlasunlocktext: rgb(175,108,25);
    --c_atlasskillstitle: rgb(110,132,149);
    --c_archnemesisitem: rgb(170,158,130);
    --c_mavenfightpopuptitle: rgb(0,143,206);
    --c_mavenfightpopupglow: rgb(30,30,94);
    --c_sentinelsnapshotwarning: rgb(200,103,110);
    --c_lakeofkalandrareachable: rgb(136,136,255);
    --c_lakeofkalandraunreachable: rgb(90,90,90);
    --c_harvestmonstertier1: rgb(127,127,127);
    --c_harvestmonstertier2: rgb(200,200,200);
    --c_harvestmonstertier3: rgb(184,218,242);
    --c_harvestmonstertier4: rgb(175,96,37);
    --c_sanctumboon: rgb(181,168,144);
    --c_sanctumcurse: rgb(160,109,202);
    --c_sanctumpact: rgb(171,139,173);
    --c_ancestralprimary: rgb(212,208,204);
    --c_ancestralsecondary: rgb(158,151,143);
    --c_ancestralblue: rgb(134,178,195);
    --c_azmerigreen: rgb(179,192,129);
    --c_descendancygrey: rgb(188,204,187);
    --c_kalguurblack: rgb(25,30,25);
    --c_kalguurgrey: rgb(65,65,65);
    --c_kalguurlightgrey: rgb(216,200,185);
    --c_kalguurred: rgb(99,0,0);
    --c_goldname: rgb(170,161,132);
    --c_goldvalue: rgb(188,162,83);
    --c_goldchanged: rgb(220,200,139);
    --c_brequelwarning: rgb(255,55,55);

    /*
    We might want some *elements* to go all the way to the edge (e.g. for
    hover effects), but the actual text content should be aligned at this
    distance from the page edge.
    */
    --page_content_margin: 1rem;
    --panel_content_margin: .65rem;
    --c_highlight: var(--c_craftingspeed);
    --c_border: var(--c_gray2);

    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: sans-serif;
    font-size: .9rem;

    margin: 0 auto;
    position: relative;
    width: var(--page_width);

    scrollbar-gutter: stable both-edges;

    color: var(--c_gray1);
    background-color: var(--c_gray4);
}

table {
    border-collapse: collapse;
}

a {
    color: inherit;
    text-decoration: none
}
a:hover   {
    text-decoration: underline;
}
/*
a:link    { text-decoration: none; color: var(--c_border); }
a:hover   { color: #000000 !important; }
a:visited { color: #999999; }
a:active  { color: #999999; }
*/

.topbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: var(--page_content_margin);
    padding-right: var(--page_content_margin);
    border-top: 2px solid var(--c_gray3);
    border-bottom: 2px solid var(--c_gray3);

    background-color: var(--c_gray5);

    .title {
        margin: 0;
        margin-right: 2rem;
        padding: 0;
    }

    .route {
        display: flex;
        align-items: stretch;

        font-weight: bold;

        & > * {
            padding: 1rem;
        }

        &:hover {
            background-color: var(--c_gray3);
        }

        &.selected {
            color: var(--c_highlight);
            box-shadow: 0 -2px 0 0 var(--c_highlight) inset;
        }
    }
}

.subtitle {
    display: flex;
    align-items: baseline;
    gap: 2rem;

    padding-left: var(--page_content_margin);
    padding-right: var(--page_content_margin);
    border-top: 1px solid var(--c_border);
    border-bottom: 1px solid var(--c_border);

    h2 {
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

    .help {
        color: var(--c_highlight);
    }
}

.frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.frame_container {
    flex: 1;
}

footer {
    align-self: center;
    padding: var(--page_content_margin); 

    a {
        color: var(--c_highlight);
    }

    .footer_links {
    }

    .disclaimer {
        padding-top: .35rem;
    }
}