/* IBM VGA 8x16 by VileR, CC BY-SA 4.0. See fonts/ATTRIBUTION.txt. */
@font-face {
  font-family: 'IBM VGA 8x16';
  src: url('fonts/WebPlus_IBM_VGA_8x16.woff') format('woff');
  font-display: swap;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 16px;
  display: grid;
  place-items: center;
  background: #000;
  color: #aaa;
  font: 16px/1 'IBM VGA 8x16', monospace;
}

main {
  max-width: 100%;
  opacity: 0;
  animation: reveal 1ms 150ms step-end forwards;
}

h1, b, a {
  color: #fff;
  text-transform: uppercase;
}

h1 {
  display: inline;
  margin: 0;
  font: inherit;
  font-weight: 700;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

a { text-decoration: none; }

.chunk {
  opacity: 0;
  animation: reveal 1ms step-end forwards;
}

a:hover, a:focus-visible, a.active {
  color: #000;
  background: #fff;
  outline: 0;
}

.error { color: #f00; }
.severe { color: #fff; background: #f00; }

main::after {
  content: '█';
  display: block;
  margin-top: 16px;
  opacity: 0;
  animation: blink 1s var(--cursor-delay, 800ms) steps(1, end) infinite;
}

@keyframes reveal {
  to { opacity: 1; }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  main, .chunk, main::after {
    opacity: 1;
    animation: none;
  }
}