.snow-container {
  position: relative;     /* important so flakes are positioned inside */
  overflow: hidden;       /* hide flakes when they fall out */
}

/* Snowflake base style */
.snowflake {
  position: absolute;
  top: -15px;
  color: #fff;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  animation-name: fallAndFadeOut;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fallAndFadeOut {
  0% {
  	opacity: 1;          /* fully visible at start */
  }
  90% {
    opacity: 1;          /* stay visible for most of the fall */
  }
  100% {
    transform: translateY(10rem) rotate(180deg);
    opacity: 0;          /* fade out near bottom */
  }
}

@media (max-width: 600px) {
    @keyframes fallAndFadeOut {
      0% {
      	opacity: 1;          /* fully visible at start */
      }
      90% {
        opacity: 1;          /* stay visible for most of the fall */
      }
      100% {
        transform: translateY(5rem) rotate(180deg);
        opacity: 0;          /* fade out near bottom */
      }
    }
}