/* gibbyfarts.com :: a loving war crime against web design, circa 1998 */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --hot: #ff00ff;
  --acid: #00ff00;
  --cyber: #00ffff;
  --gold: #ffff00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  color: #fff;
  text-align: center;
  /* tiled "starfield on black" — the only acceptable 1998 background */
  background-color: #000033;
  background-image:
    radial-gradient(circle, #fff 1px, transparent 1.5px),
    radial-gradient(circle, var(--cyber) 1px, transparent 1.5px);
  background-size: 90px 90px, 140px 140px;
  background-position: 0 0, 45px 45px;
  overflow-x: hidden;
}

/* ---------------- marquee ---------------- */
.marquee-bar {
  background: var(--hot);
  color: #000;
  font-weight: bold;
  border-bottom: 4px ridge var(--gold);
  padding: 4px 0;
  font-family: "Courier New", monospace;
}

/* ---------------- header / wordart ---------------- */
.hero { padding: 24px 12px 8px; }
.wordart {
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: clamp(40px, 11vw, 96px);
  margin: 0;
  letter-spacing: 2px;
  background: linear-gradient(180deg, var(--gold), #ff8800 40%, #cc0000 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px #000;
  text-shadow: 4px 4px 0 var(--hot);
  transform: rotate(-2deg);
  animation: wob 4s ease-in-out infinite;
}
@keyframes wob { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }

.tagline { color: var(--acid); font-size: clamp(14px,3.5vw,22px); margin: 8px; }
.established { color: var(--cyber); font-style: italic; margin: 0; }

/* ---------------- the blink tag, reborn ---------------- */
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------------- global counter ---------------- */
.counter-zone {
  margin: 24px auto;
  max-width: 520px;
  padding: 14px;
  border: 5px ridge var(--gold);
  background: #000;
  box-shadow: 0 0 24px var(--acid);
}
.counter-label { color: var(--gold); font-weight: bold; letter-spacing: 1px; }
.odometer {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: clamp(28px, 9vw, 64px);
  color: var(--acid);
  background: #001100;
  border: 3px inset #004400;
  padding: 10px;
  margin: 8px 0;
  text-shadow: 0 0 12px var(--acid);
  letter-spacing: 4px;
}
.counter-sub { color: var(--hot); font-weight: bold; }

/* ---------------- the sacred big button ---------------- */
.big-button-zone { margin: 30px 12px; }
.big-fart-btn {
  font-family: inherit;
  cursor: pointer;
  border: 6px outset #aa0000;
  border-radius: 50%;
  width: min(70vw, 240px);
  height: min(70vw, 240px);
  background: radial-gradient(circle at 35% 30%, #ff5555, #cc0000 60%, #660000);
  color: #fff;
  box-shadow: 0 10px 0 #440000, 0 0 40px var(--hot);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.05s;
  animation: pulse 1.6s ease-in-out infinite;
}
.big-fart-btn:active { transform: translateY(8px); box-shadow: 0 2px 0 #440000, 0 0 40px var(--hot); }
.bf-emoji { font-size: clamp(40px, 14vw, 80px); }
.bf-text { font-weight: bold; font-size: clamp(11px, 3vw, 16px); }
@keyframes pulse { 0%,100%{box-shadow:0 10px 0 #440000,0 0 30px var(--hot)} 50%{box-shadow:0 10px 0 #440000,0 0 60px var(--gold)} }

.caption {
  margin-top: 18px;
  min-height: 1.6em;
  font-size: clamp(18px, 5vw, 28px);
  font-weight: bold;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000;
}
.caption.pop { animation: pop 0.4s ease-out; }
@keyframes pop { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.25)} 100%{transform:scale(1);opacity:1} }

/* ---------------- soundboard ---------------- */
.section-head {
  font-family: "Impact", sans-serif;
  font-size: clamp(24px, 6vw, 40px);
  color: var(--cyber);
  text-shadow: 3px 3px 0 var(--hot);
  margin: 30px 0 4px;
}
.section-sub { color: #ccc; margin: 0 0 16px; font-style: italic; }
.soundboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.sb-btn {
  font-family: inherit;
  font-size: clamp(14px, 3.5vw, 18px);
  font-weight: bold;
  cursor: pointer;
  padding: 18px 10px;
  color: #000;
  border: 4px outset #fff;
  background: linear-gradient(180deg, var(--gold), #ffaa00);
  box-shadow: 0 0 14px var(--gold);
  transition: transform 0.06s;
}
.sb-btn:nth-child(even) { background: linear-gradient(180deg, var(--cyber), #0088ff); box-shadow: 0 0 14px var(--cyber); }
.sb-btn:hover { transform: scale(1.05) rotate(-1deg); }
.sb-btn:active { transform: scale(0.95); border-style: inset; }

/* ---------------- links / guestbook ---------------- */
.links-zone, .guestbook-zone { margin: 36px auto; max-width: 560px; padding: 0 16px; }
.cool-links { list-style: none; padding: 0; font-size: clamp(15px,4vw,20px); line-height: 2; }
.cool-links a { color: var(--cyber); }
.cool-links a:visited { color: var(--hot); }
.guestbook-zone { border: 4px dashed var(--acid); padding: 16px; background: #000; }
.gb-entries { text-align: left; color: #ddd; }
.gb-entries b { color: var(--gold); }

/* ---------------- footer ---------------- */
.footer { margin-top: 40px; padding: 20px; border-top: 4px ridge var(--gold); background: #000; }
.badge { height: 31px; margin: 0 4px; image-rendering: pixelated; }
.copyright { color: #888; font-size: 12px; }
.webcounter { font-family: "Courier New", monospace; color: var(--acid); }

/* ---------------- MEGA FART screen quake ---------------- */
.quake { animation: quake 0.12s linear infinite; }
@keyframes quake {
  0%{transform:translate(2px,1px) rotate(0.3deg)}
  25%{transform:translate(-3px,2px) rotate(-0.4deg)}
  50%{transform:translate(2px,-2px) rotate(0.2deg)}
  75%{transform:translate(-2px,1px) rotate(-0.3deg)}
  100%{transform:translate(1px,-1px) rotate(0.2deg)}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}