* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Inclui padding e borda na largura/altura total */
}

body {
    display: flex;
    flex-direction: column; /* Permitir que o título e o tabuleiro sejam empilhados */
    align-items: center; /* Centraliza horizontalmente */
    background-color: #aaf; /* Altera para uma cor mais suave */
    font-family: Arial, sans-serif; /* Fonte mais moderna */
    padding: 20px; /* Adiciona espaço em volta do conteúdo */
}

#home {
    position: fixed; 
    top: 15px; 
    left: 30px; 
    z-index: 1000;
}

#home img {
    width: 60px; 
    height: auto; 
}

h1 {
    text-align: center;
    margin: 20px 0;
    font-size: 36px; /* Tamanho do título */
    color: #333; /* Cor do texto */
}

.board {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Cria 7 colunas */
    border: 2px solid #333; /* Altera a borda para uma cor mais escura */
    width: 100%; /* Altera para 100% para responsividade */
    max-width: 630px; /* Largura máxima */
    background-color: rgb(74, 74, 198);
    border-radius: 10px; /* Bordas arredondadas */
    margin: 0 auto; /* Centraliza horizontalmente */
    padding: 10px; /* Adiciona espaço interno */
    overflow: hidden; /* Esconde conteúdo que ultrapassa o tabuleiro */
    justify-content: center; /* Centraliza colunas dentro do board */
}

ul {
    display: flex; /* Muda para flex para controlar melhor as colunas */
    flex-direction: column; /* As colunas serão empilhadas verticalmente */
    align-items: center; /* Centraliza os itens dentro da coluna */
    margin: 0; /* Remove a margem lateral */
    flex-grow: 1; /* Permite que as colunas cresçam para ocupar espaço igual */
}

ul p {
    margin: 5px;
    width: 75px; /* Mantém a largura das bolas */
    height: 75px; /* Mantém a altura das bolas */
    border: 2px solid #333; /* Altera a borda para uma cor mais escura */
    border-radius: 50%; /* Muda para um círculo perfeito */
    background-color: white;
    transition: background-color 0.3s; /* Efeito de transição ao passar o mouse */
}

ul:hover {
    cursor: pointer;
    background-color: rgb(98, 136, 238);
}

@media (max-width: 700px) {
    .board {
        width: 90%; /* Ajusta a largura em telas menores */
    }

    ul {
        flex-grow: 1; /* Mantém o crescimento flexível */
    }

    ul p {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 520px) {
    .board {
        width: 90%; /* Ajusta a largura em telas menores */
    }

    ul {
        flex-grow: 1; /* Mantém o crescimento flexível */
    }

    ul p {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 420px) {
    .board {
        width: 90%; /* Ajusta a largura em telas menores */
    }

    ul {
        flex-grow: 1; /* Mantém o crescimento flexível */
    }

    ul p {
        width: 30px;
        height: 30px;
    }
}