:root {
    --fuckboy-teal: #28929f;
    --fuckboy-teal-light: #e4edee;
    --spacing-unit: 5px;

    --theme-background: white;
    --theme-color: black;
    --theme-background-alt: var(--fuckboy-teal-light);
    --theme-color-alt: var(--fuckboy-teal);

    margin: 0;
    padding: 0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --theme-background: black;
        --theme-color: white;
        --theme-background-alt: var(--fuckboy-teal);
        --theme-color-alt: var(--fuckboy-teal-light);
    }
}

[data-theme="dark"] {
    /* TODO: This needs to match the above exactly. Figure out how to DRY */
    --theme-background: black;
    --theme-color: white;
    --theme-background-alt: var(--fuckboy-teal);
    --theme-color-alt: var(--fuckboy-teal-light);
}

body {
    margin: 0;
    padding: calc(3 * var(--spacing-unit));
    max-width: 750px;

    /*
      Ancizar Sans, then the Classical Humanist stack from
      https://github.com/system-fonts/modern-font-stacks
    */
    font-family: 'Ancizar Sans', Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    color: var(--theme-color);

    background: var(--theme-background);
}

a,
a:visited,
a:active,
a:hover {
    color: var(--theme-color-alt);
}

header,
footer {
    margin: 0;
    padding: calc(3 * var(--spacing-unit));

    background-color: var(--theme-background-alt);
    color: var(--theme-color);
    border-radius: calc(2 * var(--spacing-unit));
    border: 1px solid var(--theme-color-alt);

    h1:first-child,
    p:first-child,
    figure:first-child {
        margin-top: 0;
    }

    h1:last-child,
    p:last-child,
    figure:last-child {
        margin-bottom: 0;
    }
}

header {
    margin-bottom: calc(6*var(--spacing-unit));
}

footer {
    margin-top: calc(6*var(--spacing-unit));
}

h1 {
    font-size: 1.25rem;
    font-weight: 650;
    margin: calc(6*var(--spacing-unit)) 0 0 0;

    a,
    a:visited,
    a:active {
        text-decoration: none;
        color: inherit;
    }

    a:hover {
        text-decoration: underline;
        color: inherit;
    }
}

/* Applied to post headings after scrolling far down in the index when contents
are hidden and you just get the title/link */
.reduced-margin-top {
    margin-top: var(--spacing-unit);
}

p,
figure {
    margin: calc(2*var(--spacing-unit)) 0;
    padding: 0;
}

figure {
    max-width: 100%;

    img {
        max-width: 100%;
    }
}

blockquote {
    margin: 0 0 0 calc(2 * var(--spacing-unit));
    padding: 0 0 0 calc(2 * var(--spacing-unit));
    border-left: 1px dashed var(--theme-color-alt);
}

figure {
    text-align: center;
}

hr {
    border: none;
    border-top: 1px dashed var(--theme-color-alt);
    max-width: 450px;
}

.small {
    font-size: smaller;
}