[Projeto] Meu Projeto 2 - CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dosis:wght@200..800&family=Tilt+Neon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dosis:wght@200..800&family=Rubik:ital,wght@0,300..900;1,300..900&family=Tilt+Neon&display=swap');

:root { /*variaveis: repetição por isso! atribuiu chamado como escopo golbal{} se chama seleção- site colorhunt*/
    --cor-primaria: #000000;
    --cor-secundaria:#22D4FD; 
    --cor-tercearia: #fd22a2;
    --cor-hover:#272727;
    --cor-simbolo: #f6f6f6;

    --font-principal:'Krona One', sans-serif;
    --font-secundaria:"Tilt Neon", sans-serif;
    --font-tercearia:"Montserrat", sans-serif;   
}
* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: #F6F6F6;
}

.cabecalho {
    padding: 2% 0% 0% 15%;
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    font-family: var(--font-tercearia);
    font-size: 24px;
    font-weight: 600;
    color: var(--cor-secundaria); 
    text-decoration: none;  /* tirar o sublinhad nesse caso*/
}

.apresentacao {
    padding: 8% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: var(--font-principal);
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family:var(--font-secundaria);
}

.titulo-destaque {
    color: var(--cor-tercearia);
}

.subtitulo {
    margin-left: 80px;
    font-family: var(--font-secundaria);
    font-weight: 400; /*peso da fonte*/
    font-size: 24px;
}

.apresentacao__links {
    display: flex;/*posição de linha displau: flex.*/
    flex-direction: column;/* nesse caso aepnas column , assim ele fica na ordem do html*/
    justify-content: space-between;
    align-items: center;
    gap: 32px;    
}

.apresentacao__links__link {
    /* background-color: #fd22a2; crt kc comentario */
    display: flex;/*padrão canto direito*/
    justify-content: center;
    gap: 20px;
    width: 378px; /*tamanho mais largo*/
    text-align: center;
    border-radius: 8px; 
    border: 10px dotted var(--cor-secundaria); /*solid é porque é borda CSS border*/
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-simbolo);
    font-family: var(--cor-secundaria);
}

.apresentacao__links__link img {
    height: 40px; /*define a altura como 50pixels, a largura nesse caso será equivalente*/    
}

.apresentacao__links__link:hover {
    background-color:var(--cor-hover);
}

.rodape {
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-secundaria);
    text-align: center;
    font-family: var(--font-tercearia);
    font-size: 24px;
    font-weight: 400;
}