/*Seguindo o modelo SMACSS, este documento CSS é o documento CSS de categoria "base", ou seja, usado em todas as páginas do projeto.*/

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-texto-principal: #9E5112;
    --cor-texto-secundario: #866840;
    --cor-texto-destaque: #E3CCAE;
    --cor-fundo-principal: #222222;
    --cor-fundo-secundaria: #2F2F2F;
    --cor-borda: #8B4913;

    --font-texto: 'Montserrat', sans-serif;
    --font-titulo: 'Krona One', sans-serif;
}

/* ESTILIZACAO GERAL PARA TODAS AS PAGINAS */

* {
    margin: 0;
    padding: 0;
}

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

/* HEADER */

.cabecalho {
    padding: 6vh 30vh;
}

.cabecalho__menu {
    display: flex;
    gap: 13vh;
}

.cabecalho__menu__link {
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.cabecalho__menu__link:hover {
    color: var(--cor-texto-destaque);
}

/* FOOTER */

.rodape {
    background-color: var(--cor-fundo-secundaria);
    padding: 3vh 30vh;
    text-align: center;
    font-weight: 400;
}

/* ---BLOCO DE SELETORES - INICIO--- */

.cabecalho__menu__link,
.rodape {
    font-family: var(--font-texto);
    font-size: 1.5rem;
    color: var(--cor-texto-secundario);
}

/* ---BLOCO DE SELETORES - FIM--- */

/* RESPONSIVO */

@media (min-width: 2000px) {
    .cabecalho {
        padding: 8vh 30vh;
    }

    .cabecalho__menu {
        gap: 14vh;
    }
    
    .rodape {
        padding: 6vh;
    }

    .cabecalho__menu__link,
    .rodape {
        font-size: 3rem;
    }
}

@media (max-width: 1200px) {
    .cabecalho {
        padding: 10vh;
    }

    .cabecalho__menu {
        justify-content: center;
    }

    .rodape {
        padding: 3vh 10vh;
    }
}

@media (max-width: 600px) {
    .cabecalho__menu {
        flex-direction: column;
        gap: 6vh;
    }
    
    .cabecalho,
    .rodape {
        padding: 5vh;
    }

    .cabecalho__menu__link,
    .rodape {
        font-size: 1rem;
    }
}