html, body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; /* Centrado horizontal */
  align-items: center;     /* Centrado vertical */
  height: 100vh;           /* Ocupa toda la altura de la ventana */
  background-color: #1d4d20; /* Color verde más suave para el fondo */
  overflow: hidden;        /* Elimina las barras de desplazamiento */
  font-family: 'Arial', sans-serif; /* Tipo de fuente moderna */
}

canvas {
  display: block; /* Para asegurarse de que no haya espacio extra alrededor */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra para profundidad */
  border: 5px solid #003300; /* Borde verde oscuro */
}

/* Agrega animación de transición al fondo */
body {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body:hover {
  background-color: #145214; /* Cambio sutil cuando el usuario pasa el ratón */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* Cambio en la sombra */
}