<!-- Weather style -->
<style>
	.fallingObject {
		color: #fff;
		font-size: 1em;
		font-family: Arial;
		pointer-events: none;
		text-shadow: 0 0 1px #000;
	}
	@keyframes fallingObjects-fall {
		0% {
			top: -10%;
		}
		100% {
			top: 100%;
		}
	}
	@keyframes fallingObjects-shake {
		0% {
			transform: translateX(0px);
		}
		50% {
			transform: translateX(80px);
		}
		100% {
			transform: translateX(0px);
		}
	}
	.fallingObject {
		position: fixed;
		top: -10%;
		z-index: 9999;
		user-select: none;
		cursor: default;
		animation-name: fallingObjects-fall, fallingObjects-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running;
	}
	.fallingObject:nth-of-type(0) {
		left: 1%;
		animation-delay: 0s, 0s;
		& > div {
			transform: rotate(45deg);
		}
	}
	.fallingObject:nth-of-type(1) {
		left: 10%;
		animation-delay: 1s, 1s;
		& > div {
			transform: rotate(10deg);
		}
	}
	.fallingObject:nth-of-type(2) {
		left: 20%;
		animation-delay: 6s, 0.5s;
		& > div {
			transform: rotate(60deg);
		}
	}
	.fallingObject:nth-of-type(3) {
		left: 30%;
		animation-delay: 4s, 2s;
		& > div {
			transform: rotate(84deg);
		}
	}
	.fallingObject:nth-of-type(4) {
		left: 40%;
		animation-delay: 2s, 2s;
		& > div {
			transform: rotate(267deg);
		}
	}
	.fallingObject:nth-of-type(5) {
		left: 50%;
		animation-delay: 8s, 3s;
		& > div {
			transform: rotate(200deg);
		}
	}
	.fallingObject:nth-of-type(6) {
		left: 60%;
		animation-delay: 6s, 2s;
		& > div {
			transform: rotate(20deg);
		}
	}
	.fallingObject:nth-of-type(7) {
		left: 70%;
		animation-delay: 2.5s, 1s;
		& > div {
			transform: rotate(78deg);
		}
	}
	.fallingObject:nth-of-type(8) {
		left: 80%;
		animation-delay: 1s, 0s;
		& > div {
			transform: rotate(3120deg);
		}
	}
	.fallingObject:nth-of-type(9) {
		left: 90%;
		animation-delay: 3s, 1.5s;
		& > div {
			transform: rotate(123deg);
		}
	}
</style>
<!-- / Weather style -->
