body {
  display: flex;
  background-color: black;
  font-family: Arial;
  align-items: center;
  justify-content: center;
  align-items: center;
  font-size: 100%;     
} 



h1 {
  text-align: center;
  color: white;
  
}

a {
  text-decoration: none;
}

span {
  align-items: center;
}

.container {
  align-items: center;
  justify-content: center;
  display: flex;
  padding-top: 150px;
}


.colorful-text span {
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: bold;
  animation: wave 1.5s infinite;
  color: #ff4500; /* Startfarbe */
}

/* Versatz für jeden Buchstaben */
.colorful-text span:nth-child(1) { animation-delay: 0.1s; }
.colorful-text span:nth-child(2) { animation-delay: 0.2s; }
.colorful-text span:nth-child(3) { animation-delay: 0.3s; }
.colorful-text span:nth-child(4) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
    color: #ff4500;
  }
  50% {
    transform: translateY(-20px);
    color: #32cd32; /* Farbe in der Mitte */
  }
}

@media (max-width: 600px) {
    body { font-size: 16px; } /* Idealwert für Mobile */
}