style.css

*{
    box-sizing:border-box;
}

:root{
    --primary-color:#22254b;
    --secondary-color:#373b69;
}

body{
    background-color: var(--primary-color);
    margin:0;

}
header{
    padding:2rem;
    display: flex;
    justify-content:space-around;
    background-color: var(--secondary-color);
}

.search{
    background-color: transparent;
    border:2px solid var(--primary-color);
    padding:0.5rem 1rem;
    border-radius:50px;
    font-size:1rem;
    color:white;
    font-family: inherit;
}
.search:focus{
    outline:0;
    background-color: var(--primary-color);
}
.search::placeholder{
    color:#7378c5;
}


main{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
}
.movie{
    width:300px;
    margin:1rem;
    border-radius: 3px;
    box-shadow: 0.2px 0.4px 5px rgba(0,0,0,0.1);
    background-color: var(--secondary-color);
    position:relative;
    overflow: hidden;
}


.movie img{
   width:100%;

}
.movie-info{
    color:white;
    display: flex;
align-items: center;
justify-content: space-between;
padding:0.5rem 1rem 1rem;
letter-spacing: 0.5px;
}
.movie-info h3{
    margin-top:0;
}

.movie-info span{
  background-color: var(--primary-color);  
  padding:0.25rem 0.5rem;
  border-radius: 3px;
  font-weight: bold;
}

.movie-info span.green{
    color:lightgreen;
}
.movie-info span.orange{
    color:orange;
}
.movie-info span.red{
    color:red;
}

.overview{
    position:absolute;
    right:0;
    left:0;
    bottom: 0;
    background-color: white;
    padding: 1rem;
    max-height:100%;
    transform: translateY(101%);
    transition:transform 0.3s ease-in;
}
.movie:hover .overview{
    transform: translateY(0);
}
.nameout{
    display: flex;
    justify-content: center;
    align-items: center;
}
.name{
    color:white;
    font-size: 2rem;
}