@font-face {
    font-family: "CMU Typewriter Text Variable Width";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: local("CMU Typewriter Text Variable Width"),
         local("Latin Modern Mono Prop"),
         url("/cmunvt.woff2") format("woff2");
}

body {
    line-height: 1.4;
    --fg: black;
    --bg2: transparent;
}

@media screen {
    body {
        --fg: #111;
        --bg2: #eee;
        color: var(--fg);
        /* Make the text no wider than 50em, but leave no less than 2em margins. */
        max-width: 50em;
        margin-left: auto;
        margin-right: auto;
        /* smh my head I have to disable this */
        /* text-align: justify; */
    }
    html {
        margin: 0;
        padding: 0 2em;
    }
    .long {
        max-height: min(30em, 100vh);
        overflow: scroll;
    }
}

sup, sub {
    line-height: 0;
}

h1, h2 { font-family: CMU Typewriter Text Variable Width; }
h2, h3 { font-weight: normal; }
h3 { font-style: italic; }

h1, h2, h3 {
    text-align: left;
    margin-block: 0.3em;
}

blockquote {
    margin-block: 0;
    margin-inline: 0;
    border-left: 2pt #111 solid;
    padding-left: 20pt;
    padding-right: 20pt;
}

.footpara {
    display: inline;
}

.org-src-container {
    background-color: #333;
    color: white;
    padding: 8pt;
    margin: 8pt;
}

label {
    display: block;
    font-style: italic;
    text-align: center;
}

@media(prefers-color-scheme: dark) {
    body {
        --fg: #eee;
        --bg2: #222;
        background: #111;
    }
    .long { border: 1pt solid #eee; }
    a { color: #66f; }
    a:visited { color: #f9f; }
}


.org-comment, .org-comment-delimiter { colour: #ccc; font-style: italic; }
.org-function-name { text-decoration: underline; color: #ce8; }
.org-variable-name { color: #ce8; }
.org-keyword { color: #8af; }
.org-type { color: #9a6; }
.org-doc { font-style: italic; }

.subtitle {
    font-weight: bold;
    margin-top: -0.5em;
    margin-left: 2em;
}

.long {
    padding: 8pt;
    border: 1pt solid var(--fg);
    background: var(--bg2);
}

#footnotes {
    border-top: 1pt solid var(--fg);
    padding-top: 3pt;
}
h2.footnotes {
    display: none;
}