@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ê*/
    padding:20px 0px ;
    display: flex;
    flex-direction: column;
    justify-content:center ;
    align-items: center;
}



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


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{
    text-align:center;
    margin:20px;
}
    
#frase-de-efeito{ /*# quando é ID*/
    letter-spacing:1px;
    color: rgb(144, 96, 221);
    font-weight:60;
    font-size:1rem ;
    text-shadow:0px 0px 0px rgba(63, 19, 134, 0.692); /*sombra da frase*/
}

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

h2{
    color: #a44ff3;
    margin-bottom:3px ;
}

.main-container{  /*blocos*/
    display:flex;
    max-width:1000px;
    gap:20px;
    flex-wrap: wrap;
    margin:0 auto ; /*auto para mudar a margem dos lados*/
}

.main-block{
    display:flex;
    flex-direction: column;
    flex-grow:1;
    flex-shrink: 1;
    flex-basis:200px ;
    background-color: rgb(238, 220, 250);
    padding:20px;
    border-radius:10px;
    box-shadow:2px 2px 5px black ;
    justify-items:space-evenly;
}

.main-block a{
    color:rgb(242,182,41);
    background-color: rgb(243, 237, 211);
    text-decoration: none;
    padding:5px 12px;
    margin-top: 8px;
    margin-left:4px ;
    margin-right:4px;
    margin-bottom:3px ;
    border-radius:15px ;
    font-weight:500 ;
}
 

.main-block a:hover{
    color: rgb(243, 237, 211);
    background-color:rgb(242,182,41) ;
}


.table-responsive{
    width:100%;
    overflow-x:auto;
   
    max-width: 1000px;
    margin: 40px auto 0px auto;
    padding: 40px;
  
    background-color:rgb(238, 220, 250);
    border-radius: 10px;
    box-shadow: 0px 0px 6px black;
} 


table{
    border-collapse:collapse;
    text-align:center;
    
}

th{
    background-color: rgb(253, 231, 86);
    color:black ;
    padding: 5px;
}

td{
    background-color: #f8fdb2;;
    color:black;
    padding: 5px;
}

td a{
    text-decoration:none;
    color:rgb(133, 89, 8);
    font-weight:bold ;
}

td a:hover{
    color: #350672;

}



#topo{
    margin-top:20px ;
    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);
}




/*width - Define a largura da caixa
height - Define a altura da caixa (pode ser auto)
padding - Espaçamento interno (entre borda e conteúdo)
margin - Espaçamento externo (entre caixas ou bordas da página)
background-color - Cor de fundo
border - Define a borda (largura, tipo e cor)
border-radius -	Deixa a caixa com cantos arredondados
box-shadow - Adiciona sombra à caixa
color -	Define a cor do texto dentro da caixa
text-align - Alinha o texto (left, center, right)
font-family	- Define a fonte do texto
escrever dois valores, o primeiro é do top e bottom, o segundo do right e left
         1 top
    4 left     2 right
         3 bottom      */


/*você aplica display: flex ao elemento pai (container). Os elementos filhos se tornam "itens flexíveis
flex-direction definir qual será o eixo principal (row=linha, column= coluna)
justify-content alinha de acordo com o eixo principal
align-items alinha de acordo com o eixo secundário*/