/* ================================================================
   GARY.COM — global retro styles
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, marquee { max-width: 100%; }

body {
  margin: 0;
  padding: 16px;
  background: #000080 url('../img/bg/1.jpg.webp') repeat;
  color: #ffff00;
  font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 18px;
  text-align: center;
  cursor: url('../img/decor/cursor.png'), auto;
}

h1, h2, h3 {
  font-family: "Impact", "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive;
  text-shadow: 3px 3px 0 #ff00ff, 6px 6px 0 #00ffff;
}

h1 { color: #ff00ff; font-size: 64px; margin: 8px 0; }
h2 { color: #00ff00; font-size: 40px; }
h3 { color: #ffff00; font-size: 28px; }

@media (max-width: 600px) {
  body { padding: 8px; font-size: 16px; }
  h1 { font-size: 36px; text-shadow: 2px 2px 0 #ff00ff, 4px 4px 0 #00ffff; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  .gallery img { max-width: 100%; }
  table.retro { width: 100%; box-sizing: border-box; }
}

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

hr { border: 0; height: 6px; background: url('../img/decor/flames-divider.gif') repeat-x; }

/* ---- tables used for that chaotic layout feel ---- */
table.retro {
  margin: 16px auto;
  border: 4px ridge #ff00ff;
  background: rgba(255, 0, 255, 0.3);
  padding: 8px;
}

/* ---- blinking text (replaces deprecated <blink>) ---- */
@keyframes blink { 50% { opacity: 0; } }
.blink { animation: blink 1s step-end infinite; }

/* ---- rainbow text ---- */
@keyframes rainbow {
  0%   { color: #ff0000; }
  16%  { color: #ff8800; }
  33%  { color: #ffff00; }
  50%  { color: #00ff00; }
  66%  { color: #00ffff; }
  83%  { color: #0088ff; }
  100% { color: #ff00ff; }
}
.rainbow { animation: rainbow 2s linear infinite; font-weight: bold; }

/* ---- marquee CSS fallback (if <marquee> is ever dropped) ---- */
@keyframes marquee-scroll {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
.marquee-fallback {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.marquee-fallback > span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 15s linear infinite;
}

/* ---- under construction box ---- */
.construction {
  display: inline-block;
  border: 4px dashed #ffff00;
  padding: 12px;
  margin: 16px;
  background: #000;
}

/* ---- webring / button strip ---- */
.webring { margin: 24px 0; text-align: center; }
.webring img { margin: 2px; image-rendering: pixelated; }
.illuminati-title { font-size: 32px; font-weight: bold; text-align: center; margin: 12px 0; }
.webring-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 8px;
  justify-content: center;
  justify-items: center;
}
@media (min-width: 900px) {
  .webring-grid { grid-template-columns: repeat(4, auto); }
}
@media (max-width: 600px) {
  .illuminati-title { font-size: 24px; }
  .webring-grid img { width: 45vw; height: 45vw; max-width: 200px; max-height: 200px; }
}

/* ---- cursor trail sparkle ---- */
.sparkle {
  position: fixed;
  pointer-events: none;
  width: 16px; height: 16px;
  z-index: 9999;
  animation: sparkle-fade 0.8s linear forwards;
}
@keyframes sparkle-fade {
  from { opacity: 1; transform: scale(1) rotate(0deg); }
  to   { opacity: 0; transform: scale(0.2) rotate(180deg); }
}

/* ---- gallery chaos grid ---- */
.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gallery img {
  border: 6px ridge #00ffff;
  max-width: 300px;
  transform: rotate(var(--rot, 0deg));
  background: #fff;
  padding: 4px;
}
.gallery img:nth-child(3n)   { --rot: -4deg; }
.gallery img:nth-child(3n+1) { --rot: 3deg; }
.gallery img:nth-child(3n+2) { --rot: -1deg; }

/* ---- footer ---- */
footer {
  margin-top: 40px;
  padding: 16px;
  border-top: 4px double #ff00ff;
  font-size: 14px;
  color: #00ff00;
}

/* ---- accessibility: honor reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .blink,
  .rainbow,
  .marquee-fallback > span,
  .sparkle { animation: none !important; }
  marquee { -webkit-marquee-play-count: 0; }
}