#sky {
  width: 100%;
  height: 100%;
  position: fixed;
  display: grid;
  grid-template: 100% / repeat(20, 1fr);
  z-index: -100;

  /* Important! */
  top: 0;
  left: 0;
}

.snowflake {
  margin: 0;
  padding: 0;
  position: relative;
  width: 2px;
  height: 2px;
  background-color: aliceblue;

  top: -1%;

  animation: snowflake;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#sf1 {
  animation-delay: 1s;
  animation-duration: 8s;
}

#sf2 {
  animation-delay: 0s;
  animation-duration: 9s;
}

#sf3 {
  animation-delay: 7s;
  animation-duration: 10s;
}

#sf4 {
  animation-delay: 5s;
  animation-duration: 11s;
}

#sf5 {
  animation-delay: 4;
  animation-duration: 10s;
}

#sf6 {
  animation-delay: 10s;
  animation-duration: 8.5s;
}

#sf7 {
  animation-delay: 14s;
  animation-duration: 10.5s;
}

#sf8 {
  animation-delay: 2s;
  animation-duration: 10s;
}

#sf9 {
  animation-delay: 0.5s;
  animation-duration: 6s;
}

#sf10 {
  animation-delay: 12s;
  animation-duration: 8s;
}

#sf11 {
  animation-delay: 3s;
  animation-duration: 7s;
}

#sf12 {
  animation-delay: 6s;
  animation-duration: 13s;
}

#sf13 {
  animation-delay: 8.5s;
  animation-duration: 9s;
}

#sf14 {
  animation-delay: 10s;
  animation-duration: 13s;
}

#sf15 {
  animation-delay: 5s;
  animation-duration: 10s;
}

#sf16 {
  animation-delay: 11.5s;
  animation-duration: 9s;
}

#sf17 {
  animation-delay: 1s;
  animation-duration: 8s;
}

#sf18 {
  animation-delay: 5.5s;
  animation-duration: 9s;
}

#sf19 {
  animation-delay: 3s;
  animation-duration: 16s;
}

#sf20 {
  animation-delay: 7s;
  animation-duration: 12s;
}

/* Move from top to bottom & wobble a bit */
@keyframes snowflake {
  0% {
    top: -1%;
    left: 50%;
    opacity: 1;
  }
  20% {
    left: 45%;
  }

  30% {
    left: 50%;
  }

  40% {
    left: 55%;
  }

  50% {
    left: 50%;
  }

  60% {
    left: 45%;
  }

  70% {
    left: 50%;
  }

  80% {
    left: 55%;
  }

  90% {
    left: 50%;
  }

  98% {
    top: 101%;
    left: 45%;
    opacity: 1;
  }

  99% {
    opacity: 0;
    top: 101%;
    left: 45%;
  }

  100% {
    opacity: 0;
    top: -1%
  }
}