/* shared look for every page on eggi.fyi
   old-pc feel, but calm: no glow, no scanlines, softer green on near-black */
:root {
  --fg: #c9e8cf;      /* main text: pale phosphor green */
  --accent: #6fdc8c;  /* links, buttons, cursor */
  --dim: #6b7f70;     /* secondary text */
  --bg: #111312;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  color: var(--fg);
  font: 21px/1.4 "VT323", "Courier New", monospace;
  padding: 56px 20px 64px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 680px; margin: 0 auto; }
pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover, a:focus-visible { border-bottom-color: var(--accent); outline: none; }
.dim { color: var(--dim); }
.redact { background: var(--dim); color: var(--dim); border-radius: 1px; user-select: none; }
.cursor { display: inline-block; width: .55em; height: 1em; background: var(--accent); vertical-align: -.12em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* blog posts */
.post h1 { font-size: 1.6em; font-weight: normal; color: #eef7f0; margin: 1.2em 0 .1em; }
.post p, .post ul, .post ol, .post blockquote { max-width: 62ch; margin: 0 0 1em; }
.post h2 { font-size: 1.25em; font-weight: normal; color: #eef7f0; margin: 1.6em 0 .4em; }
.post blockquote { border-left: 2px solid var(--dim); padding-left: 1em; color: var(--dim); }
.post img { max-width: 100%; border-radius: 2px; }
.post code { background: #1c211e; padding: 0 .25em; border-radius: 2px; }

@media (max-width: 480px) { body { font-size: 18px; padding-top: 32px; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }