/* Snowflake Container Styling */
.snowflake {
  color: #ffffff;
  font-size: 1rem; /* Smaller size for more snowflakes */
  font-family: 'Arial', sans-serif;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Subtle glow */
  opacity: 0.75;
  position: fixed;
  top: -5%;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  animation-name: snowflakes-shake;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Inner Snowflake Styling */
.inner {
  color: #d8e6ff;
  opacity: 0.7;
  font-size: 1.2rem; /* Slightly larger for inner snowflakes */
  animation-name: snowflakes-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Snowflake Fall and Shake Animations */
@keyframes snowflakes-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(180deg);
    opacity: 0.5;
  }
}

@keyframes snowflakes-shake {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px); /* Smaller shake effect */
  }
}
/* Santa Image Container Styling */
.santa {
  position: fixed;
  top: 10%;  /* Adjust top position as needed */
  right: -10%; /* Start off-screen from the right */
  z-index: 9998; /* Make sure it's just behind the snowflakes */
  animation: fly-across 10s linear infinite; /* Animating from right to left */
}

/* Santa Image Styling */
.santa img {
  width: 100px; /* Adjust the size of Santa */
  height: auto;
  display: block; /* Remove extra space under the image */
}

/* Santa's Flying Animation */
@keyframes fly-across {
  0% {
    right: -10%; /* Starting position off-screen on the right */
  }
  100% {
    right: 100%; /* Move off-screen on the left */
  }
}