body {
    max-width: 36em; margin: auto;
    padding: 1em 1.618em;

    font-size: 1.3rem;
    line-height: 1.6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    overflow-wrap: break-word;
}

h1, h2, h3, .datestamp { line-height: 1.2; }

footer { margin-top: 2em; }
.datestamp { margin-bottom: 2em; }

p { text-align: justify; }

pre, code {
    font-size: 1rem;
    font-family: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Noto Mono", Menlo, Consolas, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

pre > code.hljs {
    margin: 0; padding: 0.5em 0.81em;
    line-height: 1.5;

    display: block;
    overflow-x: auto;
    white-space: pre-wrap;
}

a:link, a:visited, a:hover { text-decoration: none; }
a:link { color: #4263eb; } /* Open Color Indigo 7 */
a:visited { color : #5f3dc4; } /* Open Color Violet 9 */
a:hover { text-decoration: underline; }

/* from https://github.com/csstools/sanitize.css/blob/main/assets.css */
:where(iframe, img, input, video, select, textarea) {
    height: auto;
    max-width: 100%;
}

@media only screen and (prefers-color-scheme: light) {
    body { background-color: white; color: black; }
}
@media only screen and (prefers-color-scheme: dark) {
    body { background-color: black; color: white; }
}

/* iPhones up to 13 */
@media only screen and (max-device-width: 844px) {
    body {
        font-size: 1.1rem; line-height: 1.5;
        padding: 0.5em 0.81em;
    }
    p { text-align: left; }
    pre, code { font-size: 0.8rem; }
    pre > code.hljs { padding: 0.25em 0.4em; line-height: 1.4; }
}