:root { color-scheme: dark; }
html, body { height: 100%; }
body {
  margin: 0;
  background-color: #0b0b0b;
  /* retro checker pattern */
  background-image: linear-gradient(45deg, #141414 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #141414 75%),
                    linear-gradient(45deg, #141414 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #141414 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 0, 6px 6px, 6px 6px;
  color: #e6e6e6;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
a { color: #86c5ff; text-decoration: underline; }
a:visited { color: #c9a4ff; }
.container { width: 860px; max-width: 92vw; margin: 24px auto; background: #111; border: 1px solid #353535; padding: 16px 18px; }
hr { border: 0; border-top: 1px dashed #555; margin: 14px 0; }

header .site-title { margin: 4px 0 6px; font-size: 28px; letter-spacing: .5px; text-transform: uppercase; text-shadow: 1px 1px 0 #000; }
.tagline { color: #c0c0c0; font-size: 13px; margin-top: -4px; }
.nav { text-align: center; font-size: 14px; }
.nav a { padding: 0 8px; }

.hero { padding: 8px 0; }
.hero .welcome { font-size: 20px; font-weight: bold; }
.blink { animation: blinker 1s steps(1) infinite; }
@keyframes blinker { 50% { opacity: 0; } }

.marquee { background: #0f0f0f; border: 1px solid #303030; padding: 6px 8px; font-size: 18px; }
marquee { width: 100%; }

h2 { font-size: 18px; margin: 10px 0 6px; text-transform: uppercase; }
p { margin: 8px 0; }
.list { margin: 6px 0 10px 18px; }
.list li { margin: 6px 0; }

.box { border: 1px solid #303030; background: #101010; padding: 10px 12px; }
.two-col { display: block; }

footer { font-size: 12px; color: #bdbdbd; }