.snow{
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    top: 0px;
    left: 0px;
    z-index: 100;

}

.snowLayer {
    pointer-events: none;
    position: absolute;
    overflow: visible;
    top: 0px;
    left: 0px;
    margin-left: -10%;
    margin-top: -10%;
    height: 100%;
    z-index: 1000;
}

    .snowLayer__flake {
        position: absolute;
    }
        .snowLayer__flake--default {
            width: 1em;
            height: 1em;
            background-color: white;
            border-radius: 1em;
        }

        .snowLayer__flake--normal {
            width: 0.75rem;
            height: 0.75rem;
        }

        .snowLayer__flake--smaller {
            width: 0.6rem;
            height: 0.6rem;
        }

        .snowLayer__flake--smallest {
            width: 0.4rem;
            height: 0.4rem;
        }

        .snowLayer__flake--larger {
            width: 1.25rem;
            height: 1.25rem;
            filter: blur(0.25px);
        }

        .snowLayer__flake--largest {
            width: 3.25rem;
            height: 3.25rem;
            filter: blur(1px);
        }

.spin {
    animation-name: spin;
    animation-duration: 8000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: bottom right -60px;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.spin_weave{
    animation-name: spinweave;
    animation-duration: 6000ms;
    animation-iteration-count: infinite;
    animation-timing-function:ease;
    animation-direction:alternate-reverse;
}

@keyframes spinweave {
    0% {
        transform: rotate(0deg) translateX(-3em) scale(0.8);
    }
    100% {
        transform: rotate(360deg) translateX(3em) scale(1);
    }
}

.spin_weave_reverse{
    animation-name: spinweave;
    animation-duration: 7000ms;
    animation-iteration-count: infinite;
    animation-timing-function:ease;
    animation-direction:alternate-reverse;
}

@keyframes spinweave {
    0% {
        transform: rotate(-360deg) translateX(3em) scale(1);
    }
    100% {
        transform: rotate(0deg) translateX(-3em) scale(0.8);
    }
}