.snow-container{background:transparent}.snowflake{position:absolute;top:-20px;left:var(--left,50%);width:var(--size,8px);height:var(--size,8px);background:radial-gradient(circle,#fff 0,hsla(0,0%,100%,.8) 40%,transparent 70%);border-radius:50%;opacity:var(--opacity,.8);animation:snowfall var(--duration,10s) linear var(--delay,0s) infinite;filter:blur(.5px)}@keyframes snowfall{0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:var(--opacity,.8)}25%{transform:translateY(25vh) translateX(calc(var(--drift, 0px) * .5)) rotate(90deg)}50%{transform:translateY(50vh) translateX(var(--drift,0)) rotate(180deg)}75%{transform:translateY(75vh) translateX(calc(var(--drift, 0px) * .5)) rotate(270deg)}to{transform:translateY(105vh) translateX(0) rotate(1turn);opacity:0}}@media (prefers-reduced-motion:reduce){.snowflake{animation:none;opacity:.3;top:10%}.snow-container{background-image:radial-gradient(2px 2px at 10% 10%,#fff,transparent),radial-gradient(3px 3px at 30% 20%,#fff,transparent),radial-gradient(2px 2px at 50% 15%,#fff,transparent),radial-gradient(4px 4px at 70% 25%,#fff,transparent),radial-gradient(2px 2px at 90% 10%,#fff,transparent);background-size:100% 100%}.snow-container .snowflake{display:none}}.snow-container:not(:hover) .snowflake{will-change:transform,opacity}@media (prefers-color-scheme:dark){.snowflake{filter:blur(.3px)}}