* { box-sizing: border-box; }
  body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
    background:
      radial-gradient(circle at 20% 20%, #fff 0 3px, transparent 4px) 0 0 / 60px 60px,
      radial-gradient(circle at 70% 60%, #ffe 0 2px, transparent 3px) 0 0 / 80px 80px,
      linear-gradient(135deg, #ff6ec7, #ffcc33, #6df7c1, #5ec8ff, #b388ff);
    background-size: 60px 60px, 80px 80px, 400% 400%;
    animation: bg 12s ease infinite;
    text-align: center;
    color: #222;
  }
  @keyframes bg { 0%{background-position:0 0,0 0,0% 50%} 50%{background-position:0 0,0 0,100% 50%} 100%{background-position:0 0,0 0,0% 50%} }

  .marquee {
    background: #000; color: #0f0; font-family: "Courier New", monospace;
    padding: 6px 0; font-size: 18px; white-space: nowrap; overflow: hidden;
    border-bottom: 4px ridge #fff;
  }
  .marquee span { display: inline-block; padding-left: 100%; animation: scroll 14s linear infinite; }
  @keyframes scroll { to { transform: translateX(-100%); } }

  .wrap { max-width: 900px; margin: 0 auto; padding: 20px 12px 60px; position: relative; }

  /* WordArt */
  .wordart {
    font-size: clamp(60px, 16vw, 150px);
    font-weight: 900;
    font-style: italic;
    margin: 10px 0 0;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #ff0000 0%, #ff9900 25%, #ffee00 45%, #00dd44 60%, #0099ff 80%, #aa00ff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-stroke: 4px #fff;
    paint-order: stroke fill;
    filter: drop-shadow(6px 6px 0 #000) drop-shadow(0 0 12px #fff);
    display: inline-block;
    transform: perspective(500px) rotateX(12deg) rotate(-3deg);
    animation: wobble 2.4s ease-in-out infinite;
  }
  @keyframes wobble {
    0%,100% { transform: perspective(500px) rotateX(12deg) rotate(-3deg) scale(1); }
    50%     { transform: perspective(500px) rotateX(12deg) rotate(3deg) scale(1.08); }
  }
  .wordart .letter { display: inline-block; animation: jump 1.2s ease-in-out infinite; }
  .wordart .letter:nth-child(2){animation-delay:.1s} .wordart .letter:nth-child(3){animation-delay:.2s}
  .wordart .letter:nth-child(4){animation-delay:.3s} .wordart .letter:nth-child(5){animation-delay:.4s}
  .wordart .letter:nth-child(6){animation-delay:.5s} .wordart .letter:nth-child(7){animation-delay:.6s}
  @keyframes jump { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

  .blink { animation: blink 0.8s steps(2, start) infinite; }
  @keyframes blink { to { visibility: hidden; } }

  .sub { font-size: 26px; font-weight: bold; margin: 18px 0; color: #c2007a; text-shadow: 2px 2px 0 #fff; }

  /* clipart row */
  .clipart-row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 24px 0; }
  .clip { width: 110px; height: 110px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.35)); }
  .c1 { animation: bounce 1s ease-in-out infinite; }
  .c2 { animation: spin 4s linear infinite; }
  .c3 { animation: pulse .9s ease-in-out infinite; }
  .c4 { animation: bounce 1.3s ease-in-out infinite .3s; }
  .c5 { animation: swing 1.6s ease-in-out infinite; transform-origin: 50% 0; }
  @keyframes bounce { 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-26px) scaleY(1.08)} }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }
  @keyframes swing { 0%,100%{transform:rotate(-18deg)} 50%{transform:rotate(18deg)} }

  .box {
    background: #ffffcc; border: 6px ridge #ff00aa; border-radius: 10px;
    padding: 14px 18px; margin: 20px auto; max-width: 640px; font-size: 20px;
    box-shadow: 8px 8px 0 #0006;
  }
  .rainbow-hr {
    height: 12px; border: 0; margin: 22px 0;
    background: repeating-linear-gradient(90deg, red 0 40px, orange 40px 80px, yellow 80px 120px, lime 120px 160px, cyan 160px 200px, blue 200px 240px, magenta 240px 280px);
    animation: slide 1.5s linear infinite;
    background-size: 280px 12px;
  }
  @keyframes slide { to { background-position: 280px 0; } }

  .btn {
    display: inline-block; margin: 8px; padding: 12px 26px; font-size: 22px; font-weight: bold;
    font-family: inherit; color: #fff; text-decoration: none; cursor: pointer;
    background: linear-gradient(#ff5fbf, #c2007a); border: 4px outset #ffb3e6; border-radius: 30px;
    text-shadow: 2px 2px 0 #000;
    animation: pulse 1.4s ease-in-out infinite;
  }
  .btn:active { border-style: inset; }

  .counter { font-family: "Courier New", monospace; background: #000; color: #0f0; display: inline-block; padding: 4px 12px; border: 3px inset #888; letter-spacing: 4px; }

  /* floating stuff */
  .float { position: fixed; top: -60px; font-size: 32px; pointer-events: none; user-select: none; z-index: 10; animation: fall linear forwards; }
  @keyframes fall { to { transform: translateY(115vh) rotate(360deg); } }

  .corner { position: fixed; width: 90px; z-index: 5; }
  .corner.l { left: 6px; bottom: 6px; animation: bounce 1.2s infinite; }
  .corner.r { right: 6px; bottom: 6px; animation: bounce 1.2s infinite .4s; }

  footer { font-size: 14px; margin-top: 30px; }