:root {
  --black: #050505;
  --panel: #11100b;
  --gold: #ffd21a;
  --gold-muted: #e7b619;
  --gold-dark: #8d5b00;
  --gold-mid: #c78a00;
  --cream: #efe5c7;
  --orange: #ef6b20;
  --silver: #c0c0c0;
  --display: Impact, Anton, "Arial Black", sans-serif;
  --mono: "IBM Plex Mono", "Courier New", Courier, monospace;
  --serif: "Times New Roman", Times, serif;
  --foil: var(--gold) url("assets/gold-foil-tile.svg") repeat;
  --grit: var(--black) url("assets/black-grit-tile.svg") repeat;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: #050305;
  image-rendering: pixelated;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
  background:
    #050305
    url("assets/burgundy-noise-tile.png")
    repeat;
  background-size: 256px 256px;
  background-attachment: fixed;
  image-rendering: pixelated;
}

#root, .app {
  min-height: 100vh;
  background: transparent;
}

.site-shell {
  width: min(1220px, calc(100% - 32px));
  min-height: 100vh;
  margin: 8px auto;
  background: #030303;
  border: 1px solid #786000;
}

.boomer-page {
  width: 100%;
  margin: 0;
  background: var(--grit);
}

@media (max-width: 700px) {
  .site-shell {
    width: 100%;
    margin: 0;
    border-left: 0;
    border-right: 0;
  }
}

.mono { font-family: var(--mono); }

.pixel-art { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: var(--gold-muted); text-decoration: underline; }

.old-box {
  background: var(--panel);
}

.old-button {
  color: #000;
  background: var(--foil);
  border: 3px solid #6f4300;
  border-radius: 0;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.old-button:active { filter: brightness(0.92); }