.starsContainer {
  position: relative;
}

.star {
  position: absolute;
  background-color: var(--primary-fg);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 3px 1px var(--primary-fg);
  user-select: none;
  animation-name: twinkle;
  animation-timing-function: linear;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

.fallingStar {
  position: absolute;
  height: 4px;
  background: linear-gradient(-45deg, var(--primary-fg), transparent);
  border-radius: 999px;
  filter: drop-shadow(0 0 6px var(--primary-fg));
  z-index: 1;
  animation: tail 3s ease-in-out infinite, shooting 3s ease-in-out infinite;
  transform: rotate(45deg);
  transform-origin: top left;
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    box-shadow: 0;
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tail {
  0% {
    width: 0;
    opacity: 0;
  }

  30% {
    width: 150px;
    opacity: 0.75;
  }
  70% {
    opacity: 0.75;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

@keyframes shooting {
  0% {
    transform: translate(0) rotate(45deg);
  }
  100% {
    transform: translate(300px, 300px) rotate(45deg);
  }
}
