.button-container {
  display: flex;
  flex-wrap: wrap;
}

.button {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Hace que los botones sean redondos */
  margin: 10px;
  background-color: #2ecc71; /* Verde por defecto */
  border: 2px solid #27ae60; /* Borde verde más oscuro */
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Para posicionar el texto */
}

.button.off {
  background-color: #e74c3c; /* Rojo cuando está apagado */
  border-color: #c0392b; /* Borde rojo más oscuro */
}

.button.on {
  background-color: #2ecc71; /* Verde cuando está encendido */
  border-color: #27ae60; /* Borde verde más oscuro */
}

.button::after {
  content: attr(data-label); /* Muestra el texto contenido en el atributo data-label */
  position: absolute;
  bottom: -20px; /* Posiciona el texto debajo del botón */
}