*{
    font-family: Arial, sans-serif;
}

body{
    padding: 20px;
    background-color: #021042;
}

header{
    background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);

    padding: 15px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
}
.nav-links{
    justify-content: space-between;
    display: flex;
    gap: 20px;
}
header a{
    color: rgb(0, 0, 49);
    font-size: 25px;
    text-decoration: none;
    margin: 10px;
}
header h3:hover{
    box-shadow: 5px 5px 8px rgba(255, 255, 255, 0.5);
}
header h3{
    display: inline-block;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    padding: 7px;
    border-radius: 30px;
}

.movies{
    padding: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.movies h1{
    font-size: 55px;
    margin-bottom: 15px;
    color: rgb(255, 255, 255);
}
.movies p{
    margin-left : 60px;
    margin-right : 60px;
    font-size: 30px;
    color: white;
    text-align: center;
}


.classics{
    padding: 25px;
    background-image: url('classic background.jpeg');
    background-size: cover;
    color: rgb(105, 64, 3);
    justify-content: space-between;
    border-radius: 10px;
}
.classics h1{
    font-size: 55px;
    text-align: center;
}
.classics p{
    font-size: 30px;
    text-align: center;
}
.movie-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    margin-right: 15px
}

.movie-image {
    width: 250px;
    height: auto;
    display: block;
    border-radius: 10px;
}

.title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 229px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 0 0 10px 10px;
}

.movie-container:hover .title {
    opacity: 1;
}
   
.scrollbar_images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 98%;  
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px;
}


.marvel{
    margin-bottom: 40px;
    padding: 25px;
    background-image: url('marvel bg.jpeg');
    background-size: cover;
    color: rgb(255, 255, 255);
    justify-content: space-between;
    border-radius: 10px;
}
.marvel h1{
    font-size: 55px;
    text-align: center;
}
.marvel p{
    font-size: 30px;
    text-align: center;
}


.dystopian{
    margin-top: 40px;
    padding: 25px;
    background-image: url('dystopian bg.jpeg');
    background-size: cover;
    color: rgb(255, 255, 255);
    justify-content: space-between;
    border-radius: 10px;
}
.dystopian h1{
    font-size: 55px;
    text-align: center;
}
.dystopian p{
    font-size: 30px;
    text-align: center;
}


.animated{
    margin-top: 40px;
    padding: 25px;
    background-image: url('animated bg.jpeg');
    background-size: cover;
    color: rgb(255, 255, 255);
    justify-content: space-between;
    border-radius: 10px;
}
.animated h1{
    font-size: 55px;
    text-align: center;
}
.animated p{
    font-size: 30px;
    text-align: center;
}


.guardians{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(121, 3, 3); 
    border-radius: 10px;
}
.guardians img{
    margin-right: 20px;
    border-radius: 10px;
}
.guardians.hidden{
    display: none;
}


.iron{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(121, 3, 3); 
    border-radius: 10px;
}
.iron img{
    margin-right: 20px;
    border-radius: 10px;
}
.iron.hidden{
    display: none;
}



.end{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(121, 3, 3); 
    border-radius: 10px;
}
.end img{
    margin-right: 20px;
    border-radius: 10px;
}
.end.hidden{
    display: none;
}



.brandnd{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(121, 3, 3); 
    border-radius: 10px;
}
.brandnd img{
    margin-right: 20px;
    border-radius: 10px;
}
.brandnd.hidden{
    display: none;
}


.fantastic4{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(121, 3, 3); 
    border-radius: 10px;
}
.fantastic4 img{
    margin-right: 20px;
    border-radius: 10px;
}
.fantastic4.hidden{
    display: none;
}



.tenthings{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(211, 203, 157); 
    border-radius: 10px;
}
.tenthings img{
    margin-right: 20px;
    border-radius: 10px;
}
.tenthings.hidden{
    display: none;
}


.perksofbeing{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(211, 203, 157); 
    border-radius: 10px;
}
.perksofbeing img{
    margin-right: 20px;
    border-radius: 10px;
}
.perksofbeing.hidden{
    display: none;
}


.deadpoetssociety{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(211, 203, 157); 
    border-radius: 10px;
}
.deadpoetssociety img{
    margin-right: 20px;
    border-radius: 10px;
}
.deadpoetssociety.hidden{
    display: none;
}


.goodwillhunting{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(211, 203, 157); 
    border-radius: 10px;
}
.goodwillhunting img{
    margin-right: 20px;
    border-radius: 10px;
}
.goodwillhunting.hidden{
    display: none;
}


.littlewomen{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(211, 203, 157); 
    border-radius: 10px;
}
.littlewomen img{
    margin-right: 20px;
    border-radius: 10px;
}
.littlewomen.hidden{
    display: none;
}



.DonnieDarko{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(23, 56, 27); 
    border-radius: 10px;
}
.DonnieDarko img{
    margin-right: 20px;
    border-radius: 10px;
}
.DonnieDarko.hidden{
    display: none;
}

.hungergames{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(23, 56, 27); 
    border-radius: 10px;
}
.hungergames img{
    margin-right: 20px;
    border-radius: 10px;
}
.hungergames.hidden{
    display: none;
}

.interstellar{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(23, 56, 27); 
    border-radius: 10px;
}
.interstellar img{
    margin-right: 20px;
    border-radius: 10px;
}
.interstellar.hidden{
    display: none;
}

.percyjackson{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(23, 56, 27); 
    border-radius: 10px;
}
.percyjackson img{
    margin-right: 20px;
    border-radius: 10px;
}
.percyjackson.hidden{
    display: none;
}


.mazerunner{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(23, 56, 27); 
    border-radius: 10px;
}
.mazerunner img{
    margin-right: 20px;
    border-radius: 10px;
}
.mazerunner.hidden{
    display: none;
}



.despicableme{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(226, 224, 113); 
    border-radius: 10px;
}
.despicableme img{
    margin-right: 20px;
    border-radius: 10px;
}
.despicableme.hidden{
    display: none;
}

.penguins{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(226, 224, 113); 
    border-radius: 10px;
}
.penguins img{
    margin-right: 20px;
    border-radius: 10px;
}
.penguins.hidden{
    display: none;
}

.shrek{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(226, 224, 113); 
    border-radius: 10px;
}
.shrek img{
    margin-right: 20px;
    border-radius: 10px;
}
.shrek.hidden{
    display: none;
}

.cars{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(226, 224, 113); 
    border-radius: 10px;
}
.cars img{
    margin-right: 20px;
    border-radius: 10px;
}
.cars.hidden{
    display: none;
}

.zootopia{
    display: flex;
    margin-top: 10px;
    margin: 50px;
    padding: 25px;
    background-color: rgb(226, 224, 113); 
    border-radius: 10px;
}
.zootopia img{
    margin-right: 20px;
    border-radius: 10px;
}
.zootopia.hidden{
    display: none;
}

.text{
    font-size: 20px;
    color: white;
    text-align: center;
}