:root {
    color-scheme: light dark;

    --background: var(--bg_0);
    --highlight: var(--bg_1);
    --primary: var(--fg_0);
    --secondary: var(--dim_0);
    --emphasized: var(--fg_1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg_0: #103c48;
        --bg_1: #174956;
        --bg_2: #325b66;
        --dim_0: #72898f;
        --fg_0: #adbcbc;
        --fg_1: #cad8d9;

        --red: #fa5750;
        --green: #75b938;
        --yellow: #dbb32d;
        --blue: #4695f7;
        --magenta: #f275be;
        --cyan: #41c7b9;
        --orange: #ed8649;
        --violet: #af88eb;

        --br_red: #ff665c;
        --br_green: #84c747;
        --br_yellow: #ebc13d;
        --br_blue: #58a3ff;
        --br_magenta: #ff84cd;
        --br_cyan: #53d6c7;
        --br_orange: #fd9456;
        --br_violet: #bd96fa;
    }

    img {
        filter: grayscale(15%);
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg_0: #fbf3db;
        --bg_1: #e9e4d0;
        --bg_2: #cfcebe;
        --dim_0: #909995;
        --fg_0: #53676d;
        --fg_1: #3a4d53;

        --red: #d2212d;
        --green: #489100;
        --yellow: #ad8900;
        --blue: #0072d4;
        --magenta: #ca4898;
        --cyan: #009c8f;
        --orange: #c25d1e;
        --violet: #8762c6;

        --br_red: #cc1729;
        --br_green: #428b00;
        --br_yellow: #a78300;
        --br_blue: #006dce;
        --br_magenta: #c44392;
        --br_cyan: #00978a;
        --br_orange: #bc5819;
        --br_violet: #825dc0;
    }
}

html {
    hanging-punctuation: first allow-end last;
    scroll-behavior: smooth;
}

body {
    background-color: var(--background);
    color: var(--primary);
    height: 100%;
    margin: auto;
    padding: 2rem;
    font-family: sans-serif;
    max-width: 40rem;
}

h1 > a,
h1 > a:visited,
h2 > a,
h2 > a:visited,
h3 > a,
h3 > a:visited,
h4 > a,
h4 > a:visited,
h5 > a,
h5 > a:visited,
h6 > a,
h6 > a:visited {
    color: var(--emphasized);
}

h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child),
h5:not(:first-child),
h6:not(:first-child) {
    margin-top: 2em;
    margin-bottom: 1em;
}

article > header > h1 > a {
    font-size: larger;
    margin-bottom: 0;
}

ul,
ol {
    padding-left: 0;
    list-style-position: outside;
}

ul ul {
    padding-left: 1em;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: var(--violet);
}

a.footnote {
    font-size: smaller;
    vertical-align: super;
}

main,
body > header,
nav,
section {
    border-bottom: 1px solid var(--secondary);
}

body > header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: baseline;
}

body > header h1,
body > header p {
    margin: 0 0 0.5em;
}

header h1 a,
header h1 a:hover,
header h1 a:visited {
    color: var(--emphasized);
    text-decoration: none;
}

footer ul,
nav ul {
    margin: 0.5em 0 0.5em;
    line-height: 2em;
}

nav li {
    display: inline-block;
}

nav li a {
    padding: 0.5em;
}

nav li a:hover {
    background-color: var(--highlight);
    text-decoration: none;
}

nav li a.active {
    background-color: var(--highlight);
}

main {
    line-height: 2em;
}

footer {
    text-align: center;
    color: var(--secondary);
    font-size: smaller;
}

footer li {
    display: inline-block;
}

footer li:not(:last-child)::after {
    content: " ·";
}

ul.pager {
    list-style: none;
}

.pager .prev {
    float: left;
}

.pager .next {
    float: right;
}

.pager::after {
    content: "";
    clear: both;
    display: table;
}

ul.pager a {
    text-decoration: none;
    padding: 0.5em;
}

ul.pager a:hover {
    background-color: var(--highlight);
}

aside {
    font-size: smaller;
    color: var(--secondary);
}

aside a {
    color: var(--secondary);
}

blockquote {
    border-left: solid var(--primary);
    margin-left: -1em;
    padding-left: 1em;
    font-style: italic;
}

:not(pre) > code {
    color: var(--cyan);
    background-color: var(--highlight);
    white-space: nowrap;
}

pre code {
    overflow-x: auto;
    font-family: monospace;
    line-height: normal;
    border: 1px solid var(--secondary);
}

.highlight {
    padding: 1em;
    display: block;
    border-radius: 1em;
}

.synComment {
    color: var(--secondary);
}

.synConstant,
.synString,
.synCharacter,
.synNumber,
.synBoolean,
.synFloat {
    color: var(--cyan);
}

.synIdentifier,
.synFunction {
    color: var(--yellow);
}

.synStatement,
.synConditional,
.synRepeat,
.synLabel,
.synOperator,
.synKeyword,
.synException {
    color: var(--green);
}

.synPreProc,
.synInclude,
.synDefine,
.synMacro,
.synPrecondit {
    color: var(--orange);
}

.synType,
.synStorageClass,
.synStructure,
.synTypedef {
    color: var(--yellow);
}

.synSpecial,
.synTag,
.synSpecialChar,
.synDelimiter,
.synSpecialComment,
.synDebug {
    color: var(--orange);
}

.synUnderlined {
    text-decoration: underline;
}

.synIgnore {
    display: none;
}

.synError {
    color: var(--red);
}

.synTodo {
    color: var(--magenta);
}