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


header{
    margin:auto;
    max-width: 520px;
    width:93%;
    margin-top:32px;
    margin-bottom: 32px;
    align-content: center;
    overflow:hidden;
  

}
/*header *{
    border: red 1px solid;
    
} */
header div#div-header-container{
   
    display:flex;
    align-items: center;
    transition: transform 0.5s;
    
}
header div#div-borda{
    display:flex;
    margin:auto;
    background-image: linear-gradient(90deg, #C91842 0%, #5CC2E2 100%);
    border-radius: 50%;
    padding:4px;
    position:relative;
    
}

/*header div#div-header-container:before{
    content:"Switch to Games Version";
    font-size: 15px;
   
    text-align: center;
    background-color: #121214;
    position:absolute;
    max-width: 50%;
    padding-top: 3%;
    padding-bottom: 3%;
    margin-left:1%;

    border-radius: 8px;
    font-family: 'Montserrat', monospace;
    color:#fff;
    border:solid 1px #c1c1c1;
    border-right: 1px solid transparent;
    animation: headerButton 0.3s;
    
}*/

header div#div-informacoes{
    opacity: 0;
    content:"Switch to Games Version";
    font-size: 15px;
    align-self: center;
    text-align: center;
    font-weight: 900;
    background-color: #121214;
    position:absolute;
    width:200%;
    max-width: 170%;
    max-height:25%;
    padding-top: 3%;
    padding-bottom: 20%;
    margin-left:1%;
    right:93%;
    border-radius: 8px;
    font-family: 'Montserrat', monospace;
   
    border:solid 4px #C91842;
    border-right: 1px solid transparent;
   animation: headerButton 0s backwards;
}
#div-borda:hover  #div-informacoes{
    animation:openHeaderButton 0.3s backwards;
    
   /* transition: 3s;*/
    opacity:1;
   
    
   
   
}
header a{
    color:#fff;
    text-decoration: none;
}
header a:hover{
     cursor:pointer;
    
}
header img{
    width:112px;
    border-radius: 50%;
    background-color: #121214;
}
header div#div-header-container:hover{
    transform: translateX(38%);
   
}

body {
    background-image: url("./assets/estrelas.jpg");
    background-color: #121214;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    font-family:'Montserrat',sans-serif

}
main{
    max-width: 520px ;
    width:90%;
    margin:auto;
    margin-bottom:63px;
    display:flex;
    flex-direction: column;
    align-content: center;
    margin-top:32px;
    gap:24px;

    
}
/*main *{
    border:1px solid red;

}*/

ul{
    display:flex; /*aqui vai organizar os li do ul*/
    gap:16px;
    margin-top:24px;
    list-style: none;
    flex-wrap:wrap;
}
ul li{
    transition: transform 0.45s;
}
ul li:hover{
    transform: scale(1.1);
    
}
.currents-list img, .favorites-list img{
    width: 100px;
    border-radius: 8px;
    border: 1px solid #555555
}

section{
    background-image: linear-gradient(90deg, #C91842 0%, #5CC2E2 100%);
    border-radius: 10px;
    padding-top: 4px;
 
    



}
section div{
    padding:32px;
    padding-left: 24px;
    background-color: #262629;
    border-radius: 8px;
    /*margin-top:24px;    isso na vdd é o flex gap das divs, ou seja vai no main*/
    
}



body h2{
    color: #fff;
    line-height: 160%;
   
}
body p{
    color: #c1c1c1;
    
    line-height: 160%;
    letter-spacing: -0.18px;
    
}

/*Animations*/
section {
    animation: fromBottom .7s backwards;
}

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

@keyframes fromBottom{
    from{
        opacity:0;
        transform: translateY(180px);
    }

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

header div{
    animation: fromTop 1s 0.2s backwards;
}
@keyframes fromTop{
    from{
        opacity:0;
        transform: translateY(-30px);
    }

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

@keyframes headerButton{
    from{
        opacity: 0;
    }

    to{
        opacity:(+1px);

    }
}

@keyframes openHeaderButton{
    from{
        clip-path:inset(0 0 0 100%);
    }
    to{
        clip-path: inset(0 0 0 0);
    }
}