/* ============================================================
   HIRE THE WEB TEAM — official stylesheet, est. 1996 (allegedly)
   A loving recreation of the golden age of the web, built on
   thoroughly modern CSS. The joke is the point.
   ============================================================ */

:root {
  --neon-green: #00ff00;
  --neon-pink: #ff00ff;
  --neon-cyan: #00ffff;
  --neon-yellow: #ffff00;
  --hot-red: #ff3300;
  --deep-space: #000022;
  --panel-grey: #c0c0c0;
  --panel-dark: #808080;
  --link-blue: #0000ee;
  --visited-purple: #551a8b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  color: var(--neon-green);
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--deep-space);
  /* Tiled starfield, rendered in pure CSS because we couldn't
     find stars.gif on the floppy disk */
  background-image:
    radial-gradient(1px 1px at 25px 35px, #fff, transparent),
    radial-gradient(1px 1px at 110px 80px, #ffffffcc, transparent),
    radial-gradient(2px 2px at 60px 120px, #ffffcc, transparent),
    radial-gradient(1px 1px at 150px 20px, #ccffff, transparent),
    radial-gradient(1.5px 1.5px at 90px 160px, #fff, transparent),
    radial-gradient(1px 1px at 180px 140px, #ffccff, transparent);
  background-size: 200px 200px;
}

/* ---- Accessibility (they didn't have this in 1996, we do) ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--neon-yellow);
  color: #000;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  marquee {
    /* Politely ask the marquee to behave itself */
    -webkit-animation: none;
  }
  .blink, .rainbow-text, .flame-text, .spin, .construction-bar,
  .new-badge, .bounce { animation: none !important; }
}

/* ---- Layout ---- */
.page {
  max-width: 800px; /* Best viewed at 800x600, naturally */
  margin: 0 auto;
  padding: 12px;
}

/* ---- The sacred marquee zone ---- */
.marquee-bar {
  background: #000;
  border-top: 3px ridge var(--neon-pink);
  border-bottom: 3px ridge var(--neon-pink);
  color: var(--neon-yellow);
  font-weight: bold;
  padding: 4px 0;
}

/* ---- Header ---- */
.site-header {
  text-align: center;
  padding: 16px 0 8px;
}

.site-title {
  font-size: clamp(2rem, 7vw, 3.5rem);
  margin: 0;
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.rainbow-text {
  background-image: linear-gradient(90deg,
    #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0066ff, #cc00ff, #ff0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-slide 3s linear infinite;
}

@keyframes rainbow-slide {
  to { background-position: 200% center; }
}

.tagline {
  color: var(--neon-cyan);
  font-style: italic;
  margin: 4px 0 0;
}

/* ---- Blink: outlawed by browsers, resurrected by us ---- */
.blink { animation: blink-anim 1s steps(2, start) infinite; }
@keyframes blink-anim { to { visibility: hidden; } }

/* ---- Flaming text for VERY important headings ---- */
.flame-text {
  font-family: "Impact", "Arial Black", sans-serif;
  background-image: linear-gradient(0deg, #ff3300 20%, #ff9900 45%, #ffff66 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 100, 0, 0.45);
  animation: flicker 0.4s ease-in-out infinite alternate;
}
@keyframes flicker {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25); }
}

/* ---- Navigation: lovingly beveled like it's Windows 95 ---- */
.site-nav {
  margin: 12px 0;
  text-align: center;
}
.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.site-nav a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--panel-grey);
  color: #000;
  text-decoration: none;
  font-weight: bold;
  border: 3px outset #fff;
  font-family: "Verdana", "Geneva", sans-serif;
  font-size: 13px;
}
.site-nav a:hover { background: var(--neon-yellow); }
.site-nav a:active { border-style: inset; }
.site-nav a[aria-current="page"] {
  border-style: inset;
  background: var(--neon-cyan);
}

/* ---- Rainbow horizontal rule (RIP rainbow_bar.gif) ---- */
.rainbow-rule {
  height: 8px;
  border: none;
  margin: 18px 0;
  background-image: linear-gradient(90deg,
    #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0066ff, #cc00ff, #ff0000);
  background-size: 200% auto;
  animation: rainbow-slide 4s linear infinite;
}

/* ---- Content panels: outset borders forever ---- */
.panel {
  background: #000033;
  border: 4px ridge var(--neon-cyan);
  padding: 16px;
  margin: 16px 0;
}
.panel-pink { border-color: var(--neon-pink); }
.panel-yellow { border-color: var(--neon-yellow); }
.panel-green { border-color: var(--neon-green); }

.panel h2, .panel h3 {
  margin-top: 0;
  color: var(--neon-yellow);
  font-family: "Impact", "Arial Black", sans-serif;
  letter-spacing: 1px;
}

/* ---- The Grey Table Aesthetic ---- */
.win95-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  background: var(--panel-dark);
  border: 3px outset var(--panel-grey);
  font-family: "Verdana", "Geneva", sans-serif;
  font-size: 14px;
}
.win95-table caption {
  background: navy;
  color: #fff;
  font-weight: bold;
  padding: 6px;
  border: 3px outset var(--panel-grey);
  margin-bottom: 2px;
  font-family: "Verdana", sans-serif;
}
.win95-table th {
  background: navy;
  color: #fff;
  padding: 8px;
  text-align: left;
}
.win95-table td {
  background: var(--panel-grey);
  color: #000;
  padding: 8px;
  vertical-align: top;
}
.win95-table tr:nth-child(even) td { background: #d4d0c8; }

/* ---- Links: classic blue/purple, as the W3C intended ---- */
main a:link { color: #66aaff; }
main a:visited { color: #cc99ff; }
main a:hover { color: var(--neon-yellow); background: #330033; }

/* ---- Badges & counters ---- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
}
.badge {
  display: inline-block;
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 10px;
  border: 2px outset #fff;
  text-align: center;
  line-height: 1.3;
}
.badge-netscape { background: #003366; color: #fff; }
.badge-ie { background: #336699; color: #ffff99; }
.badge-html { background: #cc6600; color: #fff; }
.badge-y2k { background: #660000; color: #ffcc00; }
.badge-800 { background: #006633; color: #ccffcc; }

.new-badge {
  display: inline-block;
  background: var(--hot-red);
  color: var(--neon-yellow);
  font-family: "Arial Black", sans-serif;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 2px;
  transform: rotate(-8deg);
  animation: blink-anim 0.8s steps(2, start) infinite;
}

.hit-counter {
  text-align: center;
  margin: 20px 0;
  font-family: "Verdana", sans-serif;
  font-size: 12px;
  color: var(--neon-cyan);
}
.hit-counter .digits {
  display: inline-block;
  background: #000;
  color: #ff0000;
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 4px;
  padding: 4px 10px;
  border: 3px inset var(--panel-grey);
}

/* ---- Under construction ---- */
.construction {
  text-align: center;
  font-weight: bold;
  color: var(--neon-yellow);
  margin: 16px 0;
}
.construction-bar {
  height: 14px;
  margin: 6px auto;
  max-width: 420px;
  background: repeating-linear-gradient(
    -45deg, #ffcc00, #ffcc00 12px, #000 12px, #000 24px);
  border: 2px solid #000;
  animation: hazard-scroll 1.2s linear infinite;
  background-size: 34px 34px;
}
@keyframes hazard-scroll {
  to { background-position: 34px 0; }
}

/* ---- Misc retro garnish ---- */
.spin {
  display: inline-block;
  animation: spin-anim 3s linear infinite;
}
@keyframes spin-anim { to { transform: rotate(360deg); } }

.bounce {
  display: inline-block;
  animation: bounce-anim 0.7s ease-in-out infinite alternate;
}
@keyframes bounce-anim { to { transform: translateY(-6px); } }

.center { text-align: center; }

.big-cta {
  display: inline-block;
  font-family: "Impact", "Arial Black", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 1px;
  background: var(--hot-red);
  color: #fff !important;
  text-decoration: none;
  padding: 12px 28px;
  border: 5px outset #ff9999;
  margin: 8px 0;
}
.big-cta:hover { background: var(--neon-pink); color: #000 !important; }
.big-cta:active { border-style: inset; }

/* ---- Guestbook ---- */
.guestbook-entry {
  background: #fffff0;
  color: #000;
  border: 3px ridge var(--panel-grey);
  padding: 10px 14px;
  margin: 12px 0;
  font-family: "Times New Roman", serif;
}
.guestbook-entry .meta {
  font-family: "Verdana", sans-serif;
  font-size: 11px;
  color: #666;
  margin-top: 6px;
}

/* ---- Forms, Windows 95 chic ---- */
form.win95-form {
  background: var(--panel-grey);
  color: #000;
  border: 3px outset #fff;
  padding: 16px;
  font-family: "Verdana", sans-serif;
  font-size: 13px;
}
form.win95-form label { display: block; font-weight: bold; margin: 10px 0 2px; }
form.win95-form input,
form.win95-form textarea,
form.win95-form select {
  width: 100%;
  padding: 5px;
  border: 2px inset var(--panel-grey);
  background: #fff;
  font-family: "Verdana", sans-serif;
  font-size: 13px;
}
form.win95-form button {
  margin-top: 14px;
  padding: 8px 24px;
  font-weight: bold;
  background: var(--panel-grey);
  border: 3px outset #fff;
  cursor: pointer;
  font-family: "Verdana", sans-serif;
}
form.win95-form button:active { border-style: inset; }

/* ---- Footer ---- */
.site-footer {
  margin: 28px 0 12px;
  text-align: center;
  font-family: "Verdana", sans-serif;
  font-size: 12px;
  color: #99ccff;
}
.site-footer a:link { color: #66aaff; }
.site-footer a:visited { color: #cc99ff; }
.webring {
  margin: 14px 0;
  padding: 10px;
  border: 2px dashed var(--neon-pink);
  color: var(--neon-pink);
}

/* ---- Responsive (our one concession, don't tell anyone) ---- */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a { display: block; }
  .win95-table { font-size: 12px; }
}