:root {
    --bg: #0c0c0c;
    --text: #e8e8e8;
    --dim: #9a9a9a;
    --prompt: #7ee787;
    --path: #79c0ff;
    --rule: #262626;
    --code-bg: #161616;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--bg); }

body {
    color: var(--text);
    font: 400 clamp(14px, 3.5vw, 17px)/1.7 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    padding: clamp(16px, 5vw, 48px);
}

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 8px;
    top: 8px;
    background: var(--text);
    color: var(--bg);
    padding: 4px 8px;
    z-index: 5;
}

.site-header, main { max-width: 72ch; }

.site-header { margin-bottom: 2.2em; }
.site-header p { margin: 0; overflow-wrap: anywhere; }
.site-header .prompt a { text-decoration: none; color: inherit; }
.user { color: var(--prompt); }
.path { color: var(--path); }
.cmd { color: var(--text); }
.dim { color: var(--dim); }

nav { margin-top: 0.4em; color: var(--dim); }
nav a { margin-right: 1.1em; }

a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--dim);
    text-underline-offset: 3px;
}
a:hover, a:focus-visible {
    color: var(--bg);
    background: var(--text);
    text-decoration: none;
    outline: none;
}

h1, h2, h3 { line-height: 1.35; margin: 1.6em 0 0.5em; font-weight: 600; }
.page-title { font-size: 1.25em; margin-top: 0; }
.post-title { font-size: 1.2em; margin: 0 0 0.3em; }
.post-title a { text-decoration-color: transparent; }
.post-title a:hover, .post-title a:focus-visible { text-decoration: none; }
.post-title .ext { color: var(--dim); }

.post { padding: 0 0 1.8em; margin: 0 0 1.8em; border-bottom: 1px solid var(--rule); }
.post-body > :first-child { margin-top: 0; }
.post-body p, .post-body ul, .post-body ol { margin: 0.8em 0; }
.post-body h2 { font-size: 1.1em; }
.post-body h3 { font-size: 1em; }
.post-body ul, .post-body ol { padding-left: 1.6em; }
.post-body blockquote {
    margin: 1em 0;
    padding: 0 0 0 1.2em;
    border-left: 2px solid var(--dim);
    color: var(--dim);
}
.post-body blockquote p { margin: 0; }
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 3px; }

figure { margin: 1em 0; }
img { display: block; max-width: 100%; height: auto; border-radius: 2px; }

.meta { color: var(--dim); font-size: 0.88em; margin: 0.8em 0 0; overflow-wrap: anywhere; }
.meta a { color: var(--dim); }
.meta a:hover, .meta a:focus-visible { color: var(--bg); }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { margin: 0.4em 0; }
ul.plain time { color: var(--dim); margin-right: 1em; white-space: nowrap; }

.pager { display: flex; justify-content: space-between; gap: 1em; }

/* Pagefind search box, themed to match */
#search {
    --pagefind-ui-scale: 0.95;
    --pagefind-ui-primary: #7ee787;
    --pagefind-ui-text: #e8e8e8;
    --pagefind-ui-background: #0c0c0c;
    --pagefind-ui-border: #3a3a3a;
    --pagefind-ui-tag: #161616;
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 2px;
    --pagefind-ui-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}