:root {
  --bg:#080808;
  --fg:#eeeeee;
  --dim:#888888;
  --line:#555555;
  --accent:#ffffff;
}

* { box-sizing:border-box; }

html,body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "DejaVu Sans Mono",
    monospace;
}

body {
  display:flex;
  justify-content:center;
  padding:3vw;
}

.page {
  width:min(92vw, 720px);
  min-height:min(92vw, 720px);
  border:1px solid var(--line);
  padding:28px;
  overflow:auto;
}

pre {
  margin:0 0 24px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.35;
  font-family:inherit;
}

nav {
  border-top:1px solid var(--line);
  padding-top:18px;
  line-height:1.8;
}

a {
  color:var(--fg);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

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

@media (max-width:600px) {
  body { padding:8px; }
  .page { width:96vw; min-height:96vw; padding:18px; }
}