body, html {
  padding: 0;
  margin: 0;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
}

.lil-gui {
  --width: 450px;
  max-width: 90%;
  --widget-height: 20px;
  font-size: 15px;
  --input-font-size: 15px;
  --padding: 10px;
  --spacing: 10px;
  --slider-knob-width: 5px;
  --background-color: rgba(5, 0, 15, .8);
  --widget-color: rgba(255, 255, 255, .3);
  --focus-color: rgba(255, 255, 255, .4);
  --hover-color: rgba(255, 255, 255, .5);

  --font-family: monospace;
  display: block;
}



.transparent-bg{
  background-color: transparent;
}

/* Canvas styling to ensure it is in the background and full screen */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  z-index: 1;  /* Ensure the canvas stays behind all other elements */
  pointer-events: none; /* Prevent canvas from intercepting mouse events */


  background-color: transparent!important;
}




/* Content above the canvas */
header, main {
  position: relative;
  z-index: 10; /* Ensures the content stays in front of the canvas */
}

button.interactive {
  pointer-events: auto;  /* Ensure buttons are clickable despite being on top of the canvas */
}


.lil-gui.root{
  display: block;
}