@-webkit-keyframes snowflakes-fall {
  0% { top: -10%; }
  100% { top: 100%; }
}

@-webkit-keyframes snowflakes-shake {
  0%, 100% { 
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% { 
    -webkit-transform: translateX(var(--shake-distance, 80px));
    transform: translateX(var(--shake-distance, 80px));
  }
}

@keyframes snowflakes-fall {
  0% { top: -10%; }
  100% { top: 100%; }
}

@keyframes snowflakes-shake {
  0%, 100% { 
    transform: translateX(0);
  }
  50% { 
    transform: translateX(var(--shake-distance, 80px));
  }
}

.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.snowflake {
  color: var(--snowflake-color, #fff);
  font-size: var(--snowflake-size, 1em);
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: -10%;
  z-index: 9999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  -webkit-animation-name: snowflakes-fall, snowflakes-shake;
  -webkit-animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}