:root {
    /* TailwindCSS font size scale */
    --type-xs: 0.75rem;
    --type-sm: 0.875rem;
    --type-base: 1rem;
    --type-lg: 1.125rem;
    --type-xl: 1.25rem;
    --type-2xl: 1.5rem;
    --type-3xl: 1.875rem;
    --type-4xl: 2.25rem;
    --type-5xl: 3rem;
    --type-6xl: 3.75rem;
    --type-7xl: 4.5rem;
    --type-8xl: 6rem;
    --type-9xl: 8rem;
    /* (customized) TailwindCSS line height scale */
    --leading-xs: 1.125rem;
    --leading-sm: 1.25rem;
    --leading-base: 1.5rem;
    --leading-lg: 1.75rem;
    --leading-xl: 1.875rem;
    --leading-2xl: 2rem;
    --leading-3xl: 2.375rem;
    --leading-4xl: 2.625rem;
    --leading-5xl: 3.375rem;
    --leading-6xl: 0;
    --leading-7xl: 0;
    --leading-8xl: 0;
    --leading-9xl: 0;
    /* (customized) TailwindCSS letter spacing scale */
    --tracking-tighter: -0.015em;
    --tracking-tight: -0.0075em;
    --tracking-normal: 0;
    --tracking-wide: 0.0075em;
    --tracking-wider: 0.015em;
    /* TailwindCSS spacing scale */
    --spacing-0: 0px;
    --spacing-px: 1px;
    --spacing-0_5: 2px;
    --spacing-1: 4px;
    --spacing-1_5: 6px;
    --spacing-2: 8px;
    --spacing-2_5: 10px;
    --spacing-3: 12px;
    --spacing-3_5: 14px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;
    --spacing-14: 56px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-28: 112px;
    --spacing-32: 128px;
    --spacing-36: 144px;
    --spacing-40: 160px;
    --spacing-44: 176px;
    --spacing-48: 192px;
    --spacing-52: 208px;
    --spacing-56: 224px;
    --spacing-60: 240px;
    --spacing-64: 256px;
    --spacing-72: 288px;
    --spacing-80: 320px;
    --spacing-96: 384px;
    /* TailwindCSS border radii */
    --rounded-none: 0px;
    --rounded-sm: 2px;
    --rounded: 4px;
    --rounded-md: 6px;
    --rounded-lg: 8px;
    --rounded-xl: 12px;
    --rounded-2xl: 16px;
    --rounded-3xl: 24px;
    --rounded-full: 9999px;
    /* TailwindCSS shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --shadow-none: 0 0 #0000;
    /* TailwindCSS color palette: gray */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #030712;
}


/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    font-size: 100%;
    font: inherit;
    overflow-wrap: break-word;
}
html {
    min-height: 100%;
    position: relative;
}
body {
    font-family: "Source Sans 3 VF", sans-serif;
    font-weight: 400;
    font-size: var(--type-base);
    line-height: var(--leading-base);
    letter-spacing: var(--tracking-normal);
    color: var(--gray-900);
    font-variant-numeric: tabular-nums lining-nums;
    text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}


