@media (prefers-color-scheme: light) {
    :root {
        --body-fg-color: #242521;
        --body-bg-color: #fcf7ef;
        --hl-fg-color: #142010;
        --hl-bg-color: #c0df6f;
        
        --al-fg-color: #a7601f;
        --av-fg-color: #00824f;
        --ah-bg-color: #efc26f;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-fg-color: #cfdfd5;
        --body-bg-color: #111111;
        --hl-fg-color: #d0ffe0;
        --hl-bg-color: #00552f;

        --al-fg-color: #00c089;
        --av-fg-color: #37aff6;
        --ah-bg-color: #4f3f9a;
    }
}

body {
    background-color: var(--body-bg-color);
    color: var(--body-fg-color);
    font-family: sans-serif;
}

header, section {
    margin: 5vh 7vh auto;
    max-width: 1000px;
}

hr {
    color: var(--hl-bg-color));
}

 footer {
     font-size: 12px;
     margin: auto 5vh;
 }

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

 a:visited {
     color: var(--av-fg-color);
 }

 a:hover, a:active {
     color: var(--body-fg-color);
     background-color: var(--ah-bg-color);
 }