:root {
    --serif: 'EB Garamond', serif;
    --sansserif: 'Lato', sans-serif;
    --display: 'EB Garamond', serif;
    --fontawesome: 'Font Awesome 6 Pro';
    --color: black;
    --color-dim: #767676;
    --backgroundL0: white;
    --backgroundL1: white;
    --backgroundL2: white;
    --backgroundL3: white;
    --backgroundL4: white;
    --backgroundL5: white;
    --backgroundL6: white;
    --backgroundL7: white;
    --backgroundL8: white;
    --backgroundL9: white;
    --backgroundL10: white;
    --borderL0: #DDDDDD;
    --borderL1: #DDDDDD;
    --borderL2: #DDDDDD;
    --borderL3: #DDDDDD;
    --borderL4: #DDDDDD;
    --borderL5: #DDDDDD;
    --borderL6: #DDDDDD;
    --borderL7: #DDDDDD;
    --borderL8: #DDDDDD;
    --borderL9: #DDDDDD;
    --borderL10: #DDDDDD;
    --primaryL0: #acc4e3;
    --primaryL1: #a3bde0;
    --primaryL2: #99b6dd;
    --primaryL3: #8eaed9;
    --primaryL4: #81a5d5;
    --primaryL5: #739BD0;
    --primaryL6: #5b8ac8;
    --primaryL7: #457ac1;
    --primaryL8: #3b6db1;
    --primaryL9: #35629f;
    --primaryL10: #30588f;
    --secondaryL10: #564915;
    --secondaryL9: #675719;
    --secondaryL8: #78661D;
    --secondaryL7: #8A7422;
    --secondaryL6: #9B8326;
    --secondaryL5: #AC912A;
    --secondaryL4: #B49C3F;
    --secondaryL3: #BDA755;
    --secondaryL2: #C5B26A;
    --secondaryL1: #CDBD7F;
    --secondaryL0: #D6C895;
    --tertiary: #AC2A2A;
    --selection: #B7BBC0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: white;
        --color-dim: #767676;
        --backgroundL0: #090909;
        --backgroundL1: #0B0B0B;
        --backgroundL2: #0D0D0D;
        --backgroundL3: #0E0E0E;
        --backgroundL4: #101010;
        --backgroundL5: #121212;
        --backgroundL6: #1E1E1E;
        --backgroundL7: #272727;
        --backgroundL8: #2E2E2E;
        --backgroundL9: #383838;
        --backgroundL10: #414141;
        --borderL0: #090909;
        --borderL1: #0B0B0B;
        --borderL2: #0D0D0D;
        --borderL3: #0E0E0E;
        --borderL4: #101010;
        --borderL5: #121212;
        --borderL6: #1E1E1E;
        --borderL7: #272727;
        --borderL8: #2E2E2E;
        --borderL9: #383838;
        --borderL10: #414141;
        --primaryL0: #618eca;
        --primaryL1: #5081c4;
        --primaryL2: #3f73bc;
        --primaryL3: #3866a7;
        --primaryL4: #30578f;
        --primaryL5: #274774;
        --primaryL6: #234068;
        --primaryL7: #1f3a5e;
        --primaryL8: #1c3455;
        --primaryL9: #192f4c;
        --primaryL10: #162a44;
        --secondaryL0: #564915;
        --secondaryL1: #675719;
        --secondaryL2: #78661D;
        --secondaryL3: #8A7422;
        --secondaryL4: #9B8326;
        --secondaryL5: #AC912A;
        --secondaryL6: #B49C3F;
        --secondaryL7: #BDA755;
        --secondaryL8: #C5B26A;
        --secondaryL9: #CDBD7F;
        --secondaryL10: #D6C895;
        --tertiary: #AC2A2A;
        --selection: #3E4958;
    }

    /*img {
        filter: brightness(70%);
    }*/
}

header,
footer {
    --background: var(--primaryL5);
    --link: var(--secondaryL8);
    --border: white;
    --background-hover: #EEEEEE;
    --border-hover: white;
    --color: #666666;
}

.navigation-bar {
    --background: var(--primaryL5);
    --background-hover: var(--primaryL8);
}

nav > ul > li > ul {
    --background: var(--primaryL6);
}

