:root {
    font-family: "Libertinus Serif", serif;
    line-height: 1.3em;
}

@media (prefers-color-scheme: light) {
    :root {
        --fg: black;
        --bg: white;
    }

    [aria-label="note"] {
        --fg: mediumblue;
    }

    [aria-label="warn"] {
        --fg: brown;
    }

    [aria-label="tip"] {
        --fg: forestgreen;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg: rgb(240 240 240);
        --bg: rgb(30 30 30);
    }

    [aria-label="note"] {
        --fg: cyan;
    }

    [aria-label="warn"] {
        --fg: coral;
    }

    [aria-label="tip"] {
        --fg: springgreen;
    }
}

nav, h1, h2, h3, h4, h5, h6 {
    font-family: "Mojangles", "monospace";
}

math {
    font-family: "Libertinus Math", math;
}

code {
    font-family: "Libertinus Mono", monospace;
}

nav a {
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

a {
    color: var(--fg);
}

nav ul {
    list-style-type: none;
    padding-inline: 2ch;
}

nav > ul {
    padding-inline: 0;
}

nav summary {
    display: block;
}

nav details summary:hover::after {
    content: "⮞";
    float: right;
}

nav details[open] summary::after {
    content: "⮟";
    float: right;
}

html {
    display: flex;
    justify-content: center;
    min-height: 100%;
    min-width: 100%;
}

body {
    display: grid;
    grid-template-columns: 20ch 80ch 20ch;
    grid-template-rows: auto auto 1fr auto;
    grid-gap: 4ch;
    width: auto;
    min-height: 100%;
    margin-inline: auto;
}

body > a[href="#main"] {
    position: absolute;
    top: 0;
    left: 0;
}

body > a[href="#main"]:not(:focus) {
    transform: translateY(-2em);
}

body > header {
    grid-column: 1 / 3;
    grid-row: 1;
}

nav[aria-label="Table of Contents"] {
    grid-column: 1;
    grid-row: 2;
}

nav[aria-label="Outline"] {
    grid-column: 3;
    grid-row: 2;
}

nav[aria-label="Outline"]:before {
    content: "On this Page";
    display: block;
    margin-block: 1em;
}

nav[aria-label="Page Navigation"] > ul {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4pt;
}

nav[aria-label="Page Navigation"] > ul > li > a {
    display: block;
    text-align: center;
    padding: 1em;

    background: rgb(from var(--fg) r g b / 15%);
    border: 1pt solid rgb(from var(--fg) r g b / 50%);
    border-radius: 3pt;
}

li[aria-label="Next Page"] {
    grid-column: 2;
}

li[aria-label="Prev Page"] {
    grid-column: 1;
}

li[aria-label="Next Page"] > a:after {
    content: "Next Page";
    display: block;
    font-size: small;
}

li[aria-label="Prev Page"] > a:after {
    content: "Previous Page";
    display: block;
    font-size: small;
}

body > main {
    grid-column: 2;
    grid-row: 2;
}

body > footer {
    grid-column: 1 / 4;
    grid-row: 4;
}

aside {
    border-block: 1pt solid rgba(from var(--fg) r g b / 50%);
    background: rgba(from var(--fg) r g b / 15%);
    color: var(--fg);
    margin-block: 1em;
    padding-block: 1ch;
    padding-inline: 1em;
    margin-inline: -1em;
}

aside[aria-label="note"]:before {
    content: "Note:";
    margin-inline-end: 1ch;
    font-family: "Mojangles", monospace;
}

aside[aria-label="warn"]:before {
    content: "Caution:";
    margin-inline-end: 1ch;
    font-family: "Mojangles", monospace;
}

aside[aria-label="tip"]:before {
    content: "Tip:";
    margin-inline-end: 1ch;
    font-family: "Mojangles", monospace;
}