*{/* removendo os preenchimentos automatico da pagina */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


ul{ /* removendo os pontinhos da lista */
    list-style: none;
}

body{ /* adicionando o fundo/repedição/posição e cor do fundo */
    background-image: url(./assets/Fundo.jpg);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-color: #121214;
}

body *{/* colocando fonte*/
    font-family: "Montserrat", sans-serif;
    line-height: 160%

}

header {

    padding-top: 32px;
    height: 152px;
    
}

header div { /*criando a borda da imagem hearder*/
    width: 120px;
    margin: auto;

    /*colorindo a borda e arredondando*/

    background-image: linear-gradient(90deg, #C91842 0%, #5CC2E2 100%),
    linear-gradient(0deg, #262629, #262629);
    
    border-radius: 50%;

    display: flex;
    padding: 4px;

    /* "pulsando a imagem" */
    transition: transform .3s;
}

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

}

header img{ /*criando a borda da imagem hearder*/
    width: 100%;
    border-radius: 50%;
   
}

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

    display: grid;
    gap: 24px;

    margin-top: 32px;

}

section{/* colocando a borda e fazendo a curva*/   
    color: white;
    
    background-image: linear-gradient(90deg, #C91842 0%, #5CC2E2 100%),
    linear-gradient(0deg, #262629, #262629);

    padding-top: 4px;
    border-radius: 10px;
}

section div{/* fazendo a borda de dentro da caixa */
    background-color: #262629;
    padding: 32px;
    padding-top: 24px;
    
    border-radius: 8px;

}

section h2{/* editando as fontes do cabeçalho */
    font-weight: 900;
    font-size: 24px;
    
}


section p{/* editando as fontes do paragrafo */
    font-weight: 400;
    font-size: 16px;
    letter-spacing: -0.18px;    
    color: #C1C1C1;;

}


section ul{/* criando espaços na caixa
obs: so pode usar a tag "gap" 
quando usar a tag "display" */
    
    flex-wrap: wrap;
    display: flex;
    gap: 16px;
    margin-top: 24px;
   
}

section ul li{ /*criando transições (pulsão) das li */
    transition: transform .7s;

}

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

}

ul img {/* criando bordas na imagem */
    border-radius: 8px;
    width: 100px;
}

/* animações */

header div {
    animation: fromtop 1s .4s backwards;

}

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

main section:nth-child(1) { /*filho numero 1*/
    animation-delay: 2;
}

main section:nth-child(2) {/*filho numero 2*/
    animation-delay: .4s;

}
main section:nth-child(3) {/*filho numero 3*/
    animation-delay: .8s;

}

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

    to{
        transform: translateY(0);
    }
    
}

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

    to{
        transform: translateY(0);
    }
   
}