html,body {
    margin: 0;
    height: 100%;
    background: radial-gradient(ellipse at top right, #547988 0%, #000000 100%);
    overflow: hidden;
}

.snow {
    border-radius: 50%;
    opacity: 0.8;
    position: absolute;
    top:-100vh;
    animation-name: sf;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.l1 {
    width: 1.5rem;
    height: 1.5rem;
    filter:blur(1.5px);
    box-shadow: {'snow'.1};
    animation-duration: 6s;
}
.l1.a {
    animation-delay: -3s;
}.l2 {
    width: 1.2rem;
    height: 1.2rem;
    filter:blur(3px);
    box-shadow: {'snow'.2};
    animation-duration: 8s;
}
.l2.a {
    animation-delay: -4s;
}.l3 {
    width: 0.9rem;
    height: 0.9rem;
    filter:blur(6px);
    box-shadow: {'snow'.3};
    animation-duration: 10s;
}
.l3.a {
    animation-delay: -5s;
}@keyframes sf {
    100% {transform: translateY(200vh); }
}