body {
    background-color: #000000;
    display: grid;
    grid-template-areas: 
        "top top top"
        "main main main"
        "movie1 movie2 movie3"
        "movie4 movie5 movie6"
        "movie7 movie8 movie9";      
    grid-template-rows: auto 1fr auto;
    height: 210vh;
    margin: 0;
}

h2 {
    color: azure;
}

@keyframes colorChange {
    0% {
        color: red;
    }
    25% {
        color: blue;
    }
    50% {
        color: green;
    }
    75% {
        color: yellow;
    }
    100% {
        color: rgb(255, 0, 208);
    }
}

.Überschrift {
    animation: colorChange 10s infinite;
}

.movie p, .movie h2 {
    color: azure;
}

.top {
    grid-area: top;
    color: white; 
    text-align: center;
    background-color: #000000;
    margin-top: 60px;
}

.main {
    grid-area: main;
    background-color: #000000;
    text-align: center;
    margin-top: 55px;
}

.foot {
    grid-area: foot;
}

.serach {
    width: 200px;
    height: 25px;
    border-radius: 20px;
    text-align: center;
    margin-right: 10px;
}

.movie1 {
    grid-area: movie1;
    margin-bottom: 500px;
    text-align: center;
    margin-top: 150px;
}

.movie2 {
    grid-area: movie2;
    text-align: center;
    margin-bottom: 500px;
    margin-top: 60px;
}

.movie3 {
    grid-area: movie3;
    text-align: center;
    margin-bottom: 500px; 
    margin-top: 150px;
}

.movie4 {
    grid-area: movie4;
    text-align: center;
    margin-bottom: 500px;
    margin-top: -300px;
}

.movie5 {
    grid-area: movie5;
    text-align: center;
    margin-bottom: 500px;
    margin-top: -300px;
}

.movie6 {
    grid-area: movie6;
    text-align: center;
    margin-bottom: 500px;
    margin-top: -300px;
}

.movie7 {
    grid-area: movie7;
    text-align: center;
    margin-bottom: 500px;
    margin-top: -300px;
}

.movie8 {
    grid-area: movie8;
    text-align: center;
    margin-bottom: 500px;
    margin-top: -300px;
}

.movie9 {
    grid-area: movie9;
    text-align: center;
    margin-bottom: 500px;
    margin-top: -300px;
}

.link_button {
    background-color: #E2B616;
    color: #000000;
}

.Guardians {
    background-color: #000000;
    border: none; 
}

.btn {
    margin-top: 10px; 
    margin-left: 20px;
    padding: 1em 2em; 
    background-color: #0e49a8;
    border: none; 
    color: white;
    font-weight: bold; 
    border-radius: 1000px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
}

.btn:hover {
    box-shadow: 40px 0 100px #0e49a8, -40px 0 100px rgb(0, 238, 255);
}

/* Media Queries for responsiveness */
@media (max-width: 600px) {
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .main {
        margin-top: 20px;
    }

    .movie1, .movie2, .movie3, .movie4, .movie5, .movie6, .movie7, .movie8, .movie9 {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .Guardians img {
        width: 100%;
        height: auto;
    }

    .serach {
        width: 150px;
    }
}