// TO BE REMOVED
body {
  margin: 0;
}
// TO BE REMOVED END
@import "snow_vars";

$s1:"";
$s2:"";
$s3:"";
@for $i from 1 through $snowflakes_num {
  $s1: $s1 + random(1000)*0.1vw + " " + random(1000)*0.1vh + " " + 0 + " " + random(50)*-0.01rem + $snowflake1_color;
  $s2: $s2 + random(1000)*0.1vw + " " + random(1000)*0.1vh + " " + 0 + " " + random(50)*-0.01rem + $snowflake2_color;
  $s3: $s3 + random(1000)*0.1vw + " " + random(1000)*0.1vh + " " + 0 + " " + random(50)*-0.01rem + $snowflake3_color;
  @if $i < $snowflakes_num {
    $s1: $s1 + ",";
    $s2: $s2 + ",";
    $s3: $s3 + ",";
  }
}

.snow-wrapper {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1%, transparent 100%);
  position: fixed;
  z-index: 999999999999;
  pointer-events: none;
}
.snow {
  border-radius: 50%;
  opacity: 0.8;
  position: absolute;
  top: -100vh;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.layer1 {
  width: $snowflakes_size;
  height: $snowflakes_size;
  filter: blur(1.5px);
  box-shadow: #{$s1};
  animation-duration: $snowflake_animation_duration;
}
.layer1.a {
  animation-delay: -4s;
}
.layer2 {
  width: $snowflakes_size - $snowflakes_step;
  height: $snowflakes_size - $snowflakes_step;
  filter: blur(3px);
  box-shadow: #{$s2};
  animation-duration: $snowflake_animation_duration + $snowflake_animation_duration_step;
}
.layer2.a {
  animation-delay: -6s;
}
.layer3 {
  width: $snowflakes_size - ($snowflakes_step * 2);
  height: $snowflakes_size - ($snowflakes_step * 2);
  filter: blur(6px);
  box-shadow: #{$s3};
  animation-duration: $snowflake_animation_duration + ($snowflake_animation_duration_step * 2);
}
.layer3.a {
  animation-delay: -8s;
}

@keyframes fall {
  100% {transform: translateY(200vh);}
}