Stars.scss

@use "sass:math";
@use "sass:string";

// n is number of stars required
@function generate-box-shadows($n) {
  // stars are distributed evenly across the viewport width, but the height is not based on viewport as we want the stars to cover the entire div
  $value: "#{math.div(math.random(10000), 100)}vw #{math.random(7000)}px #FFF";

  @for $i from 2 through $n {
    // consider switching to dynamically scale N based on viewport width so density is consistent
    $value: "#{$value} , #{math.div(math.random(10000), 100)}vw #{math.random(7000)}px #FFF";
  }

  @return string.unquote($value);
}

@keyframes starAnimation {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-2000px);
  }
}

// mixin for star shadows
@mixin stars($size, $number-of-shadows, $animation-duration) {
  width: $size;
  height: $size;
  background: transparent;
  box-shadow: generate-box-shadows($number-of-shadows);
  animation: starAnimation $animation-duration linear infinite;

  &:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: $size;
    height: $size;
    background: transparent;
    box-shadow: generate-box-shadows($number-of-shadows);
  }
}

html {
  background: radial-gradient(ellipse at bottom, #48187d 0%, #080211 95%);
}

#hero-star {
  overflow: hidden;
  height: 95%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

#small-stars {
  @include stars(1px, 1800, 50s);
}

#medium-stars {
  @include stars(2px, 700, 100s);
}

#large-stars {
  @include stars(3px, 200, 150s);

  span {
    background: -webkit-linear-gradient(white, #38495a);
    -webkit-text-fill-color: transparent;
  }
}