/* Source Sans 3 Variable (normal) */
@font-face{
    font-family: 'Source Sans 3 VF';
    font-style: normal;
    font-weight: 200 900;
    font-stretch: normal;
    src: url(/assets/source-sans-3-variable-normal.woff2) format("woff2");
    font-display: swap;
}
/* Source Sans 3 Variable (italic) */
@font-face{
    font-family: 'Source Sans 3 VF';
    font-style: italic;
    font-weight: 200 900;
    font-stretch: normal;
    src: url(/assets/source-sans-3-variable-italic.woff2) format("woff2");
    font-display: swap;
}
/* Inconsolata latin 400 normal */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/inconsolata-latin-400-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inconsolata latin 700 normal */
@font-face {
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/inconsolata-latin-700-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Code Pro latin 400 normal */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/source-code-pro-latin-400-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Code Pro latin 700 normal */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/source-code-pro-latin-700-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Standard html tags */
body {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-12) var(--spacing-3);
}
main {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    counter-reset: footnote;
}
header, h1, h2, h3, p, ul, ol, figure, figcaption, .container, .admonition, #footnotes {
    width: 100%;
    max-width: 700px;
}
h1, h2, h3 {
    font-weight: 700;
}
a {
    text-underline-offset: 2px;
}
strong {
    font-weight: 600;
}
em {
    font-style: italic;
}
sup {
    /* Avoid increasing the line height */
    vertical-align: top;

    & a {
        text-decoration: none;
    }
    & a::after {
        counter-increment: footnote;
        content: "[" counter(footnote) "]";
    }
}
figcaption, .details, .thanks, .thanks a, ol li::before {
    color: var(--gray-500);
}
code {
    font-family: "Inconsolata", monospace;
}
code::before, code::after {
    content: "\`";
}
figure img {
    border-radius: var(--rounded);
    width: 100%;
}
figure.small img {
    width: 250px;
}
hr {
    width: 100%;
    max-width: calc(700px - 2 * var(--spacing-6));
    border-width: 0;
    height: 2px;
    background-color: var(--gray-200);
    border-radius: var(--rounded-full);
}
@media (min-width: 600px) {
    body {
        padding: var(--spacing-8) var(--spacing-12) var(--spacing-48) var(--spacing-12);
    }
}


/* Typography */
h1 {
    font-size: var(--type-2xl);
    line-height: var(--leading-2xl);
    letter-spacing: var(--tracking-tighter);
}
h2 {
    font-size: var(--type-xl);
    line-height: var(--leading-xl);
    letter-spacing: var(--tracking-tight);
}
h3 {
    font-size: var(--type-lg);
    line-height: var(--leading-lg);
}
small, sup, figcaption, .footnote .textbox, .thanks {
    font-size: var(--type-sm);
    line-height: var(--leading-sm);
    letter-spacing: var(--tracking-wide);
}
@media (min-width: 600px) {
    body {
        font-size: var(--type-lg);
        line-height: var(--leading-lg);
    }
    h1 {
        font-size: var(--type-3xl);
        line-height: var(--leading-3xl);
    }
    h2 {
        font-size: var(--type-2xl);
        line-height: var(--leading-2xl);
    }
    h3 {
        font-size: var(--type-xl);
        line-height: var(--leading-xl);
    }
    header, .details, figcaption {
        font-size: var(--type-base);
        line-height: var(--leading-base);
        letter-spacing: var(--tracking-normal);
    }
    small, sup, .footnote .textbox, .thanks {
        font-size: var(--type-sm);
        line-height: var(--leading-sm);
        letter-spacing: var(--tracking-wide);
    }
}


/* Margins */
#footnotes {
    margin-top: var(--spacing-0);
}
.details, li {
    margin-top: var(--spacing-1_5);
}
p, figcaption {
    margin-top: var(--spacing-2);
}
ul, ul + *, ol, ol + *, .details + * {
    margin-top: var(--spacing-3);
}
h3, .admonition, .admonition + :not(h2, figure, hr, .thanks, .container) {
    margin-top: var(--spacing-4);
}
h2, .container {
    margin-top: var(--spacing-5);
}
figure, figure + * {
    margin-top: var(--spacing-6);
}
main, hr, hr + *, .thanks {
    margin-top: var(--spacing-7);
}
@media (min-width: 600px) {
    .details, li {
        margin-top: var(--spacing-2);
    }
    p, figcaption {
        margin-top: var(--spacing-3);
    }
    ul, ul + *, ol, ol + *, .details + * {
        margin-top: var(--spacing-5);
    }
    h3, .admonition, .admonition + :not(h2, figure, hr, .thanks, .container) {
        margin-top: var(--spacing-6);
    }
    h2, .container {
        margin-top: var(--spacing-8);
    }
    figure, figure + * {
        margin-top: var(--spacing-10);
    }
    main, hr, hr + *,  .thanks {
        margin-top: var(--spacing-12);
    }
}


