/* Don't mess with that styling please */
.programmer-space {
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  color: #fff;
}

.luca {
  background-color: #4a90e2; /* Blue */
}

/* Snake game container */
.snake-game-container {
  display: flex;
  flex-direction: column; /* Stack score and game area vertically */
  align-items: center; /* Center content horizontally */
  background-color: #f5f5f5; /* Light background for contrast */
  border-radius: 12px; /* Rounded corners for a modern touch */
  padding: 20px;
}

/* Snake game area */
.snake-game {
  position: relative;
  width: 400px; /* 20 cells * 20px */
  height: 400px; /* 20 cells * 20px */
  border: 3px solid #4a90e2; /* Accent color border */
  background-color: #222; /* Dark background for the game area */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); /* Enhanced shadow for better depth */
  border-radius: 8px; /* Rounded corners for the game board */
  margin-top: 20px; /* Space between score and game */
}

/* Snake segments */
.snake-segment {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #4caf50; /* Modern green */
  border-radius: 6px; /* Rounded corners for the snake segments */
}

/* Food */
.food {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #f44336; /* Modern red */
  border-radius: 6px; /* Rounded corners for the food */
}

/* Game Over message */
.game-over {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8); /* Slightly darker overlay for better readability */
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  font-size: 22px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow for visibility */
}

/* Score display */
.score {
  font-size: 26px;
  font-weight: bold;
  color: #4a90e2; /* Accent color */
}

/* Reload Game Button */
.button {
  background-color: #4CAF50; /* Green background */
  border: none;
  color: white;
  padding: 14px 28px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin-top: 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #388E3C; /* Darker green for hover effect */
}

/* Game Explanation Section */
.game-explanation {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff; /* Light background for readability */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  color: #333;
}

.game-explanation h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
  color: #4a90e2; /* Accent color */
}

.game-explanation p {
  margin-bottom: 15px;
}

.game-explanation ul {
  margin-left: 20px;
}
