*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background-image:url(./assets/ggd.png);
    background-position:top center;
    background-size:100% auto;
    background-repeat:no-repeat;
    background-color:#012c2b;
   

}

body *{
    font-family:'Inter', sans-serif;
    line-height:160%;

}

ul{
    list-style:none;
}

header{
    padding-top:32px;
    height:calc(120px+32px);
}

header div{
    width:120px;
    margin:auto;
    background-image:linear-gradient(90deg, #f36134 0%, #9ff01e 50.52%, #e25cd7 100%);
   
    border-radius:50%;
    
    display:flex;
    padding:4px;
    
    transform:transform .3s;

}

header div:hover{
    transform:scale(1.1);
}

header img{
    width:100%;
    border-radius:50%;
}

main{
    max-width:580px;
    width:90%;
    margin:32px auto;

    display:grid;
    gap:24px;
}


section{
    color:white;
    background-image:linear-gradient(90deg, #9572FC 0%, #42E7AD 50.52%, #E2D45C 100%);
    padding-top:4px;
    border-radius:10px;
}


section div {
    background-color:#012020;;
    padding:32px;
    padding-top:24px;
    border-radius:8px;
}

section ul{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:24px;
}

section ul li{
    transform:transfrom .3s;
}

section ul li:hover{
    transform:scale(1.1);
    
}

.filmes_meus{
    letter-spacing:-0.47px;
    text-align:center;
  
   
    
}

section p{
    letter-spacing:-0.18px;
    color:#a1a1aa;
}



.filme_list img{
    width:90px;
    border-radius:8px;
    right:90px;
}

.titulo_filmes{
    font-size:12px;
    text-align:center;
   
    width:90px;
  
}


.channel-list img{
    border-radius:50%;
    width:70px;
    border:1px solid #443E54;
}


/*animation*/

header div{
    animation:fromTop .7s 2s backwards;

}
@keyframes fromTop{
    from{
        opacity:0;
        transform:translateY(-30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

main section{
    animation:fromBotten .7s backwards;
} 

main section:nth-child(1){
    animation-delay:.2s;
}

main section:nth-child(2){
   
    animation-delay:.6s;
   
}

main section:nth-child(3){
    animation-delay:.8s;
}
main section:nth-child(4){
    animation-delay:.4s;
}

main section:nth-child(5){
   
    animation-fill-mode: .5s;
   
}

main section:nth-child(6){
    animation-delay:.8s;
}

main section:nth-child(7){
    animation-delay:.3s;
}

main section:nth-child(8){
   
    animation-fill-mode: .5s;
   
}

main section:nth-child(9){
    animation-delay:.8s;
}

main section:nth-child(10){
   
    animation-fill-mode: .5s;
   
}

main section:nth-child(11){
    animation-delay:.8s;
}
@keyframes fromBotten{
    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}



/*swiper*/

section{
    overflow:hidden;
}

section ul{
    gap:0;
    flex-wrap:nowrap;
   

}

@media (min-width: 200px) {
    section ul li {
       margin-left:27px;
     }
   }