html, body {
  background-color: black;
  overflow: hidden;
  margin: 0;
}

canvas {
  position: fixed;
}

#planet {
  width: 300vh;
  height: 300vh;
  border-radius: 50%;
  position: fixed;
  left: 50%;
  bottom: 30%;
  transform: translate(-50%, 100%);
  overflow: hidden;
}

#planet::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 92%;
  border-radius: 50%;
  background-color: #0008;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#debris {
  position: fixed;
}

#hidden {
  display: none;
}

.ray {
  position: fixed;
  left: 50%;
  bottom: 20%;
  width: 150vh;
  height: 10vh;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  translate: 0 50%;
  transform-origin: left;
  /* background: linear-gradient(to right, hsl(${Math.random() * 360}, 100%, 90%), transparent); */
  opacity: 1;
  will-change: opacity;
}

#light {
  position: fixed;
  left: 50%;
  bottom: 20%;
  width: 10vh;
  height: 10vh;
  border-radius: 50%;
  translate: -50% 50%;
  background: radial-gradient(white, transparent 60%);
  scale: 0;
  opacity: 1;
  will-change: opacity;
}

#whiterect {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0;
  transition: opacity 7s ease-out;
  will-change: opacity;
}