:root {
    --title-color: #fff;
    --title-font: Podkova, Iosevka Etoile Iaso, serif;
    --menu-font: Iosevka Aile Iaso, Inter;
    --font: Schibsted Grotesk, Iosevka Aile Iaso, sans-serif;
    --fg-color: rgb(209, 213, 220);
    --bg-color: #1d2021;
    --em-color: #ffbb00;
    --link-color: #fff;
    --link-hover-color: rgb(179 0 77);
    --link-visited-color: rgb(193 183 169);
    /* --link-visited-hover-color: rgb(253 244 193); */
    --link-visited-hover-color: var(--fg-color);
    --box-color: #21ff00;
    --table-color1: #000;
    --table-color2: #222;
    color-scheme: dark;
}

:root :has(#lightmode:checked) {
    --title-color: #000;
    --fg-color: #000;
    --bg-color: #fff;
    --em-color: #f00;
    --link-color: #000;
    --link-hover-color: rgb(253 244 193);
    --link-visited-color: rgb(179 0 77);
    --link-visited-hover-color: var(--fg-color);
    --box-color: #000;
    --table-color1: #fff;
    --table-color2: #ccc;
    color-scheme: light;
}

html {
    line-height: 1.75;
    font-size: 1rem;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

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

main, footer {
    max-width: 80ch;
    margin: auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--title-color);
    font-family: var(--title-font);
}

img {
    margin: auto;
    width: 125px;
}

nav {
    display: flex;
    font-family: var(--menu-font);
    letter-spacing: -0.025em;
}

fieldset {
    border: none;
    width: 100%;
}

theme-picker {
    display: flex;
    color: gray;
    input {
        opacity: 0;
        position: absolute;
        pointer-events: none;
    }
    label {
        cursor: pointer;
        &:not(:has(input:checked)) {
            filter: grayscale(100%);
        }
        &:hover {
            color: var(--em-color);
        }
        user-select: none;
    }
}

@media (min-width: 67em) {
    nav {
        display: block;
        position: fixed;
        transform: translate(-130%, 0%);
        text-align: right;
    }
    fieldset {
        border-right: gray 1px solid;
        width: inherit;
    }
    theme-picker {
        justify-content: flex-end;
    }
}

footer {
    text-align: right;
}

a {
    color: var(--link-color);
    font-weight: 500;
}

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

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

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

#timestamp {
    font-size: small;
}