* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Comic Sans MS", "Papyrus", fantasy;
  background: linear-gradient(45deg, #ff00ff, #00ffff, #00ff00, #ffff00);
  background-size: 400% 400%;
  animation: goofyBg 5s ease infinite;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #ff0000;
  overflow-x: hidden;
  cursor: url('path/to/your/cursor.png'), auto;
}
@keyframes goofyBg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
h1 {
  font-size: 4em;
  text-shadow: 4px 4px #00ff00, -4px -4px #ff00ff;
  animation: blink 0.5s infinite;
  margin: 20px;
  transform: rotate(-7deg);
}
h2 {
  font-size: 3em;
  text-shadow: 3px 3px #00ff00, -3px -3px #ff00ff;
  animation: blink 0.5s infinite;
  margin: 20px;
  transform: rotate(-5deg);
}
@keyframes blink {
  50% { opacity: 0; }
}
.blink {
  font-size: 2em;
  color: #00ffff;
  animation: rainbowText 2s infinite;
  text-shadow: 2px 2px #000;
}
@keyframes rainbowText {
  0% { color: #ff0000; }
  20% { color: #ff00ff; }
  40% { color: #00ff00; }
  60% { color: #00ffff; }
  80% { color: #ffff00; }
  100% { color: #ff0000; }
}
#canvasContainerPointer {
  position: relative;
  width: 40vw;
  height: 40vw;
  max-width: 850px;
  max-height: 850px;
  min-width: 250px;
  min-height: 250px;
  transform: rotate(3deg);
  border: 10px dashed #ff00ff;
  box-shadow: 0 0 30px #00ff00;
  background: url('https://media.giphy.com/media/3o6Zta4e1eGj0L0b3q/giphy.gif') center/cover;
}
#canvasContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 95%;
  height: 95%;
  border-radius: 50%;
  border: 12px double #ffff00;
  background: radial-gradient(circle, #ff69b4, #00b7eb);
  box-shadow: inset 0 0 20px #ff0000;
}
#rouletteCanvas,
#pointerCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
#spinButton {
  margin: 20px;
  padding: 20px 50px;
  font-size: 2em;
  font-family: "Comic Sans MS", fantasy;
  background: linear-gradient(to right, #ff00ff, #00ff00);
  color: #ffff00;
  border: 5px solid #ff0000;
  border-radius: 15px;
  cursor: pointer;
  animation: bounce 0.3s infinite alternate;
  box-shadow: 0 0 20px #00ffff;
}
@keyframes bounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}
#spinButton:hover {
  background: linear-gradient(to left, #00ffff, #ff00ff);
}
#spinButton:disabled {
  background: #666;
  color: #fff;
  border-color: #333;
  cursor: not-allowed;
}
#result {
  font-size: 2.5em;
  color: #00ff00;
  text-shadow: 2px 2px #ff0000;
  margin: 20px;
  transform: rotate(5deg);
}
.notification-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 0, 255, 0.5);
  backdrop-filter: blur(10px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: flash 0.2s infinite;
}
@keyframes flash {
  50% { background: rgba(0, 255, 255, 0.5); }
}
.notification-box {
  background: url('https://media.giphy.com/media/26ufdipx37iT5P8uk/giphy.gif') center/cover;
  padding: 40px;
  border: 8px dashed #00ff00;
  border-radius: 25px;
  text-align: center;
  transform: rotate(-3deg);
}
.notification-box p,
.notification-box p3 {
  font-size: 2em;
  color: #ffff00;
  text-shadow: 2px 2px #ff0000;
  margin-bottom: 20px;
  font-family: "Papyrus", fantasy;
}
.notification-box button {
  padding: 15px 30px;
  font-size: 1.5em;
  background: #ff0000;
  color: #00ffff;
  border: 5px solid #ffff00;
  border-radius: 10px;
  cursor: pointer;
  animation: shake 0.2s infinite;
}
@keyframes shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(-5px); }
}
.notification-box button:hover {
  background: #00ff00;
  color: #ff00ff;
}
textarea {
  width: 300px;
  height: 100px;
  font-size: 1.5em;
  font-family: "Comic Sans MS", fantasy;
  background: #00ffff;
  color: #ff0000;
  border: 5px solid #ff00ff;
  border-radius: 10px;
  padding: 10px;
  margin: 20px;
  transform: rotate(2deg);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { transform: scale(1) rotate(2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(2deg); }
}
button.button {
  padding: 15px 30px;
  font-size: 1.5em;
  font-family: "Papyrus", fantasy;
  background: linear-gradient(to right, #00ff00, #ff00ff);
  color: #ffff00;
  border: 5px solid #ff0000;
  border-radius: 15px;
  cursor: pointer;
  margin: 10px;
  animation: bounce 0.4s infinite alternate;
}
button.button:hover {
  background: linear-gradient(to left, #ff0000, #00ffff);
}
marquee {
  font-size: 2em;
  color: #ff00ff;
  background: #ffff00;
  padding: 10px;
  margin: 10px;
  border: 5px dashed #00ff00;
}