.snowflakes {
  display: block;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  contain: layout paint;
}

.snowflake {
  position: fixed;
  z-index: 15;
  top: 0;
  will-change: transform;
  translate: 0 -10vh;
  font-size: 1em;
  color: #fff;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
  user-select: none;
  cursor: default;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 12s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}



@keyframes snowflakes-fall {
  0% {
    translate: 0 -10vh;
  }

  100% {
    translate: 0 110vh;
  }
}

@keyframes snowflakes-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(80px);
  }
}