.header {
    background: linear-gradient(270deg,transparent, #f505cd, black, #ff0000);
    background-size: 200% 200%;
    color: rgb(255, 255, 255);
    padding: 15px;
    text-align: center;
    border-radius: 12px;
    animation: animateHeader 3s linear infinite;
    animation-delay: 0.5s;
}

@keyframes animateHeader {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.main {
    height: 100vh; /* Ganze Bildschirmhöhe */
    display: flex;
    justify-content: center; /* horizontal zentrieren */
    align-items: center;     /* vertikal zentrieren */
    background-color: #f0f0f0; /* Hintergrundfarbe (optional) */
    margin: 0;
}

.flag-text {
    font-size: 50px; /* sehr groß */
    font-weight: bold;
    color: #333; /* Startfarbe */
    animation: 
        wave 5s ease-in-out infinite,
        colorChange 3s linear infinite alternate;
    display: inline-block;
    transform-origin: center bottom; /* Drehpunkt für Welle */
}
/* Wellen-Animation: Text schwingt leicht nach links und rechts */
@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
 @keyframes colorChange {
    0%   { color: #333; }
    25%  { color: purple; }
    50%  { color: deeppink; }
    75%  { color: violet; }
    100% { color: #333; }
}