/* Teletext page: black screen, Bedstead headings, readable system text for the body. */
@font-face {
  font-family: "Bedstead";
  src: url("bedstead.otf") format("opentype");
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --yellow: #ffff1a;
  --cyan: #1affff;
  --green: #1aff1a;
  --blue: #2133ff;
  --muted: #b8bccc;
  --display: "Bedstead", ui-monospace, "SF Mono", Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  padding-block: 32px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--display);
  font-size: 15px;
}

.header .page { color: var(--fg); }
.header .title { color: var(--yellow); flex: 1; }

.banner {
  background: var(--blue);
  color: var(--yellow);
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.1;
  padding: 8px 12px;
  margin: 8px 0 32px;
  transform: scaleY(1.3);
  transform-origin: top;
}

h2 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: normal;
  color: var(--green);
  margin: 40px 0 8px;
  letter-spacing: 0.04em;
}

p, li { color: var(--fg); }
ul { padding-left: 20px; }
li + li { margin-top: 4px; }

a { color: var(--cyan); }
a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.muted { color: var(--muted); }

footer {
  margin-top: 48px;
  font-family: var(--display);
  font-size: 14px;
  color: var(--muted);
}