html { scroll-behavior: auto; }

body {
  margin: 0;
  min-height: 100vh;
  min-width: 920px;
  color: #00ff00;
  background: #000018 url("img/stars.svg") repeat;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.35;
  cursor: crosshair;
}

a { color: #00ffff; }
a:visited { color: #ff66ff; }
a:active, a:hover { color: #ffff00; }

.top-marquee {
  display: block;
  background: #000080;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: bold;
  font-size: 18px;
  padding: 4px 0;
  border-bottom: 4px ridge #c0c0c0;
}

.page {
  width: 900px;
  table-layout: fixed;
  margin: 12px auto 28px;
  background: #000033;
  border: 6px ridge #c0c0c0;
}

.construction {
  background: repeating-linear-gradient(
    45deg,
    #111 0 12px,
    #ffcc00 12px 24px
  );
  color: #000;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  padding: 4px 0;
}

.construction marquee {
  color: #000;
  font-weight: bold;
}

.construction .blink {
  background: #000;
  color: #ffcc00;
  padding: 0 6px;
}

.banner {
  background: #000080;
  border-color: #ffff00 #808000 #808000 #ffff00;
  color: #fff;
}

.fire {
  margin: 8px 0 4px;
  font-family: "Comic Sans MS", "Comic Sans", Impact, cursive;
  font-size: 56px;
  letter-spacing: 0.08em;
  line-height: 1;
  background: linear-gradient(#fff59a 0%, #ffcc00 25%, #ff6600 55%, #ff0000 80%, #660000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #ff6600;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fire {
    color: transparent;
    animation: fire-flicker 0.9s steps(3, end) infinite;
  }
}

@keyframes fire-flicker {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
  100% { filter: brightness(0.9); }
}

.tagline { margin: 0 0 8px; }
.updated {
  margin: 8px 0 0;
  font-family: "Courier New", Courier, monospace;
  color: #ffff66;
  font-size: 13px;
}

.globe {
  display: inline-block;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  vertical-align: middle;
  border: 3px solid #9fe8ff;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      90deg,
      #0b4f8a 0 7px,
      #1570b8 7px 14px
    ),
    radial-gradient(circle at 30% 30%, #9fe8ff, #1560a8 55%, #003366);
  background-blend-mode: multiply;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.counter {
  display: inline-block;
  margin-left: 6px;
  background: #111;
  border: 3px inset #808080;
  padding: 2px 3px;
  vertical-align: middle;
}

.counter span {
  display: inline-block;
  min-width: 14px;
  padding: 2px 3px;
  margin: 0 1px;
  background: #000;
  color: #ff2020;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  border: 1px solid #400;
}

.sidebar-cell { width: 210px; }
.main-cell { width: auto; }

.panel {
  background: #000060;
  color: #00ff00;
  border-color: #e0e0e0 #404040 #404040 #e0e0e0;
}

.panel th {
  background: #0000aa;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 16px;
  text-align: center;
  border-bottom: 2px solid #ffff00;
}

.panel.inner { background: #001040; color: #ccffcc; }
.panel.inner h2 {
  margin: 0.4em 0 0.3em;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #ffff00;
  font-size: 26px;
}

.panel.inner p { margin: 0.6em 0; }

.nav-links {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.8;
}

.rainbow {
  border: 0;
  height: 8px;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff9900,
    #ffff00,
    #33cc33,
    #3399ff,
    #6633ff,
    #ff00cc,
    #ff0000
  );
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.new {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  background: red;
  color: yellow;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 12px;
  font-weight: bold;
  vertical-align: middle;
}

.wip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  background: #666;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: bold;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  background: #c0c0c0;
  color: #000 !important;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  border: 3px outset #fff;
  cursor: pointer;
}

.btn:active { border-style: inset; }

.whats-new {
  margin: 0.4em 0 1em 1.2em;
  color: #ccffcc;
}

.project {
  background: #1a0066;
  color: #ccffff;
}

.project th {
  background: #440088;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 14px;
}

.fire.page-title {
  font-size: 42px;
}

.jump {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  margin: 0 0 1em;
}

.feel {
  background: #220044;
  border: 4px ridge #ff00cc;
  padding: 8px 12px;
  margin: 0.8em 0 1.2em;
  color: #ffccff;
}

.feel ul { margin: 0.4em 0 0.2em 1.2em; padding: 0; }
.feel li { margin: 0.35em 0; }

.kbd {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: bold;
  color: #ffff66;
  background: #111;
  border: 2px outset #888;
  padding: 0 5px;
}

.tip {
  background: #000040;
  color: #ccffcc;
  margin: 0.5em 0 1.1em;
}

.tip th {
  background: #0000aa;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 14px;
  text-align: left;
}

.tip td {
  font-size: 14px;
  vertical-align: top;
}

.tip td:first-child {
  width: 34%;
  color: #ffff99;
  font-weight: bold;
}

.tiny {
  font-size: 11px;
  color: #99cc99;
  font-family: "Courier New", Courier, monospace;
}

.ascii {
  margin: 0;
  color: #ffcc66;
  font-size: 11px;
  line-height: 1.15;
}

.mascot-page {
  width: min(1400px, calc(100% - 16px));
  max-width: calc(100% - 16px);
  table-layout: auto;
  margin: 0 auto 28px;
  background: #000033;
  border: 6px ridge #c0c0c0;
}

.mascot-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  background: #000008;
  border: 3px inset #808080;
  padding: 8px 10px;
}

.ascii-mascot {
  display: inline-block;
  margin: 0;
  color: #ffcc66;
  font-family: "Courier New", Courier, monospace;
  font-size: 6.5px;
  line-height: 1.05;
  white-space: pre;
}

.midi:not(.on) .midi-eq span { animation: none; opacity: 0.35; }

.midi-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #000080;
  color: #ffff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 14px;
  text-align: center;
  padding: 4px 8px;
  border-bottom: 3px ridge #c0c0c0;
}

.midi-eq {
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  margin: 0 0 6px !important;
}

.midi-eq span {
  width: 6px;
  background: #00ff00;
  animation: eq 0.7s ease-in-out infinite alternate;
}

.midi-eq span:nth-child(1) { height: 8px; animation-delay: 0s; }
.midi-eq span:nth-child(2) { height: 18px; animation-delay: 0.1s; }
.midi-eq span:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.midi-eq span:nth-child(4) { height: 22px; animation-delay: 0.05s; }
.midi-eq span:nth-child(5) { height: 10px; animation-delay: 0.15s; }

@keyframes eq {
  from { transform: scaleY(0.4); }
  to { transform: scaleY(1.2); }
}

.badge {
  width: 88px;
  height: 31px;
  margin: 6px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: bold;
  line-height: 1.1;
  border: 1px solid #fff;
  image-rendering: pixelated;
}

.badge.netscape { background: #003399; color: #fff; border-color: #99ccff #000066 #000066 #99ccff; }
.badge.ie { background: #000; color: #00ccff; border-color: #66ffff #003333 #003333 #66ffff; }
.badge.notepad { background: #ffffcc; color: #000; border-color: #fff #999 #999 #fff; }
.badge.geocities { background: linear-gradient(#ff00cc, #660066); color: #fff; }

.guestbook input[type="text"],
.guestbook textarea {
  background: #000;
  color: #00ff00;
  border: 2px inset #808080;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
}

.footer {
  background: #000040;
  color: #cccccc;
}

.sparkle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.sparkle {
  position: absolute;
  color: #ffff66;
  font-size: 14px;
  font-family: "Comic Sans MS", cursive;
  animation: sparkle-out 0.7s linear forwards;
  margin-left: -4px;
  margin-top: -8px;
}

@keyframes sparkle-out {
  to { opacity: 0; transform: translateY(-18px) scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .blink, .fire, .globe, .midi-eq span, .sparkle { animation: none; }
}