body {
   background-color: grey;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}


@keyframes rainbow-text {
    0% { color: red; }
    16.666% { color: orange; }
    33.333% { color: yellow; }
    50% { color: green; }
    66.666% { color: blue; }
    83.333% { color: indigo; }
    100% { color: violet; }
  }

    

  
  .text {
    animation: rainbow-text 5s infinite; 
   font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-align: center;}

    
.container {
    text-align: center;
    padding: 50px;
}



.cta-button {
    background-color: black;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: darkgray;
    color: black;
}

.wk {
color: black;
font-size: 15px;
}

header {
    padding: 30px;
    background-color: white;
}

/* Smartphones (Portrait und Landscape) */
@media (max-width: 767px) {
    /* Deine Styles hier */
    .cta-button {
        padding: 15px 30px;
        font-size: 24px;
        border-radius: 20px;}
}

/* Tablets und kleinere Laptops */
@media (min-width: 768px) {
    /* Deine Styles hier */
    .cta-button {
        padding: 20px 60px;
        font-size: 40px;
        border-radius: 300px;
    }
}

/* vergessen für was des is lol */
 /*padding: 16px 40px; Adjust the padding for mobile */
 /*font-size: 28px; Adjust the font size for mobile */