@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

:root {
    --font-stack: "Arimo", sans-serif;
    --anim-stack: "animate__animated" "animate__pulse";
}

body {

    font-family: var(--font-stack);
    text-align: center;
    margin: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
    flex-shrink: 1;
}

.main-header-wrapper {
    flex-basis: 100%;
    background-color: #1d1d1d;
    color: #919191;
    /* position: fixed; */
    display: flex;
    justify-content: space-around;
    flex-grow: 1;

    & .center-wrapper {
        flex-basis: 90%;
        display: flex;
        justify-content: space-between;
        /* padding: 10px; */
        /* align-items: center; */

        & .left-wrapper {
            display: flex;
            /* width: 35%; */
            align-items: center;
            flex-shrink: 1;

            & .tagline {
                padding-left: 25px;
            }

            & .logo {
                transition: transform 200ms ease-in-out;
            }

            & .logo:hover {
                transform: scale(1.2);
                cursor: pointer;
            }
        }

        & .right-wrapper {
            display: flex;
            /* width: 55%; */
            align-self: center;
            flex-shrink: 1;

            & .searh-form input {
                width: 200px;
                height: 30px;
                /* font-size: 85em; */
                font-weight: 700;
                color: #919191;
                border: 2px solid #333;
                padding: 4px 30px;
                background: #1d1d1d;
                border-radius: 20px;
                outline: none;
                background-position: center;
            }

            & .menu-wrapper {
                font-size: 14px;
                padding-left: 25px;
                display: flex;
            }

            & .menu-wrapper ul {
                display: flex;
                gap: 10px;
                align-items: center;
                flex-shrink: 1;
            }

            & li {
                font-size: 13px;
                font-weight: 700;
                padding: 0 10px;
                height: 20px;
                list-style: none;
                transition: color 500ms 200ms ease-in-out, transform 500ms 200ms ease-in-out;
                flex-shrink: 1;
                flex-wrap: wrap;

                & a {
                    text-decoration: none;
                    color: #919191;
                }
            }

            & li:nth-child(2) {
                color: rgb(64, 187, 16);
            }

            & li:nth-last-child(1) {
                color: rgb(255, 255, 255);
                border-left: 1px solid white;
            }

            & li:nth-last-child(2) {
                color: rgb(255, 255, 255);
            }

            & li:hover {
                color: rgb(244, 245, 223);
                transform: scale(1.2);
                cursor: pointer;

            }
        }
    }
}


/* main-body-wrapper */
.main-body-wrapper {
    background-image: url("	https://img.yts.mx/assets/images/movies/godzilla_x_kong_the_new_empire_2024/background.jpg");
     /*background-image: url("https://static.vecteezy.com/system/resources/previews/013/310/749/non_2x/dark-black-and-gray-blurred-gradient-and-leaf-shadow-background-has-a-little-abstract-light-free-photo.jpg");*/
    background-size: cover;
    position: relative;

    & ::after {
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;

    }

}

.header-body-wrapper {
    display: flex;
    justify-content: center;

    & .center-wrapper {
        /* height: 250px; */
        flex-basis: 90%;
        flex-direction: column;
        display: flex;
        text-align: center;
        padding: 50px 0px;
        /* background-color:  #1d1d1d; */


        & .topic {
            font-size: 40px;
            color: rgb(250, 245, 235);
            font-weight: 1000;
            padding: 20px 0px;

        }

        & .paragraph {
            width: 60%;
            color: antiquewhite;
            align-self: center;
            justify-self: center;
            font-size: 15px;

            /* margin: 0 auto; */
        }

        & .link1 a {
            color: rgb(73, 158, 243);
            font-size: 15px;
            font-weight: 900;
            text-decoration: none;
        }

        & .link1 a:hover {
            cursor: pointer;
        }

        & .link2 {
            display: flex;
            padding-left: 370px;
            padding-top: 10px;
            padding-bottom: 25px;
        }

        & .link2 a {
            color: rgb(73, 158, 243);
            font-size: 15px;
            font-weight: 900;
            text-decoration: none;
        }

        & .center-footter {
            display: flex;
            color: aliceblue;
            justify-content: space-between;
            align-items: center;

            & .star {
                color: aqua;
            }

            & .leftfotter {
                padding-left: 350px;

            }

            & .wifi {
                padding-left: 500px;
                cursor: pointer;
            }

            & .wifi img:hover {
                transform: scale(1.2);
                cursor: pointer;
            }

            & .rightfotter {
                padding-right: 100px;
            }

            & .rightfotter:hover {
                transform: scale(1.2);
                cursor: pointer;
            }
        }
    }
}

/* card */

.movie-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 40px;
    background-image: url("https://img.freepik.com/premium-photo/blur-abstract-background_558873-741.jpg?size=626&ext=jpg&uid=R99303139&ga=GA1.2.657247578.1716105743&semt=ais_user");
    background-size: cover;
    background-position: center;


    & .card-wrapper {
        padding: 10px 5px;
        flex-wrap: wrap;
        display: flex;
        justify-content: space-around;
        width: 95%

    }
}

/* .card1{
    flex-shrink: 1;
    flex-basis: 230px;
}
.card2{
    flex-shrink: 1;
    flex-basis: 230px;

}
.card3{
    flex-shrink: 1;
    flex-basis: 230px;

}
.card4{
    flex-shrink: 1;
    
} */


.image {
    border: 5px solid rgb(255, 255, 255);
    transition: border 200ms ease-in-out, transform 300ms ease-in-out;
}

.image:hover {
    border: 5px solid rgb(52, 241, 84);
    transform: scale(1.01);
    cursor: pointer;
}

.name,
.year {
    color: white;
}

.name,
.year:hover {
    cursor: pointer;
    color: lightgrey;
    transform: scale(1.2);
}

@media screen and (max-width: 1150px) {
    .center-wrapper {
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;
        /* flex-wrap: wrap; */
    }

    .menu-wrapper ul {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .right-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }
}