@font-face {
    font-family: "FreeMono";

    src:
        local("FreeMono"),
        url("FreeMono.woff") format("woff");
}

@font-face {
    font-family: "FreeMono";
    font-weight: bold;

    src:
        local("FreeMono Bold"),
        url("FreeMonoBold.woff") format("woff");
}

@font-face {
    font-family: "FreeMono";
    font-style: oblique;

    src:
        local("FreeMono Oblique"),
        url("FreeMonoOblique.woff") format("woff");
}

@font-face {
    font-family: "FreeMono";
    font-weight: bold;
    font-style: oblique;

    src:
        local("FreeMono Bold Oblique"),
        url("FreeMonoBoldOblique.woff") format("woff");
}

:root {
    --color-bg: oklch(10% 0.01 25);
    --color-text: oklch(95% 0.01 25);
    --color-text-link: oklch(95% 0.35 25);
    --color-text-link-visited: oklch(95% 0.15 25);
}

body {
    font-family: "FreeMono";

    counter-reset: figure;
    counter-reset: footnote-ref;
}

@media screen {
    body {
        background-color: var(--color-bg);
        color: var(--color-text);

        max-width: 800px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        padding: 24px;
    }

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

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

@media print {
    main [role="complementary"],
    main figure,
    .footnotes {
        break-inside: avoid;
    }
}

h1, h2, h3,
h4, h5, h6 {
    margin-top: 4px;
    margin-bottom: 4px;
}

ol, ul {
    text-align: justify;

    & li {
        margin-top: 0;
        margin-bottom: 0;
        &:not(:first-child) { margin-top: 0.5em; }
        &:not(:last-child)  { margin-bottom: 0.5em; }
    }
}

main > * {
    margin-top: 0;
    margin-bottom: 0;
    &:not(:first-child) { margin-top: 1em; }
    &:not(:last-child)  { margin-bottom: 1em; }
}

a.footnote {
    font-size: 0.75em;
    vertical-align: super;

    &::before {
        counter-increment: footnote-ref;
        content: "[" counter(footnote-ref) "]";
    }
}

header {
    margin-top: 24px;
    margin-bottom: 24px;
}

header p {
    margin-top: 4px;
    margin-bottom: 4px;
}

main p {
    column-width: 20em;
    text-align: justify;
    gap: 1.5em;
}

main [role="complementary"],
main figure {
    margin-left: auto;
    margin-right: auto;
}

main [role="complementary"] {
    max-width: 500px;
    text-align: justify;
}

main figure {
    max-width: 400px;

    & img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 8px;
        width: 100%;
        image-rendering: pixelated;
    }

    & figcaption {
        text-align: center;
        font-style: oblique;

        &::before {
            counter-increment: figure;
            content: "Fig." counter(figure) " - ";
        }
    }
}

footer {
    margin-top: 2em;
}