:root {
    color-scheme: light dark;
    --background: light-dark(#e6e0e1, #180b20);
    --foreground: light-dark(#302339, #ddd5d7);
    --accent: #df5671;
    --background-hc: black;
    --foreground-hc: white;
    --accent-hc: white;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-size: 1.1em;
    line-height: 1.5;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
}

.topbar {
    padding-top: 5pt;
    padding-bottom: 5pt;
    margin-bottom: 1.5em;
    font-size: 15pt;
    display: flex;
    justify-content: space-between;
}

a {
    color: var(--foreground);
    text-decoration-thickness: 0.5px;
}

.topbar a, .webring a {
    text-decoration: none;
}

.topbar a:has(svg),
.topbar button:has(svg) {
    padding: 3pt;
    margin: 2pt;
}

.topbar button {
    background: none;
    color: var(--foreground);
    border: none;
    cursor: pointer;
}

h2 span {
    border-bottom: 1px solid var(--accent);
}

:is(h1, h2, h3, h4, h5, h6) .hash-link {
    color: var(--foreground);
    margin-left: 5pt;
    text-decoration: none;
    opacity: 0%;
}

:is(h1, h2, h3, h4, h5, h6):hover .hash-link {
    opacity: 30%;
}

:is(h1, h2, h3, h4, h5, h6):hover .hash-link:hover {
    opacity: 50%;
}

#theme {
    display: inline-grid;
}

#theme span {
    grid-column: 1;
    grid-row: 1;
}

#high-contrast svg {
    rotate: 180deg;
}

.content {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

div.sourceCode:has(pre) {
    padding: 12pt;
    padding-right: 0;
    border-radius: 4pt;
    border: 1px solid var(--accent);
}

.webring {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 5vh;
    left: 0;
    width: 100%;
}

.webring span * {
    padding-top: 1em;
    padding-bottom: 1em;
}

.webring span .prev {
    padding-right: 0.5em;
    padding-left: 2em;
}

.webring span .next {
    padding-left: 0.5em;
    padding-right: 2em;
}

li p {
    margin: 0;
}

li ul {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Copied from Pandoc's default code block styling */

pre {
    line-height: 1.25;
}
pre > code.sourceCode {
    white-space: pre;
    position: relative;
}
pre > code.sourceCode > span:empty {
    height: 1.2em;
}
.sourceCode {
    overflow: visible;
}
code.sourceCode > span {
    color: inherit;
    text-decoration: inherit;
}
div.sourceCode {
    margin: 1em 0;
}
pre.sourceCode {
    margin: 0;
}
@media screen {
    div.sourceCode {
        overflow: auto;
    }
}
@media print {
    pre > code.sourceCode {
        white-space: pre-wrap;
    }
    pre > code.sourceCode > span {
        display: inline-block;
        text-indent: -5em;
        padding-left: 5em;
    }
}
pre.numberSource code {
    counter-reset: source-line 0;
}
pre.numberSource code > span {
    position: relative;
    left: -4em;
    counter-increment: source-line;
}
pre.numberSource code > span > a:first-child::before {
    content: counter(source-line);
    position: relative;
    left: -1em;
    text-align: right;
    vertical-align: baseline;
    border: none;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 4em;
}
pre.numberSource {
    margin-left: 3em;
    padding-left: 4px;
}
div.sourceCode {
    color: var(--code-fg);
}
@media screen {
    pre > code.sourceCode > span > a:first-child::before {
        text-decoration: underline;
    }
}

/*
Code colors
Dark: https://github.com/helix-editor/helix/blob/0c8d51ee3620470c99863371518f03d5b85351d8/runtime/themes/ayu_dark.toml
Light: https://github.com/helix-editor/helix/blob/0c8d51ee3620470c99863371518f03d5b85351d8/runtime/themes/ayu_light.toml
High Contrast: https://github.com/helix-editor/helix/blob/0c8d51ee3620470c99863371518f03d5b85351d8/runtime/themes/dark_high_contrast.toml
*/
:root {
    --code-fg: light-dark(#5c6166, #b3b1ad);
    --blue: light-dark(#399ee6, #59c2ff);
    --gray: light-dark(#828c9a, #5c6773);
    --green: light-dark(#86b300, #aad94c);
    --magenta: light-dark(#a37acc, #d2a6ff);
    --orange: light-dark(#fa8d3e, #ff8f40);
    --red: light-dark(#f07171, #f07178);
    --yellow: light-dark(#ffaa33, #e6b450);

    --code-fg-hc: white;
    --blue-hc: #66a4ff;
    --gray-hc: #585858;
    --green-hc: #4ec9b0;
    --magenta-hc: #c586c0;
    --orange-hc: #f38518;
    --red-hc: #b65f5f;
    --yellow-hc: #cedc84;
}

code span {
    color: var(--code-fg);
} /* Normal */
code span.al {
    color: var(--code-fg);
    background-color: var(--red);
    font-weight: bold;
} /* Alert */
code span.an {
    color: var(--orange);
} /* Annotation */
code span.at {
    color: var(--blue);
} /* Attribute */
code span.bn {
    color: var(--magenta);
} /* BaseN */
code span.bu {
    color: var(--blue);
} /* BuiltIn */
code span.cf {
    color: var(--yellow);
    font-weight: bold;
} /* ControlFlow */
code span.ch {
    color: var(--magenta);
} /* Char */
code span.cn {
    color: var(--magenta);
} /* Constant */
code span.co {
    color: var(--gray);
    font-style: italic;
} /* Comment */
code span.cv {
    color: var(--blue);
} /* CommentVar */
code span.do {
    color: var(--gray);
} /* Documentation */
code span.dt {
    color: var(--blue);
} /* DataType */
code span.dv {
    color: var(--orange);
} /* DecVal */
code span.er {
    color: var(--red);
    text-decoration: underline;
} /* Error */
code span.ex {
    color: var(--blue);
    font-weight: bold;
} /* Extension */
code span.fl {
    color: var(--magenta);
} /* Float */
code span.fu {
    color: var(--yellow);
} /* Function */
code span.im {
    color: var(--yellow);
} /* Import */
code span.in {
    color: var(--gray);
} /* Information */
code span.kw {
    color: var(--orange);
    font-weight: bold;
} /* Keyword */
code span.op {
    color: var(--orange);
} /* Operator */
code span.ot {
    color: var(--code-fg);
} /* Other */
code span.pp {
    color: var(--yellow);
} /* Preprocessor */
code span.re {
    color: var(--blue);
} /* RegionMarker */
code span.sc {
    color: var(--magenta);
} /* SpecialChar */
code span.ss {
    color: var(--yellow);
} /* SpecialString */
code span.st {
    color: var(--green);
} /* String */
code span.va {
    color: var(--code-fg);
} /* Variable */
code span.vs {
    color: var(--green);
} /* VerbatimString */
code span.wa {
    color: var(--yellow);
} /* Warning */