:root {
    --body-margin: 0.5rem;
    --max-width: 37rem;
    --side-padding: max(var(--body-margin) + (100% - var(--max-width)) / 2,
            var(--body-margin));
}

:root:has(#theme>option[value="Automatic"]:checked) {
    @media (prefers-color-scheme: dark) {
        --text-colour: #e6e6e6;
--background: #3b1c32;
--nav-background: #A64D79;

--code-background: #1E1E1E;
--code-keyword: #C586C0;
--code-type: #569CD6;
--code-literal: #569CD6;
--code-number: #B5CEA8;
--code-punctuation: var(--text-color);
--code-operator: var(--text-color);
--code-string: #CE9178;
--code-symbol: #569CD6;
--code-variable: #DCDCAA;
--code-constant: #4FC1FF;
--code-class: #4EC9B0;
--code-comment: #6A9955;
--code-macro: #569CD6;
--code-diff: #d2a8ff;

--code-highlight: rgba(255,255,0,0.1);
--code-add: rgba(0,255,0,0.15);
--code-remove: rgba(255,0,0,0.3);
    }
    @media (prefers-color-scheme: light) {
        --text-colour: #e6e6e6;
--background: #3b1c32;
--nav-background: #A64D79;

--code-background: #1E1E1E;
--code-keyword: #C586C0;
--code-type: #569CD6;
--code-literal: #569CD6;
--code-number: #B5CEA8;
--code-punctuation: var(--text-color);
--code-operator: var(--text-color);
--code-string: #CE9178;
--code-symbol: #569CD6;
--code-variable: #DCDCAA;
--code-constant: #4FC1FF;
--code-class: #4EC9B0;
--code-comment: #6A9955;
--code-macro: #569CD6;
--code-diff: #d2a8ff;

--code-highlight: rgba(255,255,0,0.1);
--code-add: rgba(0,255,0,0.15);
--code-remove: rgba(255,0,0,0.3);
    }
}

:root:has(#theme>option[value="Light"]:checked) {
    --text-colour: black;
--background: #E6D1F2;
--nav-background: #b19cd8;

--code-background: #FFFFFF;
--code-keyword: #0000FF;
--code-type: #0000FF;
--code-literal: #0000FF;
--code-number: #098658;
--code-punctuation: var(--text-color);
--code-operator: var(--text-color);
--code-string: #A31515;
--code-symbol: #0000FF;
--code-variable: #001080;
--code-constant: #001080;
--code-class: #267F99;
--code-comment: #008000;
--code-macro: #0000FF;
--code-diff: #8250df;

--code-highlight: rgba(255,255,0,0.4);
--code-add: rgba(0,255,0,0.15);
--code-remove: rgba(255,0,0,0.15)
}

:root:has(#theme>option[value="Dark"]:checked) {
    --text-colour: #e6e6e6;
--background: #3b1c32;
--nav-background: #A64D79;

--code-background: #1E1E1E;
--code-keyword: #C586C0;
--code-type: #569CD6;
--code-literal: #569CD6;
--code-number: #B5CEA8;
--code-punctuation: var(--text-color);
--code-operator: var(--text-color);
--code-string: #CE9178;
--code-symbol: #569CD6;
--code-variable: #DCDCAA;
--code-constant: #4FC1FF;
--code-class: #4EC9B0;
--code-comment: #6A9955;
--code-macro: #569CD6;
--code-diff: #d2a8ff;

--code-highlight: rgba(255,255,0,0.1);
--code-add: rgba(0,255,0,0.15);
--code-remove: rgba(255,0,0,0.3);
}

html {
    font-size: 1.1rem;
    font-family: 'EB Garamond', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    height: 100%;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/assets/EBGaramond-VariableFont_wght.ttf');
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    background: var(--background);
    min-height: 100%;

    &>main {
        max-width: var(--max-width);
        padding: 0 var(--body-margin) var(--body-margin);
        box-sizing: border-box;
        flex-grow: 1;

        &,
        &:first-child {
            margin-top: 0;
        }
    }

    * {
        width: 100%;
        box-sizing: border-box;
    }
}

header,
footer {
    margin: 0;
    padding: 0;
    max-width: none;
    flex-shrink: 0;
}

nav {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1em var(--side-padding);
    background: var(--nav-background);
}

header nav a {
    color: var(--text-colour);
    font-size: 1.5em;
    text-decoration: none;
    font-style: normal;
}

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

header h1 {
    margin-bottom: 0.5em;
    padding: 0 var(--side-padding);
}

header p {
    padding: 0 var(--side-padding);
    margin-bottom: 0;
}

header p, footer nav {
    font-size: 0.8em;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        margin-bottom: 0;
    }

    >:not(nav) {
        max-width: var(--max-width);
        padding: 0 var(--body-margin) var(--body-margin);
    }

    ol {
        list-style-position: inside;
        padding-inline-start: 0;
    }

    hr {
        padding-bottom: 0;
        max-width: calc(var(--max-width) - 2 * var(--body-margin));
    }

    nav {
        display: block;

        a+a {
            margin-inline-start: 1em;
        }
    }
}

p,
li {
    line-height: 1.5em;
    color: var(--text-colour);
}

del {
    text-decoration: underline;
    text-underline-offset: -.3em;
    text-decoration-skip-ink: none;
}

code {
    color: var(--text-colour);
    font-size: 0.91rem;
}

a {
    color: var(--text-colour);
    font-style: italic;
}

@counter-style empty-style {
    system: extends decimal;
    suffix: " ";
}

pre {
    font-size: 1rem;
    white-space: pre-wrap;
    word-break: break-all;
    padding: 0.5em 0.5em 0.5em 0;
    background: var(--code-background);
    border-radius: 10px;

    ol {
        list-style: empty-style;
        list-style-position: outside;
        padding-inline-start: revert;
    }

    li {
        border-left: 1px var(--text-colour) solid;
        padding-left: 0.5em;
    }

    .background {
        color: var(--code-background);
    }

    .keyword {
        color: var(--code-keyword);
    }

    .type {
        color: var(--code-type);
    }

    .literal {
        color: var(--code-literal);
    }

    .number {
        color: var(--code-number);
    }

    .punctuation {
        color: var(--code-punctuation);
    }

    .operator {
        color: var(--code-operator);
    }

    .string {
        color: var(--code-string);
    }

    .symbol {
        color: var(--code-symbol);
    }

    .variable {
        color: var(--code-variable);
    }

    .constant {
        color: var(--code-constant);
    }

    .class {
        color: var(--code-class);
    }

    .comment {
        color: var(--code-comment);
    }

    .macro {
        color: var(--code-macro);
    }

    .diff {
        color: var(--code-diff);
    }

    li.line-highlight {
        background-color: var(--code-highlight);
    }

    li.line-add {
        background-color: var(--code-add);
    }

    li.line-remove {
        background-color: var(--code-remove);
    }
}

hr {
    border-style: solid;
    border-color: var(--text-colour);
    border-width: 1px;
    border-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-colour);
}

ul.posts {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.posts li a {
    color: var(--text-colour);
    text-decoration: none;
    font-style: normal;
}

ul.posts li a p {
    padding-left: 2em;
    margin-top: 0;
}

ul.posts li a:hover h2 {
    text-decoration: underline;
}

.post-title h2 {
    margin: 0;
    display: inline;
}

.post-title time {
    font-size: 0.8em;
    color: var(--text-colour);
    padding-left: 0.5em;
    white-space: nowrap;
}

.footnote-reference sup {
    color: var(--text-colour);
    margin-left: 0.25em;
    vertical-align: top;
    font-size: small;
    position: relative;
    top: -0.2em;
    font-style: normal;
    text-underline-position: under;
}

.footnote-definition p {
    display: inline;
}

.footnote-definition {
    margin-block-start: 1em;
}

.footnote-definition-label {
    color: var(--text-colour);
}

.theme-container {
    text-align: right;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    color: var(--text-colour);

    select {
        width: auto
    }

    select,
    ::picker(select) {
        appearance: base-select;
        border: none
    }
}

svg {
    max-height: 100vh;

    path,
    circle {
        stroke: var(--text-colour) !important
    }

    text,
    polygon {
        fill: var(--text-colour) !important
    }
}