@media (prefers-color-scheme: light) {
    .navigation-bar .bttn-link,
    .navigation-bar a {
        --link: white;
    }
}

@media screen and (max-width: 899px) {
    nav {
        --background: var(--primaryL6);
        --border: var(--primaryL8);
    }
}

body, main {
    --background: var(--backgroundL5);
    --border: var(--borderL6);
    --background-hover: var(--backgroundL6);
    --border-hover: var(--borderL7);
    --link: var(--secondaryL9);
    --corner-radius: 0px;
}

@media (prefers-color-scheme: dark) {
    header,
    footer {
        --link: var(--secondaryL5);
        --border: var(--primaryL6);
        --background-hover: var(--primaryL8);
        --border-hover: white;
        --color: #AAAAAA;
    }

    body, main {
        --background: var(--backgroundL5);
        --parent-background: var(--backgroundL5);
        --border: var(--borderL6);
    }

    main * {
        --background: var(--backgroundL5);
        --parent-background: var(--backgroundL5);
        --border: var(--borderL6);
        --background-hover: var(--backgroundL6);
        --border-hover: var(--borderL7);
        --link: var(--secondaryL5);
    }

    main .panel {
        --background: var(--backgroundL6);
        --parent-background: var(--backgroundL5);
        --border: var(--borderL7);
        --background-hover: var(--backgroundL7);
        --border-hover: var(--borderL8);
        --link: var(--secondaryL6);
    }

    main .panel .panel,
    main .panel *,
    #CountyAlertPopup {
        --background: var(--backgroundL7);
        --parent-background: var(--backgroundL6);
        --border: var(--borderL8);
        --background-hover: var(--backgroundL8);
        --border-hover: var(--borderL9);
        --link: var(--secondaryL7);
    }

    main .panel .panel .panel,
    main .panel .panel * {
        --background: var(--backgroundL8);
        --parent-background: var(--backgroundL7);
        --border: var(--borderL9);
        --background-hover: var(--backgroundL9);
        --border-hover: var(--borderL10);
        --link: var(--secondaryL8);
    }
}

/***********************************************************************/
/*************************** %section_headers% *************************/
/***********************************************************************/

h2 {
    --header-background: var(--primaryL5);
}

h3 {
    --header-background: var(--primaryL6);
}

h4 {
    --header-background: transparent;
}

/***********************************************************************/
/******************************** %links% ******************************/
/***********************************************************************/

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

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

a:visited {
    --link-color: var(--link);
}

a:focus {
    outline: 1px solid #8C593C;
}

a:hover {
}

a:active {
    --link-color: white;
}

/***********************************************************************/
/******************************* %tables% ******************************/
/***********************************************************************/

table {
    --shading: #DDDDDD;
}

@media (prefers-color-scheme: dark) {
    table {
        --shading: #222222;
    }
}

/***********************************************************************/
/******************************* %% *****************************/
/***********************************************************************/

@media (prefers-color-scheme: light) {
    .sidebar .header {
        --background: var(--primaryL5);
        --color: white;
    }
}

/***********************************************************************/
/******************************* %% *****************************/
/***********************************************************************/

.bttn-primary,
.bttn-primary + .bttn.bttn-close {
    --bttn-border: transparent;
    --bttn-background-hover: var(--tertiary);
    --bttn-border-hover: transparent;
}

@media (prefers-color-scheme: light) {
    .bttn-primary,
    .bttn-primary + .bttn.bttn-close {
        --bttn-background: var(--primaryL9);
        --bttn-color: white;
    }

    .bttn-ghost {
        --bttn-color: var(--secondaryL9);
    }
}

@media (prefers-color-scheme: dark) {
    .bttn-primary,
    .bttn-primary + .bttn.bttn-close {
        --bttn-background: var(--primaryL5);
        --bttn-color: var(--secondaryL5);
    }
}

/***********************************************************************/
/******************************* %% *****************************/
/***********************************************************************/

#CountyAlertHolder {
    --background: #F9C2C4;
    --color: black;
    --link: var(--secondaryL10);
}

@media (prefers-color-scheme: dark) {
    #CountyAlertHolder {
        --background: #F9ACAE;
        --color: black;
        --link: var(--secondaryL0);
    }
}