html, body { height: 100%; }
body {
  background:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent),
    radial-gradient(2px 2px at 80% 10%, #fff, transparent),
    radial-gradient(2px 2px at 40% 60%, #fff, transparent),
    radial-gradient(2px 2px at 90% 80%, #fff, transparent),
    radial-gradient(2px 2px at 60% 40%, #fff, transparent),
    radial-gradient(2px 2px at 25% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 55%, #ffff00, transparent),
    radial-gradient(1.5px 1.5px at 70% 25%, #ffff00, transparent),
    radial-gradient(1.5px 1.5px at 50% 90%, #ffff00, transparent),
    radial-gradient(1.5px 1.5px at 5% 75%, #ffff00, transparent),
    #000080;
  background-attachment: fixed;
  color: #00ff00;
  font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif;
  margin: 0;
  padding: 10px;
  overflow-x: hidden;
  animation: bgpulse 3s infinite;
}
@keyframes bgpulse {
  0%, 100% { background-color: #000080; }
  50% { background-color: #4b0082; }
}
.wrap {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  background: #c0c0c0;
  border: 8px ridge #ff00ff;
  padding: 12px;
  box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
}
h1 {
  text-align: center;
  font-size: 38px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, red, orange, yellow, green, blue, violet, red);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow-text 2.5s linear infinite, wiggle 0.6s ease-in-out infinite alternate;
  text-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
@keyframes rainbow-text { to { background-position: 400% 0; } }
@keyframes wiggle { from { transform: rotate(-2deg) scale(1); } to { transform: rotate(2deg) scale(1.03); } }
marquee {
  background: #ffff00;
  color: #ff0000;
  font-weight: bold;
  border: 3px dashed #ff00ff;
  padding: 4px;
  font-size: 18px;
  margin: 6px 0;
}
marquee.two { background: #ff00ff; color: #00ffff; border-color: #ffff00; }
marquee.three { background: #00ffff; color: #ff0000; border-color: #00ff00; font-size: 14px; }
.blink {
  animation: blinker 0.6s step-start infinite;
  color: #ff0000;
  font-weight: bold;
}
@keyframes blinker { 50% { opacity: 0; } }
hr.rainbow {
  height: 8px;
  border: 0;
  background: repeating-linear-gradient(90deg, red, orange, yellow, green, blue, violet, red);
  background-size: 200% 100%;
  animation: slide 1.5s linear infinite;
}
@keyframes slide { to { background-position: 200% 0; } }
.center { text-align: center; }
.sketch-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}
.sketch-box {
  background: #fff;
  border: 4px double #000080;
  padding: 6px;
  width: 200px;
  text-align: center;
  transform: rotate(var(--r, -2deg));
  transition: transform .2s;
}
.sketch-box:hover { transform: rotate(0deg) scale(1.08); }
.sketch-box:nth-child(2) { --r: 3deg; }
.sketch-box:nth-child(3) { --r: -4deg; }
.sketch-box:nth-child(4) { --r: 2deg; }
.sketch-box:nth-child(5) { --r: -3deg; }
.sketch-box figcaption {
  font-family: "Comic Sans MS", cursive;
  font-size: 13px;
  color: #800080;
  font-weight: bold;
  margin-top: 4px;
}
.meme {
  background: #fff;
  border: 3px solid #000;
  margin: 16px auto;
  width: 260px;
  position: relative;
}
.meme svg { display: block; width: 100%; }
.meme .top, .meme .bottom {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: #fff;
  -webkit-text-stroke: 1.5px black;
  text-stroke: 1.5px black;
  text-transform: uppercase;
  line-height: 1.05;
  padding: 0 6px;
}
.meme .top { top: 4px; }
.meme .bottom { bottom: 4px; }
.guestbook {
  background: #000;
  color: #0f0;
  font-family: monospace;
  padding: 8px;
  border: 2px inset #888;
  font-size: 12px;
}
.badge-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.badge {
  background: #000;
  color: #fff;
  font-size: 10px;
  padding: 4px 6px;
  border: 1px solid #fff;
  font-family: monospace;
}
.badge.spin { animation: spin 3s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.small-note { font-size: 9px; color: #000080; }
footer {
  text-align: center;
  font-size: 11px;
  color: #000080;
  margin-top: 16px;
}
.construction {
  background: repeating-linear-gradient(45deg, #ffcc00, #ffcc00 10px, #000 10px, #000 20px);
  background-size: 200% 200%;
  animation: barberpole 1s linear infinite;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-weight: bold;
  text-align: center;
  padding: 6px;
  margin: 10px 0;
  border: 3px solid #000;
}
@keyframes barberpole { to { background-position: 40px 0; } }
.counter {
  display: inline-flex;
  gap: 2px;
  background: #000;
  padding: 4px 6px;
  border: 2px inset #666;
}
.counter span {
  background: #ff2222;
  color: #300;
  font-family: monospace;
  font-weight: bold;
  font-size: 18px;
  padding: 0 3px;
  text-shadow: 0 0 4px #ff8888;
}
.webring {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.webring a {
  background: linear-gradient(#eee, #999);
  border: 2px outset #ccc;
  padding: 4px 8px;
  font-size: 11px;
  color: #000080;
  text-decoration: none;
  font-weight: bold;
}
.dancer {
  display: inline-block;
  animation: dance 0.5s infinite alternate;
  font-size: 28px;
}
.dancer.d2 { animation-delay: .2s; }
.dancer.d3 { animation-delay: .4s; }
@keyframes dance {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-10px) rotate(8deg); }
}
#baguette-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.drop {
  position: absolute;
  top: -40px;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes fall {
  from { transform: translateY(-40px) rotate(0deg); }
  to { transform: translateY(110vh) rotate(360deg); }
}
/* 36 drops, hand-tuned left/duration/delay/size per nth-child so no JS
   (and no inline style="") is needed at all — keeps this CSP-clean
   (default-src/style-src 'self' blocks inline <script> AND inline style
   attributes, external files loaded via 'self' are fine). */
.drop:nth-child(1)  { left: 2%;  font-size: 30px; animation-duration: 6.2s; animation-delay: -0.4s; }
.drop:nth-child(2)  { left: 6%;  font-size: 22px; animation-duration: 8.5s; animation-delay: -3.1s; }
.drop:nth-child(3)  { left: 11%; font-size: 34px; animation-duration: 5.0s; animation-delay: -1.7s; }
.drop:nth-child(4)  { left: 15%; font-size: 26px; animation-duration: 9.3s; animation-delay: -5.5s; }
.drop:nth-child(5)  { left: 20%; font-size: 20px; animation-duration: 6.8s; animation-delay: -2.2s; }
.drop:nth-child(6)  { left: 25%; font-size: 32px; animation-duration: 7.7s; animation-delay: -0.9s; }
.drop:nth-child(7)  { left: 29%; font-size: 24px; animation-duration: 5.5s; animation-delay: -4.4s; }
.drop:nth-child(8)  { left: 34%; font-size: 28px; animation-duration: 8.1s; animation-delay: -1.2s; }
.drop:nth-child(9)  { left: 38%; font-size: 21px; animation-duration: 6.4s; animation-delay: -6.0s; }
.drop:nth-child(10) { left: 43%; font-size: 33px; animation-duration: 9.9s; animation-delay: -2.8s; }
.drop:nth-child(11) { left: 47%; font-size: 25px; animation-duration: 5.8s; animation-delay: -0.6s; }
.drop:nth-child(12) { left: 52%; font-size: 29px; animation-duration: 7.2s; animation-delay: -3.6s; }
.drop:nth-child(13) { left: 56%; font-size: 23px; animation-duration: 8.9s; animation-delay: -5.1s; }
.drop:nth-child(14) { left: 61%; font-size: 31px; animation-duration: 6.0s; animation-delay: -1.4s; }
.drop:nth-child(15) { left: 65%; font-size: 20px; animation-duration: 9.5s; animation-delay: -4.0s; }
.drop:nth-child(16) { left: 70%; font-size: 27px; animation-duration: 5.3s; animation-delay: -2.5s; }
.drop:nth-child(17) { left: 74%; font-size: 34px; animation-duration: 7.9s; animation-delay: -0.3s; }
.drop:nth-child(18) { left: 79%; font-size: 22px; animation-duration: 6.6s; animation-delay: -5.8s; }
.drop:nth-child(19) { left: 83%; font-size: 30px; animation-duration: 8.4s; animation-delay: -3.3s; }
.drop:nth-child(20) { left: 88%; font-size: 24px; animation-duration: 5.6s; animation-delay: -1.9s; }
.drop:nth-child(21) { left: 92%; font-size: 28px; animation-duration: 9.1s; animation-delay: -6.4s; }
.drop:nth-child(22) { left: 96%; font-size: 21px; animation-duration: 6.9s; animation-delay: -0.8s; }
.drop:nth-child(23) { left: 4%;  font-size: 26px; animation-duration: 7.5s; animation-delay: -4.7s; }
.drop:nth-child(24) { left: 9%;  font-size: 32px; animation-duration: 5.9s; animation-delay: -2.0s; }
.drop:nth-child(25) { left: 13%; font-size: 23px; animation-duration: 8.7s; animation-delay: -5.4s; }
.drop:nth-child(26) { left: 18%; font-size: 29px; animation-duration: 6.3s; animation-delay: -1.1s; }
.drop:nth-child(27) { left: 23%; font-size: 33px; animation-duration: 9.7s; animation-delay: -3.9s; }
.drop:nth-child(28) { left: 31%; font-size: 20px; animation-duration: 5.2s; animation-delay: -0.5s; }
.drop:nth-child(29) { left: 36%; font-size: 27px; animation-duration: 7.3s; animation-delay: -6.2s; }
.drop:nth-child(30) { left: 41%; font-size: 25px; animation-duration: 8.2s; animation-delay: -2.6s; }
.drop:nth-child(31) { left: 49%; font-size: 31px; animation-duration: 6.1s; animation-delay: -4.3s; }
.drop:nth-child(32) { left: 58%; font-size: 22px; animation-duration: 9.0s; animation-delay: -1.6s; }
.drop:nth-child(33) { left: 67%; font-size: 28px; animation-duration: 5.7s; animation-delay: -5.9s; }
.drop:nth-child(34) { left: 76%; font-size: 34px; animation-duration: 7.8s; animation-delay: -3.0s; }
.drop:nth-child(35) { left: 85%; font-size: 24px; animation-duration: 8.6s; animation-delay: -0.7s; }
.drop:nth-child(36) { left: 94%; font-size: 30px; animation-duration: 6.5s; animation-delay: -4.9s; }