html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Evitar scroll */
}

canvas {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: cover; /* Mantener proporción */
}

/* Estilos para botones de cámara creados desde p5.js */
.camera-button {
  padding: 15px 25px ;
  font-size: 16px ;
  font-weight: bold ;
  border: 3px solid ;
  cursor: pointer ;
  transition: all 0.3s ease ;
  text-transform: uppercase ;
  letter-spacing: 1px ;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) ;
}

.camera-button.start {
  background:  #ff8c00 ;
  color: white ;
}

.camera-button.start:hover {
  transform: scale(1.05) ;
}

.camera-button.stop {
  background:  #8b0000 ;
  border-color: #fff ;
  height: 30px;
  width: 30px;
  padding: 5px;
}

.camera-button.stop:hover {
  transform: scale(1.05) ;
}