body {
  animation: backgroundAnimation 10s linear infinite;
  background-size: 300% 100%;
  background-image: linear-gradient(90deg, #000000 0%, #000000 50%, #40c917 100%);
}

@keyframes backgroundAnimation {
  0%, 100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 0%;
  }
}

/* Añade estilos al contenedor principal para centrar el contenido */
.container {
  display: flex;
  flex-direction: column; /* Coloca los elementos en una columna */
  justify-content: flex-start; /* Coloca el contenido en la parte superior verticalmente */
  align-items: center; /* Centra horizontalmente el contenido */
  height: 80vh; /* Ocupa el 100% de la altura de la ventana */
  border-radius: 10px;
  background-color: white;
}

h1 {
  font-size: 24px; /* Tamaño de fuente */
  margin-top: 20px; /* Espaciado superior para separar el título del borde superior */
  border-bottom: 2px solid black; /* Línea inferior */
}

canvas {
  max-width: 40%; /* Para que el gráfico se ajuste al contenedor */
}