:root {
    --bubble-border-radius: 5px;
    --bubble-border: 1px solid;
    --accent-background: #efefef;
    --based-text-width: 40em;
    --float-shadow: 0.075rem 0.075rem 0.25rem darkgrey;
}

/* § Universal */

body {
    font-family: "Computer Modern Serif", FreeSerif, Times, "Times New Roman", serif;
    line-height: 1.2;
    max-width: 60em;
    margin: auto;
    display: grid;
    grid-column-gap: 1em;
    grid-template-areas:
        "header"
        "content"
        "navigation"
        "footer";
}

header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    align-items: center;
}
main {
    min-width: 0;
    grid-area: content;
}

/* Headings */
h1 {
    border-bottom: var(--bubble-border);
    /* Suppress the "uniform font size" warning in Firefox: */
    /* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1 */
    margin-block: 0.67em;
    font-size: 2em;
    text-wrap: balance;
    text-align: center;
    padding-right: 0.2em;
}
h3 {
    font-style: italic;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    padding-left: 0.2em;
}

.skip-to-content {
    left: -100%;
    position: absolute;
    top: auto;
    overflow: hidden;
}

.skip-to-content:focus,
.skip-to-content:active {
    left: 0;
    overflow: auto;
    z-index: 999;
}

hr {
    border: none;
    text-align: center;
    overflow: visible;
}
hr:after {
    content: "***";
    position: relative;
}

/* § Horizontally Spread Content */
.index-spread {
    display: flex;
    flex-flow: row wrap;
}

.index-spread > .outline-3 {
    margin-right: 1em;
}

.index-spread > :is(h1, h2, h3, h4, h5, h6) {
    flex: 1 0 80%;
}

/* § Text */

/* Paragraphs */
p, dd {
    line-height: 1.5;
    margin-right: 1em;
}
p {
    margin-left: 1em;
    max-width: var(--based-text-width);
}
p + p {
    text-indent: 2ch;
}

dt {
    margin-left: 1em;
    font-weight: bold;
}

/* Code */
pre,
code {
    font-family: "Computer Modern Typewriter", Courier, monospace;
    background-color: var(--accent-background);
    border-radius: 4px;
}
code {
    padding: 0.1em;
}
pre {
    padding-left: 0.5em;
    padding: 0.2em;
    overflow: auto;
}

.org-string {
    color: darkblue;
}

.org-function-name {
    color: maroon;
}

.org-type {
    color: darkgreen;
}

.org-builtin {
    color: purple;
}

.org-variable-name {
    color: steelblue;
}

.org-keyword {
    color: darkslateblue;
}

@media(prefers-color-scheme: dark) {
    .org-string {
        color: lightblue;
    }

    .org-function-name {
        color: tomato;
    }

    .org-type {
        color: lightgreen;
    }

    .org-builtin {
        color: orchid;
    }

    .org-variable-name {
        color: lightsteelblue;
    }

    .org-keyword {
        color: plum;
    }
}
/* Keyboard Keys */
kbd {
    border: var(--bubble-border);
    border-radius: 3px;
    background-color: var(--accent-background);
    padding: 0.1em;
}

/* § Embedded Content */

/* Footnotes */
main {
    max-width: fit-content;
    position: relative;
}

div.footdef {
    display: flex;

    & > sup {
        padding-top: 1em;
        padding-left: 1em;
    }

    & > div.footpara {
        display: block;
    }
}

#footnotes, aside {
    width: fit-content;
    font-size: 80%;
    margin: 1em;
    * {
        text-align: left;
    }
}

/* Floating bubbles/notes */
aside, .float-bubble {
    box-shadow: var(--float-shadow);
    border-radius: var(--bubble-border-radius);
}


/* Abstract */
div.abstract > p:first-child::before {
    content: "Abstract";
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 100%;
}

/* Citations and Quotations */
cite {
    font-style: italic;
}

blockquote {
    max-width: calc(var(--based-text-width) / 1.25);
}

/* Figures */
figure:has(> .rfloat) {
    margin-left: clamp(0%, 1em, 5%);
    width: clamp(50%, var(--based-text-width), 90%);
    display: grid;
    align-items: center;
}
figcaption {
    text-align: center;
}
figure:has(> .rfloat) :nth-child(n) {
    width: fit-content(100%);
    margin: auto;
}

figure img {
    filter: drop-shadow(var(--float-shadow));
}

img {
    max-width: 100%;
    max-height: 100%;
}

/* Inline Media */
video {
    border-radius: 3px;
    max-width: 100%;
}
.circle {
    border-radius: 50%;
}

/* Lists */
ul,
ol {
    margin-right: 2em;
}

li {
    max-width: var(--based-text-width)
}

/* Footer */
footer {
    color: grey;
    border-top: var(--bubble-border);
    grid-area: footer;
    padding: 1em;
}
footer p {
    max-width: 100%;
}

/* Maths */
.maths {
    font-size: 110%;
    font-style: italic;
}
div.maths {
    margin: 1em;
    margin-left: 2em;
}
/* Page Header */
h1.title {
    margin-bottom: 0;
}

.blogdate {
    text-align: center;
    margin: 0.5em;
    font-style: italic;
}

.subtitle {
    font-size: 1.25em;
    text-wrap: balance;
    text-align: center;
    margin: 0 0.25em 0.25em 0.25em;
    font-style: italic;
    max-width: calc(var(--based-text-width) / 1.25);
}

/* Nav Bar */
nav:has(> #navigation) {
    grid-area: navigation;
    display: grid;
    justify-items: center;
}
#navigation {
    width: fit-content;
    margin: 0;
    padding: 0.5em;
}
#navigation a {
    display: inline-block;
}
#navigation img {
    max-height: 14px;
    max-width: 14px;
}

#top-link {
    visibility: collapse;
}

/* § Responsiveness */

img.rfloat {
    max-height: 256px;
}

@media (max-width: 50em) {
    span.feeddate {
        display: none;
    }
}

@media (min-width: 30em) {
    p, dd {
        text-align: justify;
    }
}

/* 'Wide' Screen Mode */
@media (min-width: 40em) {
    body {
        font-size: 110%;
    }
    pre {
        margin-left: 2em;
        margin-right: 1em;
        width: min-content;
    }
}

/* 'Super Wide' Screen Mode */
@media (min-width: 50em) {
    @supports (display: grid) {
        body {
            grid-template-areas:
                "navigation header"
                "navigation content"
                "navigation footer";
            grid-template-columns: auto 1fr;
            justify-items: center;
        }
        nav:has(> #navigation) {
            display: block;
            justify-self: end;
        }
        #navigation a {
            display: block;
        }
        #navigation {
            position: sticky;
            position: -webkit-sticky;
            top: 1em;
            left: 100%;
        }

        #top-link {
            visibility: visible;
        }
        #footnotes, aside {
            margin-left: auto;
            margin-right: auto;
        }
    }
}

@media (min-width: 90em) {
    aside, figure:has(> .rfloat) {
        position: absolute;
        left: 100%;
        width: 20em;
    }
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        --accent-background: #222;
    }
    body {
        background: #151515;
        color: #ccc;
    }
    a {
        color: #24bdff;
    }
    a:visited {
        color: #9d24ff;
    }
}

@media print {
    pre {
        border: var(--bubble-border);
        border-radius: 1en;
    }
    nav {
        display: none;
    }
    body {
        grid-template-columns: 100%;
        font-size: 11pt;
        max-width: 100%;
    }
    p {
        max-width: 100%;
    }
    article {
        border-radius: 0px;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px dotted;
        break-inside: avoid;
    }
}