*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}

body{
    background-image: url(Fundo.jpg);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #121214;
}
body * {
    font-family: 'Inter', sans-serif;
    line-height: 160%;
}
header{
    padding-top: 32px;
    height: calc(120px+32px);
}
header div{
    width: 120px;
    margin: auto;/*margin:auto centralizes the divs and all the elements as display:block, all the elements as properties of text use the text-align:center */
    background-image: linear-gradient(90deg, #9572FC 0%, #43E7AD 50.52%, #E2D45C 100%);
    border-radius: 50%;
    display: flex; /* display flex in box as one element, align this element of the center*/
    padding: 4px;
    transition: transform, .3s;/*Transition its do a ligation between the element of transition and elemente as hover,declarate what transform are in element as hover and time of transition in seconds: example "transform, .3s"*/
}

header div:hover{
    transform: scale(1.1);/*scale(1) its 100% of element dad,and scale(1.1) is the 110% becomming bigger, transform has with are declarate in transition to has the second of transition*/
}

header img{
    width: 100%;
    height: 120px;
    border-radius: 50%;
}
main{
    margin: 24px auto;
    margin-top: 32px;
    max-width: 580px;
    width: 90%;
    display: flex;
    flex-direction: column;/*ATENTTION display:flex + flex direction:column align the itens how column*/
    gap: 24px;/*gap put space how margins "he need display flex or display grid"*/  /*if use only display grid not need of the flex-direction:column*/
}

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

section div{
    background-color: #2A2634;
    padding: 32px;
    padding-top: 24px;
    border-radius: 8px;
    border: 1px solid;
}

section h2{
    letter-spacing: -0.47px;
}

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

section ul{
    display: flex;
    flex-wrap: wrap; /* flex-wrap:wrap make the elements auto adjust with screen*/
    gap: 16px; /*The gap need of display flex or display grid*/
    margin-top: 24px;
}
section ul li{
transition: transform, .3s;
}
section ul li:hover{
    transform: scale(1.1);
}

.games-list img{
    border-radius: 8px;
    width: 90px;/*ATENTION the height try to keep the proportion*/
}
.channel-list img{
    border-radius: 50%;
    width: 70px;
    border: 1px solid #443E54;
}

/*Animation*/

header div{
    animation: fromTop .7s .2s backwards; /*this use animation, and the primer element is the name what you use of the @keyframe,the second element its the time of animation, and tercer element is the delay to init the animation,backwards save the properties of the animation to before the delay init*/
}

main section{
    animation: fromRight .7s  backwards;
}
main section:nth-child(1){
    animation-delay: .0s;
}
main section:nth-child(2){
    animation-delay: .3s;
}
main section:nth-child(3){
    animation-delay: .6s;
}

@keyframes fromTop {/*Declarate the name of the animation*/
    from{    /*from is of where init the animation*/
        opacity: 0;
        transform: translateY(-30px);
    }
    to{     /*to is where ends the animation*/
        opacity: 1;
        transform: translateY(0);
        
    }
}
@keyframes fromRight {
    from{
        opacity: 0;
        transform: translateX(-30px); /*the axle y is diferent of the axle y of the school,its the inverse, negative its to top and positive its to bottom */
    }
    to{
        opacity: 1;
        transform: translateX(0);
        
    }
}