/* Estilo do container dos botões de aumento/diminuição de fonte e contraste */
.fonte-contraste {
    display: flex; /* Alinha os botões em uma linha */
    gap: 10px; /* Espaçamento entre os botões */
}

/* Estilo dos botões de aumento/diminuição de fonte e contraste */
.fonte-contraste button {
    display: flex; /* Organiza o conteúdo do botão como flexbox */
    align-items: center; /* Alinha o conteúdo verticalmente ao centro */
    justify-content: center; /* Alinha o conteúdo horizontalmente ao centro */
    padding: 10px; /* Espaçamento interno dos botões */
    border: none; /* Remove a borda padrão */
    background: none; /* Remove o fundo padrão */
    font-family: 'Poppins', sans-serif; /* Define a fonte como 'Poppins' */
    font-size: 16px; /* Define o tamanho da fonte como 16px */
    font-weight: 300; /* Define o peso da fonte como negrito (700) */
    color: #fff; /* Define a cor do texto como branca */
    cursor: pointer; /* Altera o cursor para 'pointer' (mãozinha) ao passar sobre os botões */
    outline: none; /* Remove o contorno ao focar */
    transition: color 0.2s; /* Animação suave na mudança de cor */
}

/* Efeito de hover e active nos botões */
.fonte-contraste button:hover,
.fonte-contraste button:active {
    color: #FFD903; /* Define a cor como amarelo ao passar o mouse ou clicar */
    background: none; /* Remove qualquer fundo ao passar o mouse ou clicar */
}

/* Estilo do ícone dentro dos botões */
.fonte-contraste button i {
    margin-right: 5px; /* Espaçamento entre o ícone e o texto do botão */
    color: #fff; /* Define a cor do ícone como branca */
}

/* Estilo aplicado quando o modo contraste está ativado */
body.high-contrast {
    background-color: #000; /* Define o fundo do corpo como preto */
    color: #fff; /* Define a cor do texto como branca */
    border-color: #fff; /* Altera a cor das bordas para branco */
}

/* Estilo de diversos elementos no modo contraste */
body.high-contrast a, /* Links */
body.high-contrast p, /* Parágrafos */
body.high-contrast h1, /* Título nível 1 */
body.high-contrast h2, /* Título nível 2 */
body.high-contrast h3, /* Título nível 3 */
body.high-contrast h4, /* Título nível 4 */
body.high-contrast h5, /* Título nível 5 */
body.high-contrast h6, /* Título nível 6 */
body.high-contrast span, /* Elemento span */
body.high-contrast li, /* Itens de lista */
body.high-contrast th, /* Células de cabeçalho de tabela */
body.high-contrast td, /* Células de tabela */
body.high-contrast hr /* Linhas horizontais */
{
    color: #fff; /* Define a cor desses elementos como branca */
    border-color: #fff; /* Altera a cor das bordas para branco */
}

/* Altera fundo de tabelas e listas no modo contraste */
body.high-contrast table, /* Tabelas */
body.high-contrast ul, /* Listas não ordenadas */
body.high-contrast ol /* Listas ordenadas */
{
    background-color: #000; /* Define o fundo como preto */
    border-color: #fff; /* Borda branca */
}
