* {
    font-synthesis: none;
}

@font-face {
    font-family: "MDIO";
    src: url("/_/fonts/MDIO-VF.woff2");
    font-feature-settings: "zero" 1;
}

@font-face {
    font-family: "MDUI";
    src: url("/_/fonts/MDUI-VF.woff2");
    font-feature-settings: "ss02" 1;
}

@font-face {
    font-family: "PPFraktur";
    src: url("/_/fonts/PragmataProFraktur.woff2");
    font-weight: 400;
    font-style: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: "MDSystem";
    src: url("/_/fonts/MDSystem-Regular.woff2");
    font-weight: 400;
    font-style: normal;
    font-feature-settings: "ss03" 1;
}
@font-face {
    font-family: "MDSystem";
    src: url("/_/fonts/MDSystem-Italic.woff2");
    font-weight: 400;
    font-style: italic;
    font-feature-settings: "ss03" 1;
}

@font-face {
    font-family: "MDSystem";
    src: url("/_/fonts/MDSystem-Bold.woff2");
    font-weight: 700;
    font-style: normal;
    font-feature-settings: "ss03" 1;
}

@font-face {
    font-family: "MDSystem";
    src: url("/_/fonts/MDSystem-BoldItalic.woff2");
    font-weight: 700;
    font-style: italic;
    font-feature-settings: "ss03" 1;
}

:root {
    --fonts-monospace: "MDIO", monospace;
    --fonts-ui: "MDUI", sans-serif;
    --fonts-body: "MDSystem", "MDUI", sans-serif;
    --fonts-serif: "PPFraktur", serif;
    --colour-white: #f6f6f6;
    --colour-black: #111111;

    --colour-background: var(--colour-black);
    --colour-text: var(--colour-white);
    --colour-blocks: #252525;

    --colour-pink: #f0167d;
}

@media (prefers-color-scheme: light) {
    :root {
        --colour-black: #222222;

        --colour-background: var(--colour-white);
        --colour-text: var(--colour-black);
        --colour-blocks: #dddddd;
    }
    .light-modable {
        filter: invert() hue-rotate(180deg);
    }
}

html {
    font-size: 11pt;
    line-height: 1.4;
}

body {
    margin: 0;

    font-family: var(--fonts-ui);

    background-color: black;
    background-color: var(--colour-background);

    color: white;
    color: var(--colour-text);
}

body ::selection {
    background-color: white;
    color: black;
    background-color: var(--colour-text);
    color: var(--colour-background);
}

footer ::selection {
    background-color: var(--colour-background);
    color: var(--colour-text);
}

main,
footer,
body > h1 {
    padding-left: 1rem;
    padding-right: 1rem;
}

main > :first-child {
    margin-top: 0;
    padding-top: 4rem;
}

main > :last-child {
    padding-bottom: 3rem;
}

main > *,
footer > * {
    max-width: 500px;
}

pre {
    max-width: unset;
    overflow-x: scroll;
    background-color: grey;
    background-color: var(--colour-blocks);
}

pre {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 1rem;
}

footer {
    padding-top: 3em;
    padding-bottom: 3em;
    border-top: 1pt solid grey;
    background: var(--colour-text);
    color: var(--colour-background);
}

footer .title {
    font-weight: bold;
    margin-bottom: 1em;
}
footer p:has(+ p) {
    margin-bottom: 1em;
}

h1 {
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
    text-wrap: balance;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 350;
    text-wrap: balance;
}

#header {
    padding-top: 2rem;
    height: 4rem;
    align-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

#header a {
    text-decoration: none;
}

* + h2 {
    margin-top: 3rem;
}

main img {
    max-width: 100%;
}

img.fit {
    width: 100%;
}

a {
    color: unset;
    text-decoration: underline;
    text-underline-offset: 0.125em;
    text-decoration-thickness: 1px;
}

h1 a,
h2 a,
h3 a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--colour-pink);
}

code {
    font-family: var(--fonts-monospace);
}

:not(pre) > code {
    font-size: 90%;
}

ul {
    padding-left: 0;
    position: relative;
}

ul li {
    list-style: none;
    margin-left: 1.5rem;
}

ul li::before {
    content: "\2022";
    position: absolute;
    /*left: 0;*/
    float: left;
    margin-left: -1.5rem;
}

ol {
    padding-left: 0;
}

ol > li {
    list-style: inside decimal;
    margin-left: 1.5rem;
}

ol li::before {
    margin-left: -1.5rem;
    float: left;
}

li > ol,
ol > li > ul {
    margin-left: 0.75rem;
}

/* TODO */
#footnotes p {
    display: inline;
}

#footnotes {
    display: grid;
    grid-template-columns: subgrid;
}

#footnotes li {
    margin-bottom: 1rem;
}

#footnotes .linkback a {
    text-decoration: none;
}

#footnotes .linkback a::before {
    content: counter(customlistcounter) ".";
    color: var(--colour-pink);
    margin-left: -1.5rem;
}
#footnotes .linkback-text {
    display: none;
}

@supports (counter-increment: customlistcounter) {
    ol li::before {
        font-feature-settings: "ss03" 1;
        content: counter(customlistcounter);
    }
    #footnotes ol li::before {
        font-feature-settings: "ss03" 0;
        content: counter(customlistcounter) ".";
        display: none;
    }

    ol > li {
        list-style: none;
        counter-increment: customlistcounter;
    }

    ol:first-child {
        counter-reset: customlistcounter;
    }
}

table {
    border-spacing: 0;
    width: 100%;
}

th {
    text-align: left;
    border-bottom: 1pt solid var(--colour-text);
}

th,
td {
    padding: 0.125em;
}

tbody tr:hover {
    background-color: var(--colour-blocks);
}

abbr {
    text-decoration: none;
}

hr {
    border: none;
    outline: 0.5pt solid var(--colour-text);
}

.ascii {
    white-space: pre;
}

@supports (display: grid) {
    * {
        margin: 0;
        grid-column: 1 / span 3;
    }

    #header,
    main,
    footer {
        display: grid;
        row-gap: 1rem;
        column-gap: 2rem;
    }

    @media (min-width: 450px) {
        main {
            grid-template-columns: repeat(4, 1fr);
        }

        #header > *,
        main > *,
        footer > * {
            grid-column: 1 / -1;
        }
    }
    @media (min-width: 1440px) {
        #header,
        main,
        footer {
            grid-template-columns: repeat(6, 1fr);
        }
        #header > *,
        main > *,
        footer > * {
            grid-column: 2 / span 3;
        }
        pre {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            overflow: visible;
        }
        pre code {
            grid-column: 2 / span 3;
        }
    }
}

@media (min-width: 450px) {
    #header,
    main,
    footer,
    body > h1 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    pre {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding: 1.5rem;
    }
}

@media (max-width: 415px) and (orientation: portrait) and (pointer: coarse) {
    html {
        font-size: 12pt;
    }
}