* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.jogo-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background-image: url('https://raw.githubusercontent.com/Otakump4/links-gerados/main/IMAGENS/zero-two.online.jpeg'); /* Altere aqui para a sua imagem */
background-size: cover; /* Faz a imagem cobrir toda a área */
background-position: center; /* Centraliza a imagem de fundo */
}

h1 {
color: white;
margin-bottom: 20px;
font-size: 36px; /* Aumenta o tamanho da fonte para destacar o título */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Adiciona sombra ao texto */
}

#data-hora {
color: yellow; /* Muda a cor do texto para amarelo */
margin-bottom: 10px; /* Espaçamento entre a data/hora e o título */
font-size: 24px; /* Aumenta o tamanho da fonte para a data/hora */
font-weight: bold; /* Torna o texto mais grosso */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Adiciona sombra ao texto */
background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente para destaque */
padding: 10px; /* Espaçamento interno */
border-radius: 8px; /* Arredonda os cantos */
}

#tabuleiro {
display: grid;
grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(10, 50px);
gap: 1px;
}

.celula {
width: 50px;
height: 50px;
background-color: #444;
border: 1px solid #fff;
}

.cobrinha {
background-color: #00ff00; /* Cor da cobrinha */
}

.alimento {
background-color: #ff0000; /* Cor do alimento */
}

#resultado {
color: white;
margin-top: 20px;
font-size: 20px;
}

#iniciar {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}