*{
    padding: 0;
    /* outline: 2px dotted lime; */
    margin: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body{
    background: linear-gradient(rgb(128, 0, 128), rgb(75, 0, 130), rgb(0, 0, 139), rgb(0, 100, 0));


;
    scroll-behavior: smooth;
    color: rgb(255, 255, 255);
    overflow-x: hidden;
}

/* @media (min-width:1200px) { */
    header{
        background: url('back.png');
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
        height: 100vh;
    }
    
    .content{
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 2rem;
        display: grid;
        place-items: center;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7));
        color:antiquewhite;
        padding: 10rem 0;
    }
    button{
        width: 7rem;
        height: 3rem;
        background: rgb(0, 141, 207);
        color: white;
        font-size: 1rem;
        font-weight: bold;
        font-family: sans-serif;
        border: none;
        border-radius: 0.5rem;
        transition: 0.5s;
    }

    button a{
        color: aliceblue;
        text-decoration: none;
    }
    
    button:hover{
       background: rgb(0, 60, 255);
    }
    
    /*about section*/
    
    .about{
        padding: 3rem 2rem;
    }
        
    #logo{
        filter: drop-shadow(0px 1px 1px rgb(0, 0, 0) );
        width: 20rem;
    }
    
    .abttext{
        color: #ececec;
        display: grid;
        place-items: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    
    .abttext p{
        text-align: center;
        font-size: 0.8rem;
    }
    
    /*categories*/
    
    .categories{
        padding: 0 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .films{
        text-align: center;
    }
    
    .grades{
        padding: 1.5rem;
    }
    .grades1{
        padding: 1.5rem;
        align-content: center;
    }
    #grade{
        padding: 0rem 1rem;
        font-size: 1.5rem;
        border-right: 3px solid hsl(0, 100%, 50%);
        border-left: 3px solid hsl(0, 100%, 50%);
    }
    
    .cards{
        margin-top: 3rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }
   
    .grades1{
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers items horizontally */
        text-align: center; /* Centers text inside the items */
    }
    
    .cards1{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjusts for responsive design */
        gap: 1rem; /* Adds space between grid items */
        justify-items: center; /* Centers items within the grid cells */
        margin-top: 1rem; /* Adjust margin as needed */
    }
    
    .movieImg{
        width: 10rem;
    }
    
    #cardTop{
        display: grid;
        grid-template-columns: 30% 70%;
    }
    
    text{
        display: grid;
        place-items: center;
        padding: 3rem 0;
    }
    
    h3{
        font-size: 2rem;
        text-align: left !important;
        color: rgb(175, 149, 0); /* gold */


    }
    
    text p{
        text-align: left !important;
        font-size: 0.8rem;    
    }
    
    #trail{
        width:100%;
        height: 17rem;
    }
    
    .movie{
        width: 560px;
        background: linear-gradient(rgba(0, 0, 0, 0.275),rgba(0,0,0,0));
        border-radius: 1rem;
    }
    
    /* register */
    
    .register{
        background: url('back.png');
        height: 50vh;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    
    .reg{
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 2rem;
        display: grid;
        place-items: center;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7));
        color:antiquewhite;
        text-align: center;
    }
    
    h4{
        padding: 2rem;
    }

    .regbtn{
        background: rgb(0, 127, 245);
        height: 2rem;
        width: 10rem;
    }

    .regbtn a{
        text-decoration: none;
        color: beige;
    }
    
    footer{
        background: #111111;
        color: white;
        text-align: center;
        font-size:1rem;
        padding: 0.5rem;
        animation-name: changer;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        transition: 2s;
    }
    
    }
    @keyframes changer {
        0%{
            color: rgb(211, 1, 201);
        }

        20%{
            color: rgb(0, 149, 255);
        }

       40%{
            color: rgb(68, 255, 5);
        }

       60%{
            color: rgb(255, 12, 243);
        }

        80%{
            color: rgb(255, 0, 0);
        }

        100%{
            color: rgb(11, 7, 242);
        }
    }

@media (max-width:1200px) {
    .cards{
        transform: scale(0.9);
    }
}

@media (max-width:1050px) {
    .cards{
        transform: scale(0.8);
    }
}

@media (max-width:920px) {
    .cards{
        transform: scale(0.7);
    }
}

@media (max-width:820px) {

    body{
        overflow-x: hidden;
    }

    .cards{
        display: block;
        transform: scale(1);
    }

    h1{
        transform: scale(0.6);
        text-align: center;
    }

    .movie{
        margin-top: 2rem;
    }


}

@media (max-width:610px) {

    .cards{
        transform: scale(0.9);
    }
}

@media (max-width:545px) {


    .cards{
        transform: scale(0.7);
        margin-top: -5rem;
    }

    #adjust{
        margin-top: -10rem;
    }

}

@media (max-width:420px) {
    .cards{
        transform: scale(0.7);
    }

    .movie{
        transform: scale(0.9);
    }

    .grades{
        margin-top: -8rem;
    }

}

@media (max-width:350px) {

    h1{
       font-size: 3rem;
    }

    button{
        transform: scale(0.8);
    }

    .about{
        text-align: center;
        transform: scale(0.8);
    }

    .abttext{
        margin: auto;
    }

    .films{
        transform: scale(0.8);
        margin-top: -15rem;
    }


    .movie{
        transform: scale(0.95);
    }
    .abttext{
        transform: scale(0.9);
    }

    #cardp{
        font-size: 1rem;
    }

    #logo{
        transform: scale(0.8);
    }

    .cards{
        margin-top: -10rem;
        transform: scale(0.7);
    }

    .register{
        margin-top: -30rem;
    }

    .reg{
        transform: scale(0.6);
    }

    footer{
        position: sticky;
        margin-bottom: -1px;
    }

}