/* --------- ESTILOS GERAIS DA PÁGINA --------- */

/* Importando fontes */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@100..900&family=Questrial&display=swap');

/* Retirando margem e padding de todos os elementos, e definindo como border-box */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Definindo scroll-behavior */
html {
    scroll-behavior: smooth;
}

/* Definindo fonte e peso de fonte para subtítulos de segundo nível e links de navegação */
h2, .navbar-links a {
    font-family: "Noto Serif Bengali", serif;
    font-weight: 400;
}

/* Definindo fonte para parágrafos e títulos de terceiro nível */
p, h3 {
    font-family: "Questrial", sans-serif;
}

/* Definindo font-size responsivo para os títulos de seção e título da página*/
.titulo, h2 {
    font-size: clamp(1.4em, 3vw, 2em);
}

/* Definindo margem horizontal para o título da página */
.titulo {
    margin: 0 30px;
}

/* Alterando a cor das linhas que dividem as seções */
hr {
    border: 1px solid #bbb;
}

/* Definições em comum para o header e footer */
header, footer {
    background-color: #252525;
    color: #fff;
    padding: 1em;
}

/* Centralizando horizontalmente o conteúdo do footer e definindo um font-size responsivo */
footer p {
    text-align: center;
    font-size: clamp(1em, 3vw, 1.2em);
}

/* Fixando o header no topo da página, definindo altura de 75px e overflow auto para quando precisar rolar os elementos do nav */
header {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Definindo background do main */
main {
    background-color: #d9d9d9;
}

/* Alinhamento central para os subtítulos de segundo nível */
h2 {
    text-align: center;
}

/* Retirando text-decoration de todos os links */
a {
    text-decoration: none;
}

/* --------- DEFINIÇÃO DO NAVBAR COLAPSÁVEL --------- */
/* Definindo o nav */
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* Configurações para a lista não ordenada de links dentro do nav */
.navbar-links ul {
    display: flex;
    list-style-type: none;
}

/* Definindo cor, margem lateral e tamanho para os links do nav */
.navbar-links a {
    color: #fff;
    font-size: clamp(1.1em, 2vw, 1.4em);
    margin: 0 30px;
}

/* Definições para o botão de abrir/fechar a navbar */
#btn_menu_toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: none;
    margin: 10px 25px;
}

/* Definições para os ícones do botão de abrir/fechar a navbar */
#btn_menu_toggle i {
    font-size: 2em;
    color: #fff;
}

/* Definição de display padrão para os ícones com id BTN_OPEN e BTN_CLOSE*/
#btn_menu_toggle #btn_open {
    display: block;
}
#btn_menu_toggle #btn_close {
    display: none;
}

/* Definição de display para os ícones BTN_OPEN e BTN_CLOSE quando o botão de toggle receber a classe que indica que ele foi clicado */
#btn_menu_toggle.aberto #btn_open {
    display: none;
}
#btn_menu_toggle.aberto #btn_close {
    display: block;
}


/* Regras que serão ativadas em telas de exibição com menos de 870px de width */
@media screen and (max-width: 870px) {
    #btn_menu_toggle {
        display: block;
    }
    .navbar-links {
        display: none;
    }
    .navbar-links.aberto {
        display: block;
        width: 100%;
    }
    .navbar-links ul {
        flex-direction: column;
    }
}
/* -------------------------------------------- */

/* Definindo padding vertical responsivo e horizontal de 1em, além de um scroll-margin-top para que o scroll das seções fique adequado */
section {
    padding: min(5em, 8vw) 1em;
    scroll-margin-top: 75px;
}

/* Regras que serão ativadas em telas de exibição com menos de 393px de width */
@media screen and (max-width: 393px) {
    section {
        scroll-margin-top: 115px;
    }
}

/* Por questão de responsividade, definindo a div que contém os links das seções com uma flexbox com wrap ativado */
.link_secoes {
    display: flex;
    flex-wrap: wrap;
}

/* Cor para os links do nav ao passar do mouse */
.navbar a:hover {
    color: #ffc400;
    transition: color 0.2s ease-in-out;
}