styles.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
      background-color: #22254b;
      font-family:"Poppins",'sans-serif';
}
header{
    display:flex;
    justify-content:flex-end;
    padding:1.5rem;
    background-color: #373b69;
}

header input{
    padding: 0.5rem;
    border-radius:50px;
     border: 1.7px solid #22254b;
     background-color:transparent;
     color:#ffff;

}
header input:focus{
    color:#ffff;
    font-size:1rem;
   outline:none;
}
header input::placeholder{
      color:#989ee0;
    font-weight:bold;
    font-size:1rem;

}
main{
    display:flex;
    flex-wrap:wrap;
}
.movies{
    width:300px;
    background-color: #373b69;
    color:#eee;
    box-shadow: 0  4px 5px rgba(0,0,0,0.2);
    margin:2rem;
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
.movies img{
    width:100%;
}
.movies-info{
    display:flex;
    justify-content:space-between;
    letter-spacing: 1.5px;
    text-align:center;
    align-items: flex-start;

}
.movies-info h3{
    padding:1rem;
    font-weight:bold;
}
.movies-info span{
    
    font-weight:bold;
    background-color:#22254b;
    text-align:center;
    border-radius: 15px;
     padding:1rem;
    margin-right:1rem;
    margin-bottom:1rem;
    margin-top:0.5rem;

}
.movies-info span.green{
    color:rgb(121, 224, 121);
}
.movies-info span.red{
    color: rgb(236, 65, 65);
}
.movies-info span.orange{
    color:orange;
}
.date{
    font-size:1rem;
    padding: 0.25rem ;
    font-weight:bold;
    color:#989ee0;
    text-align:center;
}
.overview{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    color:#22254b;
    background-color:#ffff;
    padding:2rem;
    transform: translateY(101%);
    transition: transform 0.6s ease-out;
}
.overview h4{
    font-weight:bold;
    
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    
}
.movies:hover .overview{
    transform:translateY(0);

}