@keyframes rainbow-bg {
  0% { background-color: #ff0000; }
  14% { background-color: #ff7f00; }
  28% { background-color: #ffff00; }
  42% { background-color: #00ff00; }
  57% { background-color: #0000ff; }
  71% { background-color: #4b0082; }
  85% { background-color: #9400d3; }
  100% { background-color: #ff0000; }
}

@keyframes crazy-text {
  0% { color: #00ff00; transform: scale(1) rotate(0deg); }
  25% { color: #ff00ff; transform: scale(1.2) rotate(5deg); }
  50% { color: #00ffff; transform: scale(0.8) rotate(-5deg); }
  75% { color: #ffff00; transform: scale(1.3) rotate(10deg); }
  100% { color: #00ff00; transform: scale(1) rotate(0deg); }
}

@keyframes shake {
  0% { transform: translate(5px, 5px) rotate(0deg); }
  10% { transform: translate(-5px, -5px) rotate(-5deg); }
  20% { transform: translate(-5px, 5px) rotate(5deg); }
  30% { transform: translate(5px, -5px) rotate(0deg); }
  40% { transform: translate(5px, 5px) rotate(5deg); }
  50% { transform: translate(-5px, 5px) rotate(-5deg); }
  60% { transform: translate(-5px, -5px) rotate(0deg); }
  70% { transform: translate(5px, 5px) rotate(-5deg); }
  80% { transform: translate(-5px, -5px) rotate(5deg); }
  90% { transform: translate(5px, -5px) rotate(0deg); }
  100% { transform: translate(5px, -5px) rotate(-5deg); }
}

@keyframes spin-bounce {
  0% { transform: rotate(0deg) translateY(0) scale(1); }
  50% { transform: rotate(180deg) translateY(-100px) scale(1.5); }
  100% { transform: rotate(360deg) translateY(0) scale(1); }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding-top: 2vh;
  font-family: "Impact", sans-serif;
  animation: rainbow-bg 0.3s infinite linear; /* Extreem snelle disco */
  overflow: hidden;
}

.question {
  font-size: 6rem;
  text-align: center;
  margin: 10px 0;
  text-shadow: 4px 4px 0px #000, -4px -4px 0px #fff;
  animation: crazy-text 0.2s infinite, shake 0.1s infinite;
  z-index: 10;
}

#answer {
  font-size: 10rem;
  margin-top: 5vh;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  color: #fff;
  text-shadow: 10px 10px 0px #000, -5px -5px 0 #f00, 5px -5px 0 #0f0;
  animation: spin-bounce 1s infinite linear, rainbow-bg 0.1s infinite reverse;
  z-index: 20;
}

marquee {
  font-size: 3rem;
  font-family: "Comic Sans MS", cursive;
  color: yellow;
  background: blue;
  border: 8px dotted red;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  animation: crazy-text 0.5s infinite reverse;
  opacity: 0.8;
}

.hidden {
  display: none !important;
}