/* -----------------------------------------
 *   BACKGROUND: CHAOTIC BUT PINK
 * ----------------------------------------- */

body {
  background: hotpink;
  color: #00ff00;
  font-family: "Comic Sans MS", "Papyrus", cursive;
  text-align: center;
  animation: bgflash 1s infinite alternate;
}

@keyframes bgflash {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(360deg) brightness(1.5); }
}

/* -----------------------------------------
 *   TOP UNDER CONSTRUCTION + HAZARD BAR
 * ----------------------------------------- */

.top-under-construction {
  background: repeating-linear-gradient(
    45deg,
    black,
    black 25px,
    yellow 25px,
    yellow 50px
  );
  padding: 20px 0 10px 0;
  border-bottom: 6px solid black;
  position: relative;
  overflow: hidden;
}

/* Larger, clearer, more readable GIF */
.top-under-construction img {
  display: block;
  margin: 0 auto 10px auto;
  width: 200px;
  image-rendering: pixelated;
  animation: ucFloat 1.5s infinite ease-in-out;
}

/* Smooth up‑and‑down floating motion */
@keyframes ucFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* -----------------------------------------
 *   SCROLLING MARQUEE WARNING
 * ----------------------------------------- */

.top-warning-marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  color: black;
  background: yellow;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding: 5px 0;
  text-shadow: 1px 1px 0 white;
  font-family: "Comic Sans MS", sans-serif;
  animation: marqueeScroll 18s linear infinite;
}

/* Smooth left‑to‑right scrolling */
@keyframes marqueeScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* -----------------------------------------
 *   HEADERS: CHAOTIC + CLICK EFFECTS
 * ----------------------------------------- */

h1 {
  font-size: 60px;
  color: #ff00ff;
  text-shadow: 4px 4px 0px yellow, -4px -4px 0px cyan;
  animation: shake 0.2s infinite;
  cursor: pointer;
}

@keyframes shake {
  0% { transform: translate(0,0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 2px); }
  100% { transform: translate(-2px, -2px); }
}

.header-link:hover h1 {
  animation: rainbowFlash 0.5s infinite;
}

@keyframes rainbowFlash {
  0% { color: red; }
  20% { color: orange; }
  40% { color: yellow; }
  60% { color: lime; }
  80% { color: cyan; }
  100% { color: magenta; }
}

@keyframes violentShake {
  0% { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(-10px, 10px) rotate(-10deg); }
  40% { transform: translate(10px, -10px) rotate(10deg); }
  60% { transform: translate(-15px, -5px) rotate(-15deg); }
  80% { transform: translate(15px, 5px) rotate(15deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* -----------------------------------------
 *   PARAGRAPHS: RAINBOW CHAOS
 * ----------------------------------------- */

p {
  background: rgba(0,0,0,0.6);
  border: 3px groove #00ffcc;
  padding: 10px;
  margin: 20px auto;
  width: 80%;
  font-size: 16px;
  line-height: 1.4;
  animation: rainbowtext 3s infinite linear;
}

@keyframes rainbowtext {
  0% { color: red; }
  20% { color: orange; }
  40% { color: yellow; }
  60% { color: lime; }
  80% { color: cyan; }
  100% { color: magenta; }
}

/* -----------------------------------------
 *   LISTS: PURE ANARCHY
 * ----------------------------------------- */

li {
  list-style-type: "\2728"; /* Unicode sparkle */;
  font-size: 18px;
  margin: 10px;
  padding: 5px;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  border: 2px dotted white;
  animation: wiggle 0.5s infinite alternate;
}

@keyframes wiggle {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

/* -----------------------------------------
 *   LINKS: BLINKING CHAOS
 * ----------------------------------------- */

a {
  color: #00ff00;
  font-weight: bold;
  animation: blinktext 0.5s infinite;
}

@keyframes blinktext {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* -----------------------------------------
 *   MOBILE FIX — prevent blink animation from hiding images/buttons
 * ----------------------------------------- */

.netscape-badge a,
.netscape-badge img,
.btn,
.btn *,
.buttons a,
.buttons a * {
  animation: none !important;
  opacity: 1 !important;
}

/* -----------------------------------------
 *   ANIMATED BUTTON LINKS SECTION
 * ----------------------------------------- */

.link-section {
  margin: 40px auto;
  width: 80%;
}

.chaos-button {
  display: inline-block;
  padding: 12px 20px;
  margin: 10px;
  font-size: 22px;
  color: yellow;
  background: linear-gradient(135deg, #ff00ff, #00ffff);
  border: 4px double lime;
  text-decoration: none;
  text-shadow: 2px 2px 0px black;
  animation: buttonPulse 1s infinite alternate, buttonBounce 0.4s infinite alternate;
}

@keyframes buttonPulse {
  from { filter: brightness(1); }
  to { filter: brightness(2); }
}

@keyframes buttonBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

.chaos-button:hover {
  animation: buttonPulse 0.2s infinite alternate, buttonBounce 0.2s infinite alternate;
  border-color: magenta;
  color: cyan;
}

/* -----------------------------------------
 *   SPARKLE CURSOR TRAIL ANIMATION
 * ----------------------------------------- */

@keyframes sparkleFade {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.5); }
}

/* -----------------------------------------
 *   UNDER CONSTRUCTION BANNER (BOTTOM)
 * ----------------------------------------- */

.under-construction {
  margin-top: 30px;
  animation: ucWiggle 1s infinite alternate;
}

@keyframes ucWiggle {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

/* -----------------------------------------
 *   NETSCAPE BADGE WIGGLE
 * ----------------------------------------- */

.netscape-badge {
  margin-top: 30px;
  text-align: center;
  animation: badgeWiggle 1s infinite alternate;
}

@keyframes badgeWiggle {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}

/* -----------------------------------------
 *   HEADER LINK RESET
 * ----------------------------------------- */

.header-link {
  text-decoration: none;
  color: inherit;
}