body {
    display: flex;
    flex-direction: column;
    margin: 0;
    align-items: center; /* Centralizar o conteúdo horizontalmente */
}

main {
    flex: 1;
    padding: 1rem;
    width: 100%; /* Garantir que ocupe toda a largura */
    max-width: 800px; /* Limitar a largura máxima para melhor leitura */
}

.search-results {
    margin-top: 1rem;
    width: 100%; /* Garantir que ocupe toda a largura */
    max-width: 800px; /* Limitar a largura máxima para melhor leitura */
    text-align: left; /* Alinhar o texto à esquerda */
    padding: 1rem; /* Adicionar espaçamento interno */
    border: 1px solid #ddd; /* Adicionar borda */
    border-radius: 8px; /* Bordas arredondadas */
    background-color: white; /* Fundo branco */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
    min-height: 600px; /* Altura mínima aumentada para o triplo */
    max-height: 80vh; /* Altura máxima como uma porcentagem da altura da viewport */
    overflow-y: auto; /* Permitir rolagem vertical se necessário */
    color: black; /* Cor do texto preta */
}

.acordeao {
    width: 100%; /* Garantir que ocupe toda a largura */
    padding: 1rem;
    background-color: #393939;
    border-radius: 8px;
    box-shadow: 0.1rem 0.1rem 0.4rem rgba(201, 201, 201, 0.5), -0.1rem -0.1rem 0.4rem rgba(255, 255, 255, 0.5), inset 0 0 0 transparent, inset 0 0 0 transparent;
    transition: all 0.4s ease;
}

.bloco {
    margin: 0 0 1rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid #393939;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: #393939; /* Garante que o texto dentro do bloco seja preto */
}

.bloco:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.h2 {
    display: flex;
    align-items: center;
    margin: 0 0 0.5rem;
    cursor: pointer;
    color: var(--preto); /* Garante que o texto do título seja preto */
}

.h2 img {
    width: 24px;
    height: 24px;
    margin-right: 0.5rem;
}

.conteudo {
    display: none;
    padding: 0.5rem 0;
    color: var(--preto); /* Garante que o texto do conteúdo seja preto */
    width: 100%;
    height: auto;
    overflow: hidden;
    transition: height 0.5s ease;
}

.bloco.ativo .conteudo {
    display: block;
    color: var(--preto); /* Garante que o texto do conteúdo ativo seja preto */
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Garantir que ocupe toda a largura */
    margin-bottom: 1rem;
}

.search-input {
    width: 60%; /* Adapta a largura conforme a tela */
    padding: 0.5rem;
    font-size: 1rem;
    background-color: white; /* Fundo branco para a caixa de busca */
    border: 1px solid #ccc; /* Borda leve */
    border-radius: 4px; /* Bordas arredondadas */
    color: black; /* Cor do texto preta */
    margin-bottom: 0.5rem;
}

/* Adicionando um contêiner para os botões */
.button-container {
    display: flex;
    justify-content: space-between; /* Espaço entre os botões */
    width: 100%; /* Garantir que ocupe toda a largura */
    max-width: 800px; /* Limitar a largura máxima */
}

button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #393939; /* Cor de fundo preta */
    color: white; /* Cor do texto branca */
    border: none; /* Sem borda */
    border-radius: 4px; /* Bordas arredondadas */
    cursor: pointer;
}

button:hover {
    background-color: #0056b3; /* Fundo mais escuro ao passar o mouse */
}

@media (max-width: 600px) {
    .search-input, button {
        width: 100%; /* Garantir que ocupe toda a largura */
        margin-left: 0; /* Remover margem lateral no modo coluna */
    }
}

body {
  background-color: #121212;
  color: #f5f5f5;
  font-family: 'Segoe UI', sans-serif;
}

a {
  color: #80cbc4;
}

.categoria {
  background-color: #1e1e1e;
  color: #ffffff;
  border-radius: 8px;
  padding: 10px;
}

h1, h2, h3 {
  color: #ffffff;
}