/* List customization */
ul, ol {
    padding-left: var(--spacing-6);
    list-style: none;
    /* Only relevant for ordered lists */
    counter-reset: enumeration;

    & li::before {
        display: inline-block;
        position: relative;
    }
}
ul li::before {
    content: "";
    background-color: var(--gray-400);
    margin: 0 calc(var(--spacing-5) - 5.5px) 3px calc(-1 * var(--spacing-5));
}
ol li::before {
    counter-increment: enumeration;
    content: counter(enumeration) ".";
    width: var(--spacing-5);
    margin: 0 0 0 calc(-1 * var(--spacing-5));
}
@media (min-width: 600px) {
    ul, ol {
        padding-left: var(--spacing-8);
    }
    ul li::before {
        margin: 0 calc(var(--spacing-6) - 5.5px) 3px calc(-1 * var(--spacing-6));
    }
    ol li::before {
        width: var(--spacing-6);
        margin: 0 0 0 calc(-1 * var(--spacing-6));
    }
}


/* Essay classes */
.thanks {
    font-style: italic;
}
.dot {
    display: inline-block;
    background-color: var(--gray-900);
}
.dot, ul li::before {
    border-radius: var(--rounded-full);
    height: 5.5px;
    width: 5.5px;
}
.details .dot {
    background-color: var(--gray-400);
    margin: 0 var(--spacing-1_5) 2.5px var(--spacing-1_5);
}
.admonition {
    border-top: 2px solid var(--gray-200);
    border-bottom: 2px solid var(--gray-200);
    display: block;
    padding: var(--spacing-4) var(--spacing-3);
    background-color: var(--gray-50);
    width: calc(700px + 2 * var(--spacing-3));
    max-width: calc(100% + 2 * var(--spacing-3));
}
@media (min-width: 600px) {
    .admonition {
        border: 2px solid var(--gray-200);
        border-radius: var(--rounded-xl);
        padding: var(--spacing-5) calc(var(--spacing-6) - 2px);
        width: calc(700px + 2 * var(--spacing-6));
        max-width: calc(100% + 2 * var(--spacing-6));
    }
}


/* Header */
header {
    display: flex;
    align-items: center;
    justify-content: left;
    column-gap: var(--spacing-4);
    margin: 0 auto;
    flex-wrap: wrap;

    & #wormhole {
        width: var(--spacing-8);
        margin-left: -6px;
    }
}


/* Footnotes */
#footnotes {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footnote {
    position: relative;
    display: inline-block;
    height: 0;

    & button {
        background-color: white;
        border-radius: var(--rounded-full);
        padding: 6px;
        margin: 0 1px;
        display: inline-flex;
        align-items: center;
        position: relative;
        transform: translate(0, -2px);
        border: 1px solid var(--gray-400);
        cursor: pointer;
    }
    & button:hover, &.active button {
        background-color: var(--gray-900);
        border: 1px solid var(--gray-900);
    }
    & .dot {
        background-color: var(--gray-400);
        margin: 0 1.5px;
    }
    & button:hover .dot, &.active button .dot {
        background-color: white;
    }
    & .textbox, & .arrow {
        visibility: hidden;
        position: absolute;
        display: block;
        background-color: white;
        z-index: 10;
        top: calc(50% + var(--spacing-3_5));
        left: 50%;
    }
    & .textbox {
        border-radius: var(--rounded-xl);
        padding: var(--spacing-4) var(--spacing-3);
        border: 2px solid var(--gray-400);
        box-shadow: var(--shadow-lg);
        width: max-content;
        /* Ensure that the footnote doesn't overflow the screen */
        max-width: min(var(--spacing-80), calc(100vw - 2 * var(--spacing-3) - 4px));
        transform: translate(-50%, 20px);
    }
    & .arrow {
        width: 14px;
        height: 14px;
        border-left: 2px solid var(--gray-400);
        border-top: 2px solid var(--gray-400);
        border-top-left-radius: 2px;
        transform: translate(-50%, 13.65px) rotate(45deg);
    }
    &.active .textbox, &.active .arrow {
        visibility: visible;
    }
}
@media (min-width: 600px) {
    .footnote {
        & button {
            padding: 5px 6px;
            transform: translate(0, -3px);
        }
        & .textbox {
            /* Ensure that the footnote doesn't overflow the screen */
            max-width: min(var(--spacing-96), calc(100vw - 2 * var(--spacing-6)));
            padding: var(--spacing-5) calc(var(--spacing-6) - 2px);
        }
    }
}


/* Don't apply margin to first child */
:not(#footnotes) > :first-child {
    margin-top: 0;
}