body {
    font-family: Arial, sans-serif; /* Define a fonte padrão */
    background-image: url('./divulgacoes/banner.png'); /* Caminho da imagem de fundo */
    background-size: cover; /* Faz a imagem cobrir todo o body */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-attachment: fixed; /* Mantém o fundo fixo ao rolar a página */
    background-position: center; /* Centraliza a imagem no body */
    color: #262e4e; /* Define a cor do texto */
    margin: 0; /* Remove margens externas */
    padding: 0; /* Remove preenchimento */
    cursor: url('./divulgacoes/mouse.png'), auto; /* Personaliza o cursor */
}

.nav-buttons {
    display: flex; /* Flexbox para layout horizontal dos botões */
    gap: 15px; /* Espaçamento entre os botões */
}

.nav-button {
    color: #fff; /* Cor do texto dos botões */
    text-decoration: none; /* Remove sublinhado */
    padding: 5px 10px; /* Espaçamento interno dos botões */
    background-color: #6C4581; /* Cor de fundo dos botões */
    border-radius: 5px; /* Borda arredondada */
    transition: background-color 0.3s; /* Transição suave para a cor de fundo */
}

.top-banner {
    background-color: #1ABC9C; /* Cor de fundo do banner */
    color: #fff; /* Cor do texto */
    display: flex; /* Flexbox para layout horizontal */
    justify-content: space-between; /* Espaça o conteúdo entre os dois lados */
    align-items: center; /* Alinha verticalmente no centro */
    padding: 10px 20px; /* Espaçamento interno */
    width: 100%; /* Largura total da tela */
    box-sizing: border-box; /* Inclui padding e border na largura total */
}


.community-name {
    font-size: 18px; /* Tamanho da fonte */
    font-weight: bold; /* Peso da fonte */
}

.title {
    font-family: 'Impact', 'Arial Black', sans-serif; /* Sugestão de fonte chamativa */
    font-size: 48px;
    color: #4CAF50;
    margin-bottom: 20px;
}

.social-buttons {
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.container {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 20px; /* Espaçamento inferior para a tela branca */
    margin-top: 50px;
    opacity: 0.8;
}


.social-button {
    flex: 1 1 calc(33.33% - 20px); /* Ajusta para 3 botões por linha, subtraindo o espaçamento */
    max-width: calc(33.33% - 20px);
    background-color: #000000; /* Cor de fundo do botão */
    color: white; /* Cor do texto */
    padding: 20px; /* Espaçamento interno do botão */
    text-decoration: none; /* Remove o sublinhado do link */
    border-radius: 5px; /* Arredonda os cantos do botão */
    border: none; /* Remove a borda padrão */
    cursor: pointer; /* Mostra um cursor de mão ao passar sobre o botão */
    font-size: 16px; /* Tamanho da fonte */
    display: flex;
    align-items: center; /* Alinha o conteúdo dentro do botão */
    justify-content: center;
    transition: transform 0.3s; /* Animação ao passar o mouse sobre o botão */
    opacity: 0.8;
    transform: translateX(0px);
    min-height: 150px; /* Altura mínima para todos os botões */
    min-width: 150px; /* Largura mínima para todos os botões */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura e altura */
}

.social-button img {
    max-width: 80px; /* Ajusta o tamanho da imagem do ícone */
    max-height: 80px;
    margin-right: 8px; /* Espaço entre o ícone e o texto */
}

.social-button:hover {
    transform: scale(1.1); /* Aumenta o botão ao passar o mouse */
}


.social-button img {
    width: 300px;
    height: 300px;
}

.social-button:hover {
    background-color: #45a049;
}

.icon {
    width: 40px; /* Defina a largura do ícone */
    height: 40px; /* Defina a altura do ícone */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
    vertical-align: middle; /* Alinha verticalmente o ícone ao meio do texto */
}

.credit-screen {
    position: relative;
    width: 300px; /* Largura da tela */
    height: auto; /* Altura automática para ajustar ao conteúdo */
    margin: 20px auto; /* Centraliza a tela horizontalmente */
    background-color: rgba(255, 255, 255, 0.8); /* Fundo branco semi-transparente */
    border-radius: 10px; /* Arredondamento dos cantos */
    overflow: hidden; /* Garante que o conteúdo dentro da tela não ultrapasse os limites */
    padding: 10px; /* Adiciona espaçamento interno */
}

.credit-text {
    position: relative;
    z-index: 2; /* Mantém o texto acima da imagem */
    color: #000; /* Cor do texto */
    font-size: 16px; /* Tamanho do texto */
    text-align: center; /* Alinha o texto ao centro */
    background-color: rgba(255, 255, 255, 0.5); /* Fundo branco semi-transparente para o texto */
    padding: 5px; /* Espaçamento ao redor do texto */
    border-radius: 5px; /* Arredondamento dos cantos do fundo do texto */
    margin-bottom: 10px; /* Espaçamento inferior para separar o texto da imagem */
}

.credit-image {
    width: 100%; /* Largura total da imagem */
    height: auto; /* Altura automática para manter a proporção da imagem */
    border-radius: 5px; /* Arredondamento dos cantos da imagem */
}

#prev-btn:disabled {
    opacity: 0.5; /* Torna o botão sem clique visualmente diferente */
    cursor: not-allowed;
}

body, a, .nav-button {
    cursor: url('./divulgacoes/mouse.png'), auto; /* Caminho para a imagem do cursor */
}