/* BRAINFUCKY - Shared 90s Stylesheet */

@keyframes rainbow {
  0%   { color: #ff0000; }
  16%  { color: #ff9900; }
  33%  { color: #ffff00; }
  50%  { color: #00ff00; }
  66%  { color: #00ffff; }
  83%  { color: #ff00ff; }
  100% { color: #ff0000; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(-3px,2px) rotate(-2deg); }
  50%  { transform: translate(2px,-2px) rotate(1deg); }
  75%  { transform: translate(-2px,-1px) rotate(-1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
@keyframes marquee { from { transform: translateX(100%);} to { transform: translateX(-100%);} }
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-15px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
@keyframes glow {
  0%,100% { text-shadow: 0 0 6px #ff00ff, 0 0 12px #ff00ff, 2px 2px 0 #000; }
  50%     { text-shadow: 0 0 14px #00ffff, 0 0 24px #00ffff, 2px 2px 0 #000; }
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes rainbowbg {
  0%   { background: #2a0000; }
  16%  { background: #2a1500; }
  33%  { background: #2a2a00; }
  50%  { background: #002a00; }
  66%  { background: #002a2a; }
  83%  { background: #2a002a; }
  100% { background: #2a0000; }
}

body {
  margin: 0;
  background-color: #000;
  background-image:
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,40,80,0.15) 3px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(0,40,80,0.15) 3px);
  color: #00ff00;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive, sans-serif;
  text-align: center;
  cursor: url('gifs/flame.gif'), auto;
  min-height: 100vh;
}

/* NAVIGATION BAR - classic 90s table-nav */
.navbar {
  background: #000080;
  border: 4px ridge #ff00ff;
  padding: 8px 0;
  margin: 0 0 16px 0;
  text-align: center;
}
.navbar a {
  color: #ffff00;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  padding: 4px 10px;
  margin: 0 2px;
  border: 2px outset #6666ff;
  background: #000040;
  text-shadow: 1px 1px 0 #000;
  display: inline-block;
}
.navbar a:hover {
  background: #ff00ff;
  color: #000080;
  border: 2px inset #fff;
}
.navbar a:visited { color: #00ffff; }
.navbar .here { background: #ff0000; color: #ffff00; border: 2px inset #fff; }

h1 {
  font-size: clamp(40px, 10vw, 120px);
  margin: 14px 0 6px;
  font-weight: 900;
  letter-spacing: 2px;
  animation: rainbow 2s linear infinite, glow 1.5s ease-in-out infinite;
  font-family: "Impact","Haettenschweiler","Arial Black",sans-serif;
}
h1 .b1 { animation: blink 0.4s step-start infinite; display:inline-block; }
h1 .b2 { animation: blink 0.7s step-start infinite; display:inline-block; }
h1 .b3 { animation: blink 0.3s step-start infinite; display:inline-block; }

h2 {
  font-size: clamp(24px, 5vw, 40px);
  animation: rainbow 3s linear infinite;
  text-shadow: 2px 2px 0 #000;
  font-family: "Comic Sans MS", cursive;
  margin: 12px 0 8px;
}

.tagline {
  font-size: clamp(14px, 3vw, 26px);
  color: #ffff00;
  text-shadow: 2px 2px 0 #800080, -1px -1px 0 #000;
  animation: rainbow 3s linear infinite;
  margin: 6px 0 10px;
  font-weight: bold;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #000080;
  color: #00ffff;
  border: 4px ridge #ff00ff;
  padding: 6px 0;
  margin: 14px auto;
  width: 92%;
  font-weight: bold;
  font-size: clamp(12px,2.5vw,20px);
}
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 12s linear infinite; }

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin: 18px auto;
  max-width: 1100px;
}
.box {
  background: rgba(0,0,40,0.6);
  border: 3px dashed #ff00ff;
  padding: 12px;
  color: #00ff00;
  width: min(340px, 90vw);
  text-align: left;
}
.box h3 {
  color: #ff9900;
  animation: blink 1s step-start infinite;
  font-family: "Comic Sans MS", cursive;
  text-align: center;
  font-size: 22px;
  margin: 4px 0 8px;
}
.box p { text-shadow: 1px 1px 0 #000; line-height: 1.5; font-size: 15px; }

.content {
  max-width: 780px;
  margin: 0 auto 24px;
  padding: 16px;
  text-align: left;
  background: rgba(0,0,40,0.5);
  border: 4px double #00ffff;
  color: #00ff00;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.6;
  font-size: 16px;
}
.content h2 { text-align: center; }
.content p { margin: 10px 0; }
.content ul { list-style: none; padding: 0; }
.content li { margin: 8px 0; padding-left: 24px; position: relative; }
.content li::before { content: "*"; position: absolute; left: 8px; color: #ff00ff; animation: blink 0.5s step-start infinite; }

.blink { animation: blink 0.6s step-start infinite; }
.shake { animation: shake 0.3s linear infinite; display:inline-block; }
.floaty { animation: floaty 4s ease-in-out infinite; display:inline-block; }
.spin { animation: spin 3s linear infinite; display:inline-block; }

a { color: #00ffff; text-decoration: underline; }
a:visited { color: #ff00ff; }
a:hover { color: #ffff00; background: #000080; }

hr.glow { border: 0; height: 4px;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #ff00ff, #ff0000);
  box-shadow: 0 0 10px #ff00ff;
  margin: 16px 0;
}

.counter {
  display:inline-block;
  background:#000; color:#00ff00;
  border:2px inset #888; padding:3px 8px;
  font-family:"Courier New",monospace; font-size:18px; letter-spacing:2px;
  text-shadow:0 0 5px #00ff00;
}

.badges { margin: 16px 0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.badge { display:inline-block; padding:4px 8px; border:2px outset #999;
  background:linear-gradient(#333,#000); color:#fff; font-size:11px; font-weight:bold; }

.construction { display:flex; justify-content:center; gap:10px; margin:14px 0; flex-wrap:wrap; }
.construction img { animation: shake 0.5s linear infinite; }

.giphy { text-align:center; margin: 14px 0; }

/* webring */
.webring {
  background: #000080;
  border: 3px ridge #ff9900;
  padding: 8px;
  margin: 16px auto;
  max-width: 500px;
  color: #ffff00;
  font-size: 13px;
}
.webring a { color: #00ffff; }

/* blinking star list */
.stardust { color: #ffff00; animation: blink 0.8s step-start infinite; }

/* big centered image */
.hero-img { text-align:center; margin: 16px 0; }
.hero-img img { border: none; }