.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
}

.snowflake {
    position: absolute;
    border-radius: 50%;
    opacity: .8;
    pointer-events: none;
    background-size: contain;
    filter: drop-shadow(0px 0px 3px #000);
    background-image: url('data:image/svg+xml,<svg id="fi_2530005" enable-background="new 0 0 321.493 321.493" fill="white" height="512" viewBox="0 0 321.493 321.493" width="512" xmlns="http://www.w3.org/2000/svg"><g><g id="Snowflake"><path d="m303.211 182.103c2.386 5.874-.441 12.57-6.315 14.957l-31.904 12.975 29.527 17.742c5.507 3.145 7.421 10.158 4.277 15.665-3.145 5.507-10.158 7.421-15.665 4.277-.148-.085-.294-.173-.439-.264l-29.525-17.74 3.523 34.273c.546 6.318-4.133 11.882-10.451 12.428-6.175.534-11.659-3.93-12.39-10.084l-5.282-51.399-56.423-33.895v65.822l41.335 31.001c5.073 3.805 6.101 11.002 2.296 16.075s-11.002 6.101-16.075 2.296l-27.557-20.667v34.446c0 6.341-5.141 11.482-11.482 11.482s-11.482-5.141-11.482-11.482v-34.446l-27.557 20.667c-5.073 3.805-12.27 2.777-16.075-2.296s-2.777-12.27 2.296-16.075l41.335-31.001v-65.822l-56.418 33.903-5.282 51.399c-.546 6.318-6.11 10.997-12.428 10.451s-10.997-6.11-10.451-12.428c.011-.122.023-.245.038-.367l3.523-34.273-29.525 17.74c-5.361 3.387-12.453 1.787-15.84-3.574s-1.787-12.453 3.574-15.84c.144-.091.291-.179.439-.264l29.527-17.742-31.904-12.975c-5.836-2.481-8.556-9.223-6.075-15.059 2.425-5.705 8.941-8.455 14.72-6.213l47.863 19.464 57.432-34.515-57.437-34.511-47.863 19.47c-5.912 2.294-12.564-.64-14.858-6.552-2.242-5.779.508-12.295 6.213-14.72l31.904-12.975-29.525-17.746c-5.507-3.145-7.421-10.158-4.277-15.664 3.145-5.507 10.158-7.421 15.664-4.277.148.085.294.173.439.264l29.525 17.74-3.523-34.273c-.647-6.308 3.942-11.947 10.25-12.594s11.947 3.942 12.594 10.25l5.282 51.399 56.422 33.9v-65.824l-41.335-31.001c-5.075-3.803-6.106-10.999-2.303-16.074s10.999-6.106 16.074-2.303c.003.002.005.004.008.006l27.557 20.667v-34.445c-.001-6.341 5.14-11.482 11.481-11.482s11.482 5.141 11.482 11.482v34.446l27.557-20.667c5.073-3.805 12.27-2.777 16.075 2.296s2.777 12.27-2.296 16.075l-41.335 31.001v65.823l56.421-33.904 5.282-51.399c.748-6.297 6.46-10.795 12.757-10.047 6.155.731 10.618 6.215 10.084 12.39l-3.523 34.273 29.525-17.74c5.361-3.387 12.453-1.787 15.84 3.575 3.387 5.361 1.786 12.453-3.575 15.84-.144.091-.29.179-.439.264l-29.528 17.742 31.904 12.975c5.836 2.481 8.556 9.223 6.075 15.059-2.425 5.705-8.941 8.455-14.72 6.213l-47.863-19.464-57.432 34.515 57.437 34.511 47.863-19.464c5.864-2.392 12.557.423 14.948 6.287.003.006.006.014.009.021z"></path></g></g></svg>');
}

@keyframes fall {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(var(--initial-rotation, 0deg));
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
        transform: translateY(100vh) rotate(calc(var(--initial-rotation, 0deg) + 360deg));
    }
}

@keyframes diagonal-fall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(var(--initial-rotation, 0deg));
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
        transform: translate(10vw, 100vh) rotate(calc(var(--initial-rotation, 0deg) + 720deg));
    }
}