@keyframes pan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 75% -100%;
  }
}

#app {
  height: 0;
  width: 0;
  position: relative;
  z-index: -3;
}

#star-container {
  background: radial-gradient(rgb(var(--bg-color)), rgb(var(--second-bg-color)));
  height: 100vh;
  width: 100vw; 
  overflow: hidden;
  position: relative;
}

#star-pattern {
  background-image: url("https://assets.codepen.io/1468070/Star+Pattern+3.svg");
  background-size: 10%;  
  position: absolute;
  left: 50%;
  top: 0px;
  translate: -50% 0%;
  z-index: -1;
  height: 100%;
  width: 100%;
  min-width: 1200px;
  opacity: 0.10;
  animation: pan 180s linear infinite;
  will-change: background-position;
}

#star-gradient-overlay {
  background: radial-gradient(circle, transparent 75%, rgb(var(--second-bg-color)));
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  z-index: -2;
}