/* imaginary.network — one font, one size, sixteen colours. Plain CSS so old browsers cope. */

@font-face {
  font-family: "IBM VGA 9x16";
  src: url("/fonts/Web437_IBM_VGA_9x16.woff") format("woff");
  font-display: block;
}

html, body { margin: 0; padding: 0; background: #000; }
body {
  color: #aaa;
  font-family: "IBM VGA 9x16", "Perfect DOS VGA 437", "Lucida Console", Consolas, monospace;
  font-size: 16px;
  line-height: 16px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}
[hidden] { display: none !important; }

/* 80 columns x 9px = 720px. the font is 9/16 em wide, so 80 columns = 45em */
.screen { width: 45em; margin: 0 auto; padding: 16px 0 32px; }

a { color: #fff; text-decoration: none; }
a:hover, a:focus { background: #0000aa; color: #fff; outline: none; }
b { font-weight: normal; }
p { margin: 0 0 16px; }
pre { margin: 0; font: inherit; }
h1 { margin: 0 0 16px; font: inherit; }
::selection { background: #aaa; color: #000; }

/* status line, like the one along the top of every DOS program */
.bar { background: #aaa; color: #000; display: flex; justify-content: space-between; padding: 0 1ch; margin-bottom: 16px; white-space: nowrap; }
.bar-l, .bar-c, .bar-r { display: inline-block; }
.bar-r { animation: link-pulse 2.6s steps(1, end) infinite; }

.art { white-space: pre; overflow: hidden; margin-bottom: 16px; }
.art .ln { display: inline; }

/* Deliberately tiny DOS-era movement: eyes wake, snow twinkles, and the pale visitors
   at the horizon drift in/out. Static ANSI and no-JS browsers merely see the base art. */
.art .eye { animation: eye-wake 4.4s steps(1, end) infinite; }
.art .tw1, .art .tw2, .art .tw3 { animation: snow-glint 3.8s steps(1, end) infinite; }
.art .tw2 { animation-delay: -1.1s; }
.art .tw3 { animation-delay: -2.35s; }
.art .gh1, .art .gh2, .art .gh3 { animation: ghost-signal 5.8s steps(1, end) infinite; }
.art .gh2 { animation-delay: -1.9s; }
.art .gh3 { animation-delay: -3.7s; }

@keyframes link-pulse { 0%, 76%, 100% { color: #000; } 77%, 82% { color: #0000aa; } }
@keyframes eye-wake { 0%, 66%, 100% { color: #ffff55; } 67%, 72% { color: #aa5500; } 73%, 75% { color: #ffff55; } }
@keyframes snow-glint { 0%, 56%, 100% { color: inherit; } 57%, 61% { color: #55ffff; } }
@keyframes ghost-signal { 0%, 17%, 100% { color: #aaa; opacity: .35; } 18%, 26% { color: #55ffff; opacity: .8; } 27%, 32% { color: #fff; opacity: .45; } }

.body { padding: 0 1ch; }
.axiom { color: #777; }
.carrier { color: #aa0000; }


.out { padding: 0 1ch; white-space: pre-wrap; }
.out p { margin: 0 0 16px; }
.out .echo { color: #555; margin: 0; }
.out .hint { color: #aaa; margin: 0; }

.prompt { display: flex; padding: 0 1ch; margin-top: 16px; }
.ps { color: #aaa; margin-right: 1ch; white-space: nowrap; }
.prompt input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: #fff; caret-color: #aaa;
  font: inherit; line-height: 16px; height: 16px;
  border-radius: 0; outline: none; -webkit-appearance: none; appearance: none;
}

.credit { color: #555; padding: 0 1ch; margin-top: 48px; }
.credit a { color: #555; }
.credit a:hover, .credit a:focus { color: #fff; }

/* the slow modem: hidden rows are revealed by term.js, and the class is removed after 5s no matter what */
.dialing .art .ln, .dialing .body, .dialing .prompt, .dialing .credit { visibility: hidden; }
.dialing .art .ln.on { visibility: visible; }

/* narrow screens: the art scales to fit (blurry, but whole); text wraps at a readable size */
@media (max-width: 736px) {
  .screen { width: auto; padding: 8px 0 24px; }
  .art { font-size: 2.2vw; line-height: 1; }
  .bar-c { display: none; }
  .credit { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .dialing .art .ln, .dialing .body, .dialing .prompt, .dialing .credit { visibility: visible; }
  .bar-r, .art .eye, .art .tw1, .art .tw2, .art .tw3, .art .gh1, .art .gh2, .art .gh3 { animation: none; }
}

/* VGA palette */
.f0{color:#000}.f1{color:#0000aa}.f2{color:#00aa00}.f3{color:#00aaaa}.f4{color:#aa0000}.f5{color:#aa00aa}.f6{color:#aa5500}.f7{color:#aaaaaa}
.f8{color:#555555}.f9{color:#5555ff}.f10{color:#55ff55}.f11{color:#55ffff}.f12{color:#ff5555}.f13{color:#ff55ff}.f14{color:#ffff55}.f15{color:#ffffff}
.b0{background:#000}.b1{background:#0000aa}.b2{background:#00aa00}.b3{background:#00aaaa}.b4{background:#aa0000}.b5{background:#aa00aa}.b6{background:#aa5500}.b7{background:#aaaaaa}
.b8{background:#555555}.b9{background:#5555ff}.b10{background:#55ff55}.b11{background:#55ffff}.b12{background:#ff5555}.b13{background:#ff55ff}.b14{background:#ffff55}.b15{background:#ffffff}