:root {

    --max-width: min(38rem, 90vw);

    /* NOTE: For Safari 17.4 (2024-12).
      Safari <17.5 doesn't support light-dark, so we force it into light mode.
      Remove once updated. 
      See https://daverupert.com/2024/05/light-dark-experiment/ 
    */

    --background-color: #fbecb2;

    --header-color: #ffcc33;

    --text-color: black;
    --teeth-color: #fa9999;
    --accent-color: var(--teeth-color);

    --h1-color: var(--text-color);
    --h2-color: var(--text-color);
    --h3-color: var(--text-color);

    --link-color: #0000D7;
    --visited-link-color: rgb(85, 26, 139);
    --cycle-link-color: #363537;

    --highlight-color: #e6ecf1;
    --blockquote-color: #e8ffde;

    --rainbow-color-1: #A00600;
    --rainbow-color-2: #7B3D00;
    --rainbow-color-3: #5D4D0F;
    --rainbow-color-4: #005B0B;
    --rainbow-color-5: #004C9F;
    --rainbow-color-6: #7A00B9;

    --favicon-url: url('/images/favicon.svg');

    @supports (color: light-dark(black, white)) {
        color-scheme: light dark;

        /* change to? */
        /* light-dark(rgb(250, 248, 240), #1f1f1f) */
        --background-color: light-dark(#fbecb2, #1f1f1f);

        --header-color: light-dark(#ffcc33, var(--background-color));

        --text-color: light-dark(black, #bebebe);
        --teeth-color: light-dark(#fa9999, #777);
        --accent-color: var(--teeth-color);
        --h1-color: light-dark(var(--text-color), var(--text-color) /**#ebdbb2*/ /**#d4b398*/ /**var(--rainbow-color-1)/** /**#8cd867*/ /**#98971a*/);
        --h2-color: light-dark(var(--text-color), #d3869b);
        --h3-color: light-dark(var(--text-color), #d79921);

        --link-color: light-dark(#0000D7, #ABCCE0);
        --visited-link-color: light-dark(rgb(85, 26, 139), #E6B6FF);
        --cycle-link-color: light-dark(#363537, #daa520);

        --highlight-color: light-dark(#e6ecf1, #333);
        --blockquote-color: light-dark(#e8ffde, #1E3F1E);

        --rainbow-color-1: light-dark(#A00600, #FF5F59);
        --rainbow-color-2: light-dark(#7B3D00, #FF7F00);
        --rainbow-color-3: light-dark(#5D4D0F, #E8EC67);
        --rainbow-color-4: light-dark(#005B0B, #00F11D);
        --rainbow-color-5: light-dark(#004C9F, #3897FF);
        --rainbow-color-6: light-dark(#7A00B9, #dc99ff);
    }

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

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

:root[data-contrast="higher"] {
    filter: contrast(2);
}

@media (prefers-contrast: more) {
    :root {
        filter: contrast(2);
    }
}

:root[data-contrast="lower"] {
    filter: contrast(0.75);
}

@media (prefers-contrast: less) {
    :root {
        filter: contrast(0.75);
    }
}

@font-face {
    font-family: "atkinson_hyperlegible";
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2'),
        url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Regular-102.woff') format('woff'),
        url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Regular-102.ttf') format('truetype');
}

@font-face {
    font-family: "atkinson_hyperlegible";
    font-style: italic;
    font-weight: 400;
    src: url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2'),
        url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Italic-102a.woff') format('woff'),
        url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Italic-102a.ttf') format('truetype');
}

@font-face {
    font-family: "atkinson_hyperlegible";
    font-style: normal;
    font-weight: 700;
    src: url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2'),
        url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Bold-102a.woff') format('woff'),
        url('/fonts/atkinson_hyperlegible/Atkinson-Hyperlegible-Bold-102.ttf') format('truetype');
}

html {
    height: 100%;
}

body {
    height: 100%;
    background: var(--background-color);
    color: var(--text-color);
    margin: 0;
    font-family: atkinson_hyperlegible, Verdana, sans-serif;
    font-size: 1.2rem;
    line-height: 1.3;
}

body>header {
    background: var(--header-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 0.75rem 0.5rem 0 0.5rem;
    gap: 0.5rem;
}

footer {
    background: var(--header-color);
    text-align: center;
    padding-bottom: 0.5rem;
    padding-top: 0.25rem;
}

footer>* {
    margin: 0;
    padding: 0;
}

footer h2 {
    color: var(--text-color);
    line-height: 1.3;
}

nav ol {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.5rem;
}

h1 {
    color: var(--h1-color);
    font-weight: 700;
    text-align: center;
    margin: 0;
    text-wrap-style: balance;
    font-size: 2.5rem;
}

h1 em {
    display: block;
    font-size: 50%;
}

h2 {
    text-align: center;
    margin: 2rem 0 0 0;
    padding: 0;
    font-size: 2rem;
    line-height: 2rem;
    color: var(--h2-color);
}

h3 {
    margin: 1rem 0;
    color: var(--h3-color);
}

aside h2, aside h3, blockquote h2, blockquote h3 {
    color: var(--text-color);
}

main {
    max-width: var(--max-width);
    margin: auto;
    padding: 0 1rem;
    animation-timing-function: cubic-bezier(0.34, 1.04, 0.52, 0.16);
    animation-duration: 4s;
}

main.eaten {
    animation-name: eat;
    overflow: hidden;
}

body:has(.eaten) #eat {
    color: var(--text-color);
    text-decoration: none;
    cursor: auto;
}

.teeth {
    position: relative;
    width: 100%;
    height: 2rem;
    background-color: transparent;
}

.teeth-mask {
    position: absolute;
    background: var(--teeth-color);
    width: 100%;
    height: 2rem;
}

.teeth-upper {
    mask: conic-gradient(from -27.5deg at bottom, #0000, #000 1deg 54deg, #0000 55deg) 50%/31.23px 100%;
}

.teeth-lower {
    mask: conic-gradient(from 152.5deg at top, #0000, #000 1deg 54deg, #0000 55deg) 50%/31.23px 100%;
}

@keyframes eat2 {
    0% {
        margin-top: -2rem;
    }

    90% {
        margin-top: -2rem;
    }

    100% {
        margin-top: 0;
    }
}

body:has(.eaten) .teeth-lower {
    animation-name: eat2;
    animation-duration: 4s;
    animation-timing-function: linear;
}

body:has(.eaten) footer {
    display: none;
}

article>header {
    margin: 1rem 0;
}

article {
    max-width: var(--max-width);
}

.thumbnail {
    margin-top: 0.5rem;
}

hgroup {
    display: block;
    margin: auto;
    text-align: center;
    margin-bottom: 1rem;
}

details>summary {
    cursor: pointer;
}

sup {
    vertical-align: top;
    margin-left: 3px;
}

blockquote,
aside {
    background: var(--blockquote-color);
    border-radius: 1rem;
    padding: 1rem 1rem 1rem 1rem;
    margin: 1rem 0;
    max-width: fit-content;
}

blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
aside h1,
aside h2,
aside h3,
aside h4 {
    margin-top: 0;
}

:not(pre)>code {
    background: var(--highlight-color);
    padding: 0 0.2rem;
    font-size: 0.9em;
}

blockquote :not(pre)>code,
aside :not(pre)>code {
    padding: 0 0.2rem;
}

main blockquote p:first-child,
main aside p:first-child {
    margin-top: 0;
}

main blockquote p:last-child,
main aside p:last-child {
    margin-bottom: 0;
}

.logo {
    max-width: 90vw;
    margin: 0 2em;
}

details {
    margin: 1rem 0;
}

summary h3 {
    display: inline;
    margin-left: 0.5rem;
}

#orderSelect {
    font-size: inherit;
    font-family: inherit;
    background: var(--blockquote-color);
    ;
}

.indexables {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    width: fit-content;
    padding: 0;
}

.indexable {
    padding: 0 0.5rem;
    margin-bottom: 2rem;
    border-left: 3px solid black;
}

.indexable-tags {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    flex-wrap: wrap;
}

.indexable-tags li {
    margin-top: 0 !important;
}

.indexable > a:nth-of-type(1) {
    font-size: 120%;
    font-weight: 700;
    line-height: 1.3;
}

.indexable section {
    line-height: 1.3;
}

.indexable:nth-of-type(3n + 1) {
    border-color: var(--rainbow-color-1);
    & a, & time {
        color: var(--rainbow-color-1);
    }
}

.indexable:nth-of-type(3n + 2) {
    border-color: var(--rainbow-color-3);
    & a, & time {
        color: var(--rainbow-color-3);
    }
}

.indexable:nth-of-type(3n + 3) {
    border-color: var(--rainbow-color-6);
    & a, & time {
        color: var(--rainbow-color-6);
    }
}

.indexable img {
    margin: 1rem 0 0 0;
    width: auto;
    max-height: 30vh;
}

.indexable time {
    text-align: unset;
}

.indexable p {
    margin-bottom: 0;
}

main time {
    text-align: center;
    display: block;
}

main p,
article section ul {
    max-width: var(--max-width);
    margin: 1rem 0;
    overflow-wrap: break-word;
}

article ul li {
    margin: 0.5rem;
}

article section ul ul {
    margin: 0;
}

pre {
    overflow: auto;
}

main .tags {
    display: flex;
    gap: 1rem;
    justify-content: center;
    list-style: none;
    flex-wrap: wrap;
    /** reset */
    margin: 0;
    padding: 0;
}

main hgroup img {
    margin-top: 0.5rem;
}

main img,
main video {
    display: block;
    margin: 0 auto;
    max-width: min(var(--max-width), 100%);
    max-height: 65vh;
}

figure {
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: var(--max-width);
    display: block;
    margin: 0 auto;
    margin-top: 1rem;
}

figcaption {
    font-style: italic;
    font-size: 0.9em;
    margin-top: 0.5rem;
}

.gallery {
    display: flex;
    gap: 1rem;
}

hr {
    border-color: var(--accent-color);
}

hr:not(.simple-hr) {
    border: none;
    border-top: 3px double var(--accent-color);
    text-align: center;
    overflow: visible;
    height: 1rem;
    margin-top: 30px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --favicon-url: url('/images/favicon_white.svg');
    }
}

hr:not(.simple-hr)::after {
    background: var(--background-color);
    content: var(--favicon-url);
    padding: 0 4px;
    position: relative;
    top: -17px;
    display: inline-block;
    max-width: var(--max-width);
}

/** Wipe the final hr used for footnotes */
#footnotes hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
    border-top: 2px solid black;
    /** Needed to keep vertical spacing consistent. */
    height: 0;
}

#footnotes hr:after {
    all: unset;
}

copy-code-button {
    display: block;
}

/* Pandoc CSS for syntax highlighting */
pre>code.sourceCode {
    color: light-dark(black, #4FC1FF);
    white-space: pre;
    position: relative;
}

pre>code.sourceCode>span {
    line-height: 1.3;
}

pre>code.sourceCode>span:empty {
    height: 1.2em;
}

.sourceCode {
    overflow: visible;
}

code.sourceCode>span {
    color: inherit;
    text-decoration: inherit;
}

div.sourceCode {
    background-color: light-dark(white, #1f1f1f);
    padding: 1rem;
    margin: 1rem 0;
    margin-bottom: 0.5rem;
    border: 1px solid var(--accent-color);
    border-radius: 1rem;

    /* Make the width expand beyond the section's max width  */
    width: fit-content;
    min-width: 100%;
    max-width: clamp(var(--max-width), calc(100vw / 2 + var(--max-width) / 2 - 2rem), calc(100vw / 2 + var(--max-width) / 2 - 2rem));
    box-sizing: border-box;
}

pre.sourceCode {
    margin: 0;
}

@media screen {
    div.sourceCode {
        overflow: auto;
    }
}

@media print {
    pre>code.sourceCode {
        white-space: pre-wrap;
    }

    pre>code.sourceCode>span {
        display: inline-block;
        text-indent: -5em;
        padding-left: 5em;
    }
}

pre.numberSource code {
    counter-reset: source-line 0;
}

pre.numberSource code>span {
    position: relative;
    left: -4em;
    counter-increment: source-line;
}

pre.numberSource code>span>a:first-child::before {
    content: counter(source-line);
    position: relative;
    left: -1rem;
    text-align: right;
    vertical-align: baseline;
    border: none;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0 4px;
    width: 4em;
    color: #aaaaaa;
}

pre.numberSource {
    margin-left: 3em;
    border-left: 1px solid #aaaaaa;
    padding-left: 4px;
}

@media screen {
    pre>code.sourceCode>span>a:first-child::before {
        text-decoration: underline;
    }
}

code span.al {
    color: light-dark(#ff0000, #ffff00);
    font-weight: bold;
}

/* Annotation */
code span.an {
    color: light-dark(#60a0b0, #9CDCFE);
    font-weight: bold;
    font-style: italic;
}

/* Attribute */
code span.at {
    color: light-dark(#7d9029, #4FC1FF);
}

/* BaseN */
code span.bn {
    color: light-dark(#40a070, #B5CEA8);
}

/* BuiltIn */
code span.bu {
    color: light-dark(#008000, #d2a6ff);
}

/* ControlFlow */
code span.cf {
    color: light-dark(#007020, #C586C0);
}

@media (prefers-color-scheme: light) {
    code span.cf {
        font-weight: bold;
    }
}


/* Char */
code span.ch {
    color: light-dark(#4070a0, #CE9178);
}

/* Constant */
code span.cn {
    color: light-dark(#880000, #4FC1FF);
}

/* Comment */
code span.co {
    color: light-dark(#60a0b0, #6A9955);
    font-style: italic;
}

/* CommentVar */
code span.cv {
    color: light-dark(#60a0b0, #6A9955);
    font-weight: bold;
    font-style: italic;
}

/* Documentation */
code span.do {
    color: light-dark(#ba2121, #9CDCFE);
    font-style: italic;
}

/* DataType */
code span.dt {
    color: light-dark(#902000, #9CDCFE);
}

/* DecVal */
code span.dv {
    color: light-dark(#40a070, #B5CEA8);
}

/* Error */
code span.er {
    color: light-dark(#ff0000, #ffff00);
    font-weight: bold;
}

/* Extension */
code span.ex {
    color: light-dark(#008000, #d2a6ff);
}

/* Float */
code span.fl {
    color: light-dark(#40a070, #B5CEA8);
}

/* Function */
code span.fu {
    color: light-dark(#06287e, #DCDCAA);
}

/* Import */
code span.im {
    color: light-dark(#008000, #C586C0);
}

@media (prefers-color-scheme: light) {
    code span.im {
        font-weight: bold;
    }
}


/* Information */
code span.in {
    color: light-dark(#60a0b0, #4FC1FF);
    font-weight: bold;
    font-style: italic;
}

/* Keyword */
code span.kw {
    color: light-dark(#007020, #569CD6);
}

@media (prefers-color-scheme: light) {
    code span.kw {
        font-weight: bold;
    }
}

/* Operator */
code span.op {
    color: light-dark(#666666, #D4D4D4);
}

/* Other */
code span.ot {
    color: light-dark(#007020, #4FC1FF);
}

/* Preprocessor */
code span.pp {
    color: light-dark(#bc7a00, #4FC1FF);
}

/* SpecialChar */
code span.sc {
    color: light-dark(#4070a0, #CE9178);
}

/* SpecialString */
code span.ss {
    color: light-dark(#bb6688, #CE9178);
}

/* String */
code span.st {
    color: light-dark(#4070a0, #CE9178);
}

/* Variable */
code span.va {
    color: light-dark(#19177c, #569CD6);
}

/* VerbatimString */
code span.vs {
    color: light-dark(#4070a0, #CE9178);
}

/* Warning */
code span.wa {
    color: light-dark(#60a0b0, #ffff00);
    font-weight: bold;
    font-style: italic;
}