@import url(global.css);

body a{
    color: #fff;
}

#top{
    font-size: 60px;
    margin: 0;
    padding: 30px 20px;
    font-weight: bold;
}

.top{
    display: flex;
    gap: 210px;
    justify-content: center;
}

.filmes-top > a{
    text-decoration: none;
    transition: transform 0.3s ease-in-out;

}

.filmes-top  img{
    position: relative;
    transition: transform 0.3s ease-in-out;
    object-fit: cover;
    height: 258px;
    width: 420px;
    border-radius: 10px;
}

.filmes-top > img:hover{
    transform: scale(1.05);
}

.filmes-top{
    position: relative;
}

.filmes-top  h1{
    position: absolute;
    margin: 0;
    font-size: 250px;
    font-weight: bold;
    top: -25px;
    left: -80px;
}

.filmes-top h2{
    margin: 0;
    font-weight: normal;
    font-size: 35px;
}

.filmes-recentes{
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.filmes-rec > a{
    text-decoration: none;
}

.filmes-rec > img{
    transition: transform 0.3s ease-in-out;
}

.filmes-rec > img:hover{
    transform: scale(1.05);
}

.filmes-rec{
    padding:0px 20px 0px 40px;
    position: relative;
}

.filmes-rec img{
    width: 95%;
    position: relative;
    border-radius: 10px;
    object-fit: cover; 
    object-position: center;
}

.filmes-rec h2{
    margin: 0;
    font-weight: normal;
    font-size: 25px;
}

.series-recentes{
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.series-rec > a{
    text-decoration: none;
}

.series-rec{
    padding:0px 20px 0px 40px;
    position: relative;
    width: 175px;
    height: 220px;
}

.series-rec  img{
    width: 140%;
    position: relative;
    border-radius: 10px;
    object-position: center;
}

.series-rec h2{
    margin: 0;
    font-weight: normal;
    font-size: 25px;
}

.animacao > img{
    transition: transform 0.3s ease-in-out;
}

.animacao > img:hover{
    transform: scale(1.10);
}

footer {
    opacity: 50% ;
    display: flex;
    justify-content: center;
    margin-top: 120px;
    background-color: var(--menu-footer);
    font-size: 15px
}

footer a {
  text-decoration: none;
  color: var(--cor-texto);
  transition: 0.2s ease-in-out;
}

footer a:hover {
  color: #ffffffad;
}