@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

:root {
  --gold: #ffe11a;
  --green: #16ff7a;
  --red: #ff3b53;
  --blue: #4fc3ff;
  --meme: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  font-family: var(--meme);
  color: #fff;
  text-align: center;
  /* meme background — a light scrim so the image stays LOUD and visible.
     class .stonks / .not-stonks (set inline + by JS) swaps the image. */
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #05060a;
}

body.stonks {
  background-image:
    linear-gradient(rgba(2,8,4,.35), rgba(2,8,4,.62)),
    url(../stonks.png);
}
body.not-stonks {
  background-image:
    linear-gradient(rgba(10,2,4,.35), rgba(10,2,4,.62)),
    url(../not_stonks.png);
}

@media (max-width: 640px) {
  body {
    background-position: center top, left top;
    background-size: auto, min(430px, 100vw) auto;
    background-repeat: no-repeat, repeat;
    background-attachment: scroll;
  }
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

.date, .kicker, .cap-sub, .cap-meta, .foot {
  text-shadow:
    0 2px 4px rgba(0,0,0,.85),
    0 0 10px rgba(0,0,0,.55);
}

.counter {
  margin: 0;
  display: flex;
  justify-content: center;
  line-height: .9;
}
.counter .num {
  font-size: clamp(140px, 36vw, 380px);
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  animation: pop 1.6s ease-in-out infinite;
}
@keyframes pop { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04) } }

.date {
  margin: 0;
  font-size: clamp(16px, 3.2vw, 30px);
  letter-spacing: .06em;
  color: #fff;
}
.date .ticker { color: var(--green); }

/* prediction */
.prediction { margin-top: 36px; }

.kicker {
  margin: 0 0 2px;
  font-size: clamp(16px, 3.4vw, 30px);
  letter-spacing: .04em;
  color: #fff;
}

.cap {
  margin: 0;
  font-size: clamp(72px, 18vw, 200px);
  font-weight: 700;
  line-height: .9;
  color: var(--green);
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

body.not-stonks .cap { color: var(--red); }
.cap.err { color: var(--red); font-size: clamp(40px, 9vw, 90px); }

.cap-sub {
  margin: 12px auto 0;
  max-width: 640px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(12px, 2.4vw, 16px);
  letter-spacing: .02em;
  color: #e9edf5;
  text-transform: lowercase;
}

.cap-meta {
  margin: 10px 0 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(10px, 2vw, 13px);
  color: #cfd6e4;
}

.foot {
  margin-top: 40px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #cfd6e4;
  text-transform: lowercase;
}
.foot a { color: var(--gold); }