:root {
    --main-back: light-dark(#fff, #111);
    --main-fore: light-dark(#333, #eee);

    --link-text: light-dark(#544, #cbb);
    --link-deco-norm: light-dark(#bcd, #567);
    --link-deco-vstd: light-dark(#cbd, #657);

    --tone-back: light-dark(#fdf8f4, #2a2420);
    --tone-fore: light-dark(#877, #baa);
    --tone-line: light-dark(#cba, #655);
    --tone-flip: light-dark(var(--tone-fore), var(--tone-line));

    --border-width: 0.1rem;
}

html,
pre,
code {
    font-family: Figtree, sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.5em;
}

body {
    background-color: var(--main-back);
    color: var(--main-fore);
    margin: 1rem auto;
    max-width: 600px;
    padding: 0 1rem;

    a {
        color: var(--link-text);
        text-decoration: underline;
        text-underline-offset: var(--border-width);

        &:link {
            text-decoration-color: var(--link-deco-norm);
        }

        &:visited {
            text-decoration-color: var(--link-deco-vstd);
        }

        &:hover {
            text-decoration-color: currentColor;
        }
    }

    ol,
    ul {
        line-height: 1.8rem;
        padding-inline-start: 1rem;
    }
}

header {
    text-align: center;

    h1 {
        font-weight: 900;
        margin: 0;
    }

    nav ul {
        column-gap: calc(var(--border-width) * 2);
        display: flex;
        justify-content: space-between;
        line-height: 2rem;
        list-style-type: none;
        padding-left: 0;

        a {
            display: block;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        li {
            background-color: var(--tone-back);
            border: var(--border-width) solid var(--tone-line);
            flex: 1;

            &:first-child {
                border-left-width: calc(4 * var(--border-width));
            }

            &:last-child {
                border-right-width: calc(4 * var(--border-width));
            }
        }
    }
}

main {
    article {
        text-align: justify;
        margin-bottom: 2rem;
    }

    hgroup {
        color: var(--tone-fore);

        span:last-child::before {
            content: " · ";
        }
    }

    pre {
        background-color: var(--tone-back);
        border: var(--border-width) solid var(--tone-line);
        border-left-width: calc(4 * var(--border-width));
        border-right-width: calc(4 * var(--border-width));
        line-height: 1.8rem;
        padding: 1rem;
    }

    ul span {
        color: var(--tone-fore);
        float: right;
    }
}

footer {
    color: var(--tone-fore);
    text-align: center;
}
/* figtree-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/figtree-v8-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Figtree";
    font-style: italic;
    font-weight: 400;
    src: url("/fonts/figtree-v8-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Figtree";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/figtree-v8-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Figtree";
    font-style: normal;
    font-weight: 900;
    src: url("/fonts/figtree-v8-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@media screen and (max-width: 450px) {
    .desktop {
        display: none;
    }

    html,
    pre code {
        font-size: 16px;
    }

    header nav ul {
        background-color: var(--tone-back);
        border: var(--border-width) solid var(--tone-line);
        border-left-width: calc(4 * var(--border-width));
        border-right-width: calc(4 * var(--border-width));

        li {
            background-color: inherit;
            border: none;
        }
    }
}

@media screen and (max-width: 600px) {
    .desktop {
        display: none;
    }
}

@media screen and (min-width: 601px) {
    .mobile {
        display: none;
    }
}

@media print {
    * {
        background-color: transparent !important;
        border-color: #ccc !important;
        color: #000 !important;
        text-decoration-color: #ccc !important;
    }

    .mobile {
        display: none;
    }
}