/* A deliberately small palette: neutral greys, plus one accent taken from the
   illustration's glow. If the illustration changes, retune --glow only. */
:root {
  color-scheme: dark;
  --night: #1e2122;  /* page */
  --well: #2a2e30;   /* code and table backgrounds */
  --muted: #8c9596;  /* dates, quiet text */
  --text: #e2e6e5;   /* text */
  --glow: #45d6e4;   /* the one accent: links, hover, headings, figures */
  --font: 15px/1.7 "DM Mono", ui-monospace, Menlo, monospace;
}

/* The page */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--night); color: var(--text); font: var(--font); }
::selection { background: var(--glow); color: var(--night); }
/* Whatever is on the page sits in the middle; once it's taller than the screen it starts at the top and scrolls */
main { flex: 1 0 auto; padding: 24px 16px;
       display: flex; align-items: center; justify-content: center; }
.content { width: 100%; max-width: 68ch; }

a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover, a:focus-visible { color: var(--glow); outline: none; }

/* Home: the illustration beside the post list; stacked on narrow screens */
.home { display: flex; align-items: center; justify-content: center; gap: 4ch; }
.portrait { flex: none; width: 200px; height: auto; border-radius: 8px; }
@media (max-width: 600px) {
  .home { flex-direction: column; gap: 2em; }
  .portrait { width: min(180px, 50vw); }
}

/* Post list */
.index { list-style: none; margin: 0; padding: 0; width: fit-content; }
.index li { display: flex; gap: 2ch; margin-bottom: .5em; }
.index span { color: var(--muted); }
.index .feed { margin-top: 1.5em; color: var(--muted); }

/* A post's title, date and back link */
.cover { text-align: center; margin-bottom: 2em; }
.cover p { color: var(--muted); }
.cover b { color: var(--text); font-weight: 500; }

/* Post text */
.prose a { color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover, .prose a:focus-visible { color: var(--text); }
.prose h2, .prose h3 { font-size: 1em; font-weight: 500; color: var(--glow); margin: 2.5em 0 .5em; }
.prose img { display: block; margin: 1.5em auto; max-width: 100%; border-radius: 8px; }
.prose blockquote { margin: 1.5em 0; padding-left: 2ch; border-left: 2px solid var(--glow); font-style: italic; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 500; }
pre, code { font-family: inherit; }
:not(pre) > code { background: var(--well); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
pre { padding: 14px 18px; background: var(--well); border-radius: 8px; overflow-x: auto; }
table { border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--well); padding: 4px 12px; text-align: left; }
th { color: var(--muted); font-weight: 500; }

/* The end of a post: the like button and the Hacker News link */
.react { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1em 3ch;
         margin-top: 3em; color: var(--muted); }
.react form { display: flex; align-items: center; gap: 2ch; }
.react button { font: inherit; color: var(--glow); background: var(--well); border: 1px solid transparent;
                border-radius: 999px; padding: 4px 16px; cursor: pointer; transition: border-color .15s; }
.react button:hover, .react button:focus-visible { border-color: var(--glow); outline: none; }
.react button:disabled { cursor: default; border-color: transparent; }