/* SNOW EFFECT - Comment out the link tag in index.html to disable */

.snowflake {
  position: absolute;
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  user-select: none;
  pointer-events: none;
  z-index: 500;
  opacity: 0.8;
}

@keyframes snowfall {
  from {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translateY(var(--fall-distance)) translateX(var(--drift)) rotate(360deg);
    opacity: 0;
  }
}

.snowflake {
  animation: snowfall linear forwards;
}

/* Snow pile at the bottom */
#snow-pile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 25vh;
  pointer-events: none;
  z-index: 499;
  overflow: hidden;
}

.snow-pile-flake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  user-select: none;
  pointer-events: none;
  opacity: 0.95;
  line-height: 1;
}