html {
    display: flex;
    font-size: 16px;

    --nav-width: 280px;
    --page-gap: 4ch;
    --page-height: calc(100vh - 2 * var(--page-gap));

    @media (prefers-color-scheme: light) {
        --main-colour: #000;
        --bg-colour: #fff;
        --accent-colour: #44f;
        --secondary-accent-colour: #518;
    }
    @media (prefers-color-scheme: dark) {
        --main-colour: #fff;
        --bg-colour: #222;
        --accent-colour: #bbf;
        --secondary-accent-colour: #97a;
    }

    color: var(--main-colour);
    background-color: var(--bg-colour);
}

body {
    width: 1200px;
    min-height: var(--page-height);

    margin: auto;
}
body main {
    max-width: calc(100vw - var(--nav-width) - 2 * var(--page-gap));

    margin-left: var(--nav-width);
    padding: var(--page-gap);
}


#sidebar {
    position: fixed;
    width: calc(var(--nav-width) - 2 * var(--page-gap));
    height: calc(var(--page-height) - 2 * var(--page-gap));

    margin-block: var(--page-gap);
    padding: var(--page-gap);

    border-right: solid 2px;
}
#sidebar > a {
    display: flex;
    justify-content: center;

    font-size: 2em;
}
#sidebar > ul > li > a { font-size: larger }


#crumb-links {
    display: flex;
    list-style: none;

    white-space: pre;
    overflow: scroll;

    gap: 0;
}
#crumb-links li::after{
    content: "/";
    padding: 1ch;
}


@media screen and (width < 800px) {
    #sidebar { display: none }
    #crumb-links { padding: 0 }
    body main {
        max-width: calc(100vw - 2 * var(--page-gap));
        margin: unset;
    }
}


img {
    display: block;
    max-width: 100%;
    margin: auto;
}
figure { margin-inline: 0 }
figcaption { text-align: center }

a { color: var(--accent-colour) }
:visited { color: var(--secondary-accent-colour) }

ul { padding-left: 2ch }
li { margin-block: 0.5em }
dt { font-size: large }
.folder { list-style-type: disclosure-closed }
.open { list-style-type: disclosure-open }


table {
    table-layout: fixed;
    width: 100%;

    border-collapse: collapse;
}
td {
    padding: 0.25em 1ch;

    word-wrap: anywhere;
    text-wrap-style: balance;

    border: 2px solid;
}


pre {
    max-width: 100%;
    padding: 1ch;

    overflow: scroll;
}
pre code {
    padding: unset;
    background-color: unset;
}