body:has(#snowflakes-container) {
    .notice-module {
        position: relative;
        z-index: 10001;
    }
}

#snowflakes-container {
	position: fixed;
    inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 9999;
}

.snowflake {
	position: absolute;
	top: -5vh;
	left: var(--x);
	font-size: var(--size);
	opacity: var(--opacity);
	color: #fff;
	text-shadow: 0 0 3px rgba(180, 180, 180, 0.8), 0 0 5px rgba(150, 150, 150, 0.6), 1px 1px 2px rgba(100, 100, 100, 0.5);
	user-select: none;
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.15));
	animation: snowfall var(--fall-duration) linear var(--delay) infinite, snowflake-sway var(--sway-duration) ease-in-out var(--delay) infinite;
}

@keyframes snowfall {
	0% {
		top: -5vh;
	}
	100% {
		top: 105vh;
	}
}

@keyframes snowflake-sway {
	0%,
	100% {
		transform: translateX(0) rotate(0deg);
	}
	25% {
		transform: translateX(15px) rotate(5deg);
	}
	50% {
		transform: translateX(-10px) rotate(-3deg);
	}
	75% {
		transform: translateX(12px) rotate(4deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	#snowflakes-container {
		display: none;
	}
}