@font-face { font-family: "Creepster"; src: url(/fonts/creepster.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; font-weight: 700; src: url(/fonts/cinzel-decorative-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 500; src: url(/fonts/cinzel-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; font-weight: 700; src: url(/fonts/cinzel-700.woff2) format("woff2"); font-display: swap; }

:root {
  --night: #0b0002;
  --blood: #e3141f;
  --blood-dark: #7a0710;
  --gold-1: #fff3c4;
  --gold-2: #f1cf72;
  --gold-3: #c9952f;
  --gold-4: #8a5f17;
  --text: #f6e9dc;
  --muted: #c8a99a;
  --gold-gradient: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 75%, var(--gold-4) 100%);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--night);
  color: var(--text);
  font-family: "Cinzel", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.gold {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Cinzel Decorative", "Cinzel", serif;
  font-weight: 700;
  filter: drop-shadow(0 2px 6px rgba(255, 180, 60, 0.35));
}
.red {
  font-family: "Creepster", serif;
  color: var(--blood);
  text-shadow: 0 0 18px rgba(255, 0, 0, 0.55), 0 3px 0 #000;
}