PROJETO do Desafio 3

• { margin: 0; padding: 0; }

:root { --cor-principal: black; --cor-secundaria: #f6f6f6; --cor-tercearia: mediumspringgreen; --cor-hover: #272727;

--font-primaria: 'Krona One', sans-serif;
--font-secundária: 'Montserrat', sans-serif;

}

body { background-color: var(--cor-principal); color: var(--cor-secundaria); box-sizing: border-box; }

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

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

.cabecalho__menu__link { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 24px; color: var(--cor-tercearia); text-decoration: none; }

.apresentacao { padding: 5% 10%; display: flex; align-items: center; justify-content: space-between; gap: 82px; }

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

.apresentacao__imagem { width: 50%; border-radius: 16px; border-style: outset; border-color: var(--cor-tercearia); }

section { justify-content: right; margin: 5%; }

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

.apresentacao__conteudo__titulo { font-size: 2.25rem; font-family: var(--font-primaria); font-weight: 600; }

.apresentacao__conteudo__texto { font-size: 1.5rem; font-family: var(--font-secundária); font-weight: 600; }

.apresentacao__links { display: flex; justify-content: space-between; flex-direction: column; align-items: center; gap: 32px; }

.apresentacao__links__subtitulo { font-family: var(--font-secundária); font-weight: 400; font-size: 1.25rem; }

.apresentacao__links__navegacao { display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-tercearia); width: 50%; text-align: center; border-radius: 8px; padding: 16px; font-size: 1.5rem; text-decoration: none; color: var(--cor-secundaria); font-family: var(--font-secundária); font-weight: 600; }

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

.rodape { color: var(--cor-principal); background-color: var(--cor-tercearia); padding: 24px; text-align: center; font-family: var(--font-secundária); font-size: 1.5rem; font-weight: 400;

}

@media (max-width: 1200px) {

.cabecalho{
    padding: 10%;
}
.cabecalho__menu{
    justify-content: center;
}
.apresentacao {
    flex-direction: column-reverse;}

}