@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

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

body{
    background-color:#fafdd1; /*cor do fundo da página*/
    color: black; /*não é obrigatório pq já é preto*/
    font-family: "TikTok Sem", Arial;
    font-weight:400;
}

header{
    background:linear-gradient(to right, #cfb9f4, #eef3a8) ; /*degradê*/
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

header img { /*tamanho da imagem*/
    width: 170px; /*largura*/
    height: auto; /*altura*/
    margin-bottom:5px ;
}

nav{
    text-align: center;
}


nav a{
    color: black;
    font-weight: bold;
    font-size: 16px;
    text-decoration:none;
    padding:5px 6px ;
}

nav a:hover{
    color: black;
    background-color:rgb(142, 43, 223);
    border-radius: 15px; /*arredondar a borda*/
}

main{
    margin:20px ;
}

#frase-de-efeito{ /*# quando é ID*/
    letter-spacing:1px;
    color: rgb(144, 96, 221);
    font-weight:60;
    font-size:1rem ;
    text-align: center;
    text-shadow:0px 0px 0px rgba(93, 40, 179, 0.664); /*sombra da frase*/
}

h1{
    color: rgb(73, 6, 134);
    font-size: 2rem;
    text-align:center;
    margin:10px ;
}

.listagem-conteúdo{
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /*para quando passar pro celular quebre bonito*/
    gap:7px ;
    margin-bottom:10px ;


}

.listagem-conteúdo a{
    background-color:rgb(142, 43, 223) ;
    color: rgb(255, 255, 241);
    text-decoration:none ;
    padding:5px 12px ;
    border-radius:15px ;
    text-align: center;
    font-weight: 400;

}

.listagem-conteúdo a:hover{
    background-color: #f5f4ab;
    color:rgb(215, 158, 26) ;
    
}

h2{
    color: rgb(142, 43, 223);
}

.tópicos{
    text-align: justify;
}

article{
    margin: 20px 5px;
}

p{
    margin:5px;
}

#acido{
    text-align: center;
}

figure img{
    width:250px ;
    height:auto;
    border-radius:5px ; /*arredondar as bordas*/
    margin-top:15px ;
    margin-left: 5px;
    margin-bottom:5px ;
}

ul{
    list-style-position:inside;
}

ol{
    list-style-position:inside;
}

li{
    margin:8px 0px ;
}


#topo{
    margin-top:20px ;
    text-align: center;
    font-weight:bold ;
}

#topo a {
    text-decoration:none;
    color: black;
    text-align: center;
}

#topo a:hover{
    color:  #370d5f; /*quando passar o mouse muda de cor*/
}

footer{
    background-color:  rgb(144, 96, 221);
    color: white;
    text-align: center; /*alinhar o texto*/
    padding:20px 0px ;
} 

footer img{
    width:25px ;
    height:auto;
    transition:transform 0.2s ease; /*duração do tempo do efeito*/
    margin:3px 3px ;
}

footer img:hover{
    transform: scale(1.5);  /*o tanto q vai aumentar o ícone*/
}