.snowflakes {
  width: 2000px;
  height: calc(100% + 120px);
  position: fixed;
  top: 50%;
  z-index: 999999;
  pointer-events: none;
  left: 60%;
  transform: translate(-50%, -50%);
}

.snowflakes i {
  display: inline-block;
  -webkit-animation: snowflakes 13s linear 0s infinite;
  -moz-animation: snowflakes 13s linear 0s infinite;
  position: relative;
  color: #ffffff;
  width: 22px;
  height: 22px;
  font-size: 52px;
  font-family: sans-serif !important;
}

.snowflakes i::after {
  content: attr(data-icon);
  color: var(--icon-color);
}

.snowflakes i:before {
  -webkit-transform: rotate(240deg);
}

@-webkit-keyframes snowflakes {
  0% {
    -webkit-transform: translate3d(350px, 0, 0) rotate(0deg) scale(0.6);
  }

  100% {
    -webkit-transform: translate3d(0px, 1200px, 0px) rotate(360deg) scale(0.6);
  }
}

@-webkit-keyframes snowflakes2 {
  0% {
    -webkit-transform: translate3d(-350px, 0, 0) rotate(0deg) scale(0.6);
  }

  100% {
    -webkit-transform: translate3d(0px, 1200px, 0px) rotate(720deg) scale(0.6);
  }
}

@-webkit-keyframes snowflakes3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6);
  }

  25% {
    -webkit-transform: translate3d(15px, 300px, 0px) rotate(120deg) scale(0.6);
  }

  50% {
    -webkit-transform: translate3d(-15px, 600px, 0px) rotate(360deg) scale(0.6);
  }

  75% {
    -webkit-transform: translate3d(30px, 900px, 0px) rotate(440deg) scale(0.6);
  }

  100% {
    -webkit-transform: translate3d(-30px, 1200px, 0px) rotate(720deg) scale(0.6);
  }
}

@-webkit-keyframes snowflakes4 {
  0% {
    -webkit-transform: translate3d(-550px, 0, 0) rotate(0deg) scale(0.6);
  }

  100% {
    -webkit-transform: translate3d(200px, 1200px, 0px) rotate(720deg) scale(0.6);
  }
}

@-webkit-keyframes snowflakes5 {
  0% {
    -webkit-transform: translate3d(550px, 0, 0) rotate(0deg) scale(0.6);
  }

  100% {
    -webkit-transform: translate3d(-200px, 1200px, 0px) rotate(-720deg) scale(0.6);
  }
}

.snowflakes i:nth-child(5n) {
  -webkit-animation-duration: 24s;
}

.snowflakes i:nth-child(5n+1) {
  -webkit-animation-name: snowflakes2;
  -webkit-animation-duration: 16s;
}

.snowflakes i:nth-child(5n+2) {
  -webkit-animation-name: snowflakes3;
  -webkit-animation-duration: 35s;
}

.snowflakes i:nth-child(5n+3) {
  -webkit-animation-name: snowflakes4;
  -webkit-animation-duration: 30s;
}

.snowflakes i:nth-child(5n+4) {
  -webkit-animation-name: snowflakes5;
  -webkit-animation-duration: 25s;
}

/* different delays so they don't all start at the same time */

.snowflakes i:nth-child(7n) {
  opacity: .7;
  font-size: 25px;
  -webkit-animation-delay: 0s;
  -webkit-animation-timing-function: linear;
}

.snowflakes i:nth-child(7n+1) {
  opacity: 1;
  font-size: 18px;
  -webkit-animation-delay: 3s;
  -webkit-animation-timing-function: linear;
}

.snowflakes i:nth-child(7n+2) {
  opacity: .9;
  -webkit-animation-delay: 6s;
  -webkit-animation-timing-function: linear;
}

.snowflakes i:nth-child(7n+3) {
  opacity: 0.6;
  font-size: 36px;
  -webkit-animation-delay: 9s;
  -webkit-animation-timing-function: linear;
}

.snowflakes i:nth-child(7n+4) {
  opacity: .7;
  font-size: 28px;
  -webkit-animation-delay: 1s;
  -webkit-animation-timing-function: linear;
}

.snowflakes i:nth-child(7n+5) {
  opacity: .8;
  font-size: 32px;
  -webkit-animation-delay: 4s;
  -webkit-animation-timing-function: linear;
}

.snowflakes i:nth-child(7n+6) {
  opacity: 1;
  font-size: 22px;
  -webkit-animation-delay: 7s;
  -webkit-animation-timing-function: linear;
}