/* c0destuff.com: an amber phosphor terminal. For green phosphor, swap --ink, --dim and --bg for the commented values. */
:root {
  --ink: #FFB000;          /* green: #33FF66 */
  --dim: #B87A00;          /* green: #1FA347 */
  --bg: #0B0700;           /* green: #020A03 */
  --glow: 0 0 2px var(--ink), 0 0 8px color-mix(in srgb, var(--ink) 55%, transparent);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); text-shadow: var(--glow);
  font: 1.125rem/1.55 "Cascadia Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", ui-monospace, "Courier New", monospace;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ink) 7%, var(--bg)) 0%, var(--bg) 70%, #000 100%);
}
/* scanlines and a soft vignette over everything; they never catch clicks */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .55) 100%);
}
::selection { background: var(--ink); color: var(--bg); text-shadow: none; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover, a:focus-visible { background: var(--ink); color: var(--bg); text-shadow: none; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.screen { max-width: 46rem; margin: 0 auto; padding: 3rem 1rem 2.5rem; }
p { margin: 0 0 1rem; }
.boot { color: var(--dim); font-size: .95rem; }
h1 {
  font: inherit; font-size: clamp(2rem, 9vw, 3.25rem); font-weight: 700; letter-spacing: .04em;
  margin: 1.5rem 0 2rem; line-height: 1.1;
}
.cmd { margin: 1.75rem 0 .5rem; }
.prompt { color: var(--dim); }
.dir { margin: 0 0 1rem; }
.dir dt { font-weight: 700; }
.dir dd { margin: 0 0 0 2ch; }
.dir dd a { display: inline-block; margin-top: .25rem; }

.cursor { display: inline-block; width: 1ch; height: 1.1em; vertical-align: text-bottom; background: var(--ink); box-shadow: var(--glow); }
@media (prefers-reduced-motion: no-preference) {
  .cursor { animation: blink 1.06s steps(1) infinite; }
  .screen { animation: power-on .6s ease-out; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes power-on { from { opacity: 0; filter: brightness(2.5) blur(1px); } to { opacity: 1; filter: none; } }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px dashed var(--dim); color: var(--dim); font-size: .95rem; }
footer p { margin: 0 0 .4rem; }