.snowflakes {
  position: relative;
  z-index: 99999;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.snowflakes.is-hidden {
  opacity: 0;
}

.snowflake {
  color: #fff;
  font-size: 2em;
  font-family: Arial, sans-serif;
  position: fixed;
  top: -10%;
  user-select: none;

  /* Only fall + shake here */
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

/* Inner element does the spin */
.snowflake-inner {
  display: inline-block;
  animation-name: snowflakes-rotate;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Optional: alternate spin direction for odd flakes */
.snowflake:nth-of-type(odd) .snowflake-inner {
  animation-direction: reverse;
}

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

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

@keyframes snowflakes-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  .snowflake {
    font-size: 25px !important;
  }
  .snowflake:nth-child(odd) {
    display: none !important;
  }
}

/* Individual snowflake rotate */
.snowflake:nth-of-type(odd) {
  animation-direction: normal, normal, reverse;
}

/* Individual snowflake positions and delays */
.snowflake:nth-of-type(1)  { left: 2%;  animation-delay: 0s, 0s; }
.snowflake:nth-of-type(2)  { left: 7%;  animation-delay: 1s, 1s; }
.snowflake:nth-of-type(3)  { left: 12%; animation-delay: 6s, .5s; }
.snowflake:nth-of-type(4)  { left: 17%; animation-delay: 4s, 2s; }
.snowflake:nth-of-type(5)  { left: 22%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(6)  { left: 27%; animation-delay: 8s, 3s; }
.snowflake:nth-of-type(7)  { left: 32%; animation-delay: 6s, 2s; }
.snowflake:nth-of-type(8)  { left: 37%; animation-delay: 2.5s, 1s; }
.snowflake:nth-of-type(9)  { left: 42%; animation-delay: 1s, 0s; }
.snowflake:nth-of-type(10) { left: 47%; animation-delay: 3s, 1.5s; }
.snowflake:nth-of-type(11) { left: 52%; animation-delay: 4s, 1s; }
.snowflake:nth-of-type(12) { left: 57%; animation-delay: 5s, 2s; }
.snowflake:nth-of-type(13) { left: 62%; animation-delay: 6s, 0s; }
.snowflake:nth-of-type(14) { left: 67%; animation-delay: 1s, 2s; }
.snowflake:nth-of-type(15) { left: 72%; animation-delay: 7s, 3s; }
.snowflake:nth-of-type(16) { left: 77%; animation-delay: 3s, 1s; }
.snowflake:nth-of-type(17) { left: 82%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(18) { left: 87%; animation-delay: 4s, 0s; }
.snowflake:nth-of-type(19) { left: 92%; animation-delay: 5s, 2.5s; }
.snowflake:nth-of-type(20) { left: 97%; animation-delay: 6s, 1s; }

.snowflake:nth-of-type(21) { left: 4%;  animation-delay: 2s, 1s; }
.snowflake:nth-of-type(22) { left: 9%;  animation-delay: 7s, 3s; }
.snowflake:nth-of-type(23) { left: 14%; animation-delay: 1s, 0s; }
.snowflake:nth-of-type(24) { left: 19%; animation-delay: 3s, 2s; }
.snowflake:nth-of-type(25) { left: 24%; animation-delay: 5s, 1s; }
.snowflake:nth-of-type(26) { left: 29%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(27) { left: 34%; animation-delay: 6s, 1.5s; }
.snowflake:nth-of-type(28) { left: 39%; animation-delay: 4s, 0.5s; }
.snowflake:nth-of-type(29) { left: 44%; animation-delay: 7s, 3s; }
.snowflake:nth-of-type(30) { left: 49%; animation-delay: 1s, 2s; }
.snowflake:nth-of-type(31) { left: 54%; animation-delay: 8s, 3s; }
.snowflake:nth-of-type(32) { left: 59%; animation-delay: 3s, 1.5s; }
.snowflake:nth-of-type(33) { left: 64%; animation-delay: 2s, 0.5s; }
.snowflake:nth-of-type(34) { left: 69%; animation-delay: 5s, 2s; }
.snowflake:nth-of-type(35) { left: 74%; animation-delay: 4s, 1s; }
.snowflake:nth-of-type(36) { left: 79%; animation-delay: 7s, 2.5s; }
.snowflake:nth-of-type(37) { left: 84%; animation-delay: 3s, 0s; }
.snowflake:nth-of-type(38) { left: 89%; animation-delay: 6s, 2s; }
.snowflake:nth-of-type(39) { left: 94%; animation-delay: 5s, 1s; }
.snowflake:nth-of-type(40) { left: 99%; animation-delay: 8s, 3s; }