/* Digital Reality: the look of the BBS itself. CGA colours, a VGA font (from the web client)
   and 80 columns at most. */

@font-face {
  font-family: "UVGA";
  src: url("/client/UVGA16.woff") format("woff");
  font-display: swap;
}

:root {
  --black: #000000;
  --blue: #0000aa;
  --cyan: #00aaaa;
  --gray: #aaaaaa;
  --dark: #555555;
  --bright-blue: #5555ff;
  --bright-cyan: #55ffff;
  --white: #ffffff;
  --yellow: #ffff55;
  --green: #55ff55;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  margin: 0;
  background: var(--black);
  color: var(--gray);
  font-family: "UVGA", "Courier New", monospace;
  font-size: 18px;
  line-height: 1.25;
}

main {
  max-width: 82ch;
  margin: 0 auto;
  padding: 2rem 16px 3rem;
}

/* The banner of the welcome screen; it shrinks with narrow windows instead of scrolling. */
.banner {
  margin: 0 0 0 6ch;
  font: inherit;
  font-size: min(18px, 3.6vw);
  line-height: 1;
  white-space: pre;
}

.c1 { color: var(--blue); }
.c3 { color: var(--cyan); }
.c7 { color: var(--gray); }
.c8 { color: var(--dark); }
.c11 { color: var(--bright-cyan); }
.c15 { color: var(--white); }

/* The blue bar below the banner: half blocks above and below, as in the art. */
.bar { display: block; margin: 1em 0 1.5em; }
.bar .edge { display: block; height: 0.3em; background: var(--blue); }
.bar .edge.top { margin-top: 0.2em; }
.bar .label {
  display: flex;
  padding: 0.15em 3ch;
  background: var(--blue);
  color: var(--white);
}
.bar .label b { font-weight: normal; }
.bar .right { margin-left: auto; color: var(--cyan); }

h1 {
  margin: 1.6em 0 0.5em;
  color: var(--bright-cyan);
  font-size: 1em;
  font-weight: normal;
}
h1::after {
  content: "";
  display: block;
  margin-top: 0.3em;
  border-bottom: 1px solid var(--dark);
}

p { margin: 0 0 0.9em; max-width: 78ch; }
b { color: var(--white); font-weight: normal; }

a { color: var(--green); text-decoration: none; }
a:hover, a:focus-visible { color: var(--white); text-decoration: underline; }

/* The connect menu: a lightbar, as on the BBS. */
.menu { display: flex; flex-direction: column; margin: 0 0 0.5em; max-width: 60ch; }
.menu a {
  display: flex;
  gap: 2ch;
  padding: 0.1em 1ch;
  color: var(--gray);
  background: var(--black);
  text-decoration: none;
  outline: none;
}
.menu a .key { color: var(--white); }
.menu a .where { margin-left: auto; color: var(--dark); }
.menu a.focus, .menu a:hover, .menu a:focus-visible {
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
}
.menu a.focus .where, .menu a:hover .where, .menu a:focus-visible .where { color: var(--bright-cyan); }

.hint { color: var(--dark); font-size: 0.9em; }

/* The 404 page: a DOS prompt that cannot find the page. */
.dos {
  margin: 0 0 1em;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dos .cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .dos .cursor { animation: none; } }

.list { margin: 0; padding: 0; list-style: none; }
.list li { margin: 0 0 0.3em; padding-left: 2ch; text-indent: -2ch; }
.list li::before { content: "* "; color: var(--white); }

footer {
  margin-top: 3em;
  padding-top: 0.5em;
  border-top: 1px solid var(--dark);
  color: var(--dark);
  font-size: 0.9em;
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .banner { margin-left: 0; }
  .menu a { flex-wrap: wrap; gap: 0 2ch; }
  .menu a .where { margin-left: 3ch; flex-basis: 100%; }
}