@charset "utf-8";

html,body{
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#bg{
  height: 1000vh;
  width: 2000vh;
  background: radial-gradient(100% 100% at center center,#101,#000);
  z-index: 0;
}

.light{
  position: absolute;
  transform: perspective(400px);
  transform-style: preserve-3d;
}

.star {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
  border-radius: 50%;
  
}

@keyframes rotate {
  0% {
    transform:  rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg) translateY(1000px);
  }
}

#light{
  position: absolute;
  top: 39%;
  left: 45%;
  
  background: #000;
  height:200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgb(43, 42, 42);
  z-index: 2;
  
}


.out{
  position: absolute;
  transform: perspective(400px);
  transform-style: preserve-3d;
  bottom: 50%;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: out 120s linear infinite;
}

@keyframes out{
  0% {
    transform: perspective(400px) rotateZ(0deg) rotateX(-90deg);
  }
  100% {
    transform:perspective(400px) rotateZ(360deg) rotateX(-90deg);
  }
}