:root {
    --color-background: #ecf0e9;
    --color-foreground: #000000;
    --color-subtle: #616060;
    --color-blue: #0e9998;
    --color-yellow: #e6bd1c;
    --color-pink: #d1437f;
    --sans:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    --spacing-025: 2px;
    --spacing-050: 4px;
    --spacing-100: 8px;
    --spacing-150: 12px;
    --spacing-200: 16px;
    --spacing-300: 24px;
    --spacing-400: 32px;
    --spacing-1200: 96px;
    --spacing-3000: 240px;
}

/* Accessibility */
*:focus:not(:focus-visible),
*::before:focus:not(:focus-visible),
*::after:focus:not(:focus-visible) {
    outline: none;
}

/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
.visually-hidden {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}

/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
.plain-list {
    list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
    padding-left: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

body {
    color: var(--color-foreground);
    background-color: var(--color-background);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    padding: 1px 0 0 0;
    margin: 0;
    position: relative;

    /*&:before {
        content: "";
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
        background-repeat: repeat;
        background-size: 182px;
        opacity: 0.12;
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }*/
}

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

main,
header,
footer {
    padding-left: 10vw;
    padding-right: 10vw;
}

header {
    ul {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
    }

    li:nth-child(1) {
        flex-grow: 1;
        flex-basis: 100%;

        a {
            color: var(--color-pink);
            font-weight: 600;
            font-size: 1.4rem;
            text-decoration: none;
        }
    }
}

main {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

footer {
    font-size: 0.875rem;
    padding-top: var(--spacing-100);
    padding-bottom: var(--spacing-100);
    color: var(--color-subtle);

    > * + * {
        margin-left: 1em;
    }
}

blockquote {
    border-left: 4px solid var(--color-yellow);
    padding-left: 1em;
    margin-left: 0;
}

img {
    max-width: 100%;
}

pre {
    padding: var(--spacing-100) var(--spacing-150);
    font-family: monospace, monospace;
    margin: 2em 0;
}

table {
    width: 60% !important;
    border-collapse: collapse;
    margin: 2em auto;

    th,
    td {
        margin: 0;
        padding: var(--spacing-100) var(--spacing-150);

        p {
            margin: 0;
        }
    }

    td[rowspan] {
        vertical-align: top !important;
    }

    th {
        background-color: #c6ccc4;
    }

    tbody {
        tr {
            td {
                border-bottom: 1px solid #d9ded7;
            }
        }
        tr:nth-child(even) td:not([rowspan]) {
            background-color: #dce3da;
        }
    }
}

/* Content */
.bio-photo {
    display: block;
    aspect-ratio: 1;
    width: 300px;
    max-width: 70vw;
    margin: 0 auto;
    border: 4px solid var(--color-yellow);
    border-radius: 100%;
}

.bio {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.3;
}

.post {
    max-width: 50em;
}

.figure {
    margin: 2em auto;
}

/* Markdown not formatting correctly, image captions in separate p tag */
.caption + p {
    font-style: italic;
    color: var(--color-subtle);
}

@media (min-width: 1024px) {
    header {
        ul {
            align-items: baseline;
        }

        li:nth-child(1) {
            flex-grow: 1;
            flex-basis: unset;

            a {
                font-size: 2rem;
            }
        }

        li:nth-child(n + 1) {
            align-self: flex-end;
        }
    }

    .bio-photo {
        margin-top: 2em;
        margin-bottom: 3em;
    }

    .bio {
        font-size: 2rem;
        line-height: 1.2;
    }
}