.snowflake, .snowflake .inner {
	animation-iteration-count:infinite;
	animation-play-state:running
}

@keyframes snowflakes-fall {
	0% {top: -10%}
	100% {top: 110%}
}
@keyframes snowflakes-shake {
	0%,
	100% {transform:translateX(0)}
	50% {transform:translateX(15vh)}
}

/* falling animation */
.snowflake {
	position: absolute;
	top:-10vh;
	-webkit-user-select:none;
	user-select:none;
	cursor:default;
	pointer-events:none;
	animation-name:snowflakes-fall;
	animation-duration:10s;
	--delay: 0s;
	animation-delay: var(--delay);
	animation-timing-function:linear
}

/* sidewards-floating animation */
.snowflake .inner {
	width: 3vh;
	height: 3vh;
	background-color: #ffffff;
	border-radius: 50%;

	animation-duration:3s;
	animation-name:snowflakes-shake;
	animation-timing-function:ease-in-out
}

.snowflake:nth-of-type(1){left:1%;--delay:0s}
.snowflake:nth-of-type(1) .inner{animation-delay:0s}

.snowflake:nth-of-type(2){left:10%;--delay:1s}
.snowflake:nth-of-type(2) .inner{animation-delay:1s}

.snowflake:nth-of-type(3){left:20%;--delay:6s}
.snowflake:nth-of-type(3) .inner{animation-delay:1.25s}

.snowflake:nth-of-type(4){left:30%;--delay:4s}
.snowflake:nth-of-type(4) .inner{animation-delay:2.25s}

.snowflake:nth-of-type(5){left:40%;--delay:2s}
.snowflake:nth-of-type(5) .inner{animation-delay:1.5s}

.snowflake:nth-of-type(6){left:50%;--delay:8s}
.snowflake:nth-of-type(6) .inner{animation-delay:0.75s}

.snowflake:nth-of-type(7){left:60%;--delay:6.5s}
.snowflake:nth-of-type(7) .inner{animation-delay:2s}

.snowflake:nth-of-type(8){left:70%;--delay:2.5s}
.snowflake:nth-of-type(8) .inner{animation-delay:1s}

.snowflake:nth-of-type(9){left:80%;--delay:1s}
.snowflake:nth-of-type(9) .inner{animation-delay:0s}

.snowflake:nth-of-type(10){left:90%;--delay:3s}
.snowflake:nth-of-type(10) .inner{animation-delay:1.5s}

.snowflake:nth-of-type(11){left:25%;--delay:7.5s}
.snowflake:nth-of-type(11) .inner{animation-delay:0.5s}

.snowflake:nth-of-type(12){left:65%;--delay:8.5s}
.snowflake:nth-of-type(12) .inner{animation-delay:2.5s}

@media(prefers-reduced-motion) {
	.snowflake .inner {
		animation: none;
	}
	/* NICE xD */
	.snowflake {
		animation-play-state: paused;
		animation-delay: calc(-1 * var(--delay));
	}
}