:root {
    --color: #222;
    --link-color: #00e;
    --visited-link-color: #551a8b;
    --bg-color: #fff;
    --bg-color-50: rgba(255, 255, 255, 0.5);
    --shadow-color: #000;
    --code-bg-color: #e8ebf4;
    --tortoise-url: url(/tortoise-donut-light-gray.png);
    --tortoise-url-2x: url(/tortoise-donut-light-gray@2x.png);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color: #fff;
        --link-color: rgb(131, 156, 255);
        --visited-link-color: #c597f0;
        --shadow-color: #888;
        --bg-color: #222;
        --bg-color-50: rgba(34, 34, 34, 0.5);
        --code-bg-color: #34363e;
        --tortoise-url: url(/tortoise-donut-dark-gray.png);
        --tortoise-url-2x: url(/tortoise-donut-dark-gray@2x.png);
    }
}

html {
    min-height: 100%;
    /* Explicitly specifying the height is required for body's min-height to
       apply to anything. However this also means html is no longer sized based
       on the content (parent and child heights can't both depend on each
       other). That means anchoring backgrounds on the "bottom" is weird, so
       remove the ctlfish background.

       TODO: Play with flexbox which might handle this better? */
    height: 100%;
    color: var(--color);
    background: var(--bg-color) right top no-repeat var(--tortoise-url);
    background-image: image-set(var(--tortoise-url) 1x, var(--tortoise-url-2x) 2x);
    background-position: right top;
}

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

body {
    /* Use border-box sizing so 100% below is handled correctly. */
    box-sizing: border-box;
    max-width: 732px;
    max-width: calc(700px + 2em);
    min-height: 100%;
    /* The no-op +/- 1px disables margin collapsing. */
    margin: -1px auto;
    padding: 1px 1em;
    background-color: var(--bg-color-50);
    box-shadow: 0 0 4px var(--shadow-color);
    line-height: 1.5;
}

h1, h2 {
    border-bottom: 1px solid var(--color);
    margin-bottom: 5px;
    line-height: normal;
}
h2 {
    font-size: 120%;
}

.pfft {
    clear: both;
    margin: 0;
    padding: 0;
}

#icon {
    margin: 2.25em auto 0 auto;
    border-radius: 50%;
    display: block;
    clear: both;
}
.center {
    text-align: center;
}

.links {
    float:right;
    margin: 0;
}

.byline {
    text-align: right;
    font-style: italic;
}

.update {
    font-style: italic;
}

code {
    background-color: var(--code-bg-color);
    border-radius: 0.2em;
    padding: 0.2em;
    text-wrap: nowrap;
}

pre.code {
    background-color: var(--code-bg-color);
    padding: 0.8em;
    border-radius: 0.3em;
    overflow-x: auto;
}

.thumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

img.thumb {
    border-radius: 0.8em;
    margin: 0.3em;
}

math[display="block"] {
    overflow-x: auto;
}

@font-face {
    font-family: STIX Two Math;
    src: local("STIXTwoMath-Regular"), url("/fonts/STIXTwoMath-Regular.woff2") format("woff2");
    font-display: swap;
}

math {
    font-family: STIX Two Math;
}