body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

#title {
    text-align: center;
}

.description {
    max-width: 600px;
    text-align: center;
}

#grid-container {
    height: ${CELL_SIZE * rows}px; /* Hauteur basée sur le nombre de lignes et la taille de la cellule */
    overflow: hidden; /* Masque les cellules supplémentaires */
}

#grid {
    display: grid;
    grid-template-columns: repeat(${cols}, 10px);
    gap: 0; /* Supprimer tout espacement entre les cellules */
    margin-top: 25px;
}

.cell {
    width: 10px;
    height: 10px;
    margin: 0; /* Assurez-vous qu'il n'y a pas de marges */
    border: none; /* Assurez-vous qu'il n'y a pas de bordures */
}

.cell.alive {
    background-color: #4CAF50; /* Vert pour les cellules vivantes */
    border-radius: 50%; /* Créer un cercle */
}


.cell.dead {
    background-color: #f0f0f0; /* Gris clair pour les cellules mortes */
}

#controls {
    margin-top: 10px;
}

#generationCounter {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Amélioration pour les boutons et les inputs */
button, input[type="range"], input[type="number"] {
    margin: 5px; /* Ajoute un espacement entre les éléments */
    padding: 8px; /* Ajoute un remplissage pour améliorer l'apparence */
    font-size: 16px; /* Augmente la taille de la police pour une meilleure lisibilité */
    border-radius: 5px; /* Arrondit les coins pour une apparence plus esthétique */
    border: none; /* Supprime les bordures */
    cursor: pointer; /* Change le curseur en pointeur pour indiquer l'interactivité */
}

input[type="number"] {
    width: 50px; /* Augmente légèrement la largeur pour une meilleure manipulation */
     background-color: #fbfbfb; 
}

/* Stylisation spécifique pour les boutons */
button {
    background-color: #007bff; /* Bleu pour les boutons */
    color: white; /* Texte blanc pour contraster avec le fond */
}

button:hover {
    background-color: #0056b3; /* Légère variation de couleur au survol */
}

.hidden{
  display: none;
}

#speedInput{
  display: none;
}

#populationCounter{
  margin-top: 25px;
  margin-bottom: 25px;
}