@keyframes sway { 
	0% { 
		transform: translateX(-20px) rotateZ(200deg);
		animation-timing-function: ease-in-out;
	}
	25% {
		transform: translateX(20px) rotateZ(290deg);
		animation-timing-function: ease-in-out;
	}
	50% { 
		transform: translateX(-20px) rotateZ(380deg);
		animation-timing-function: ease-in-out;
	}
	75% {
		transform: translateX(20px) rotateZ(470deg);
		animation-timing-function: ease-in-out;
	}
	100% { 
		transform: translateX(-20px) rotateZ(560deg);
		animation-timing-function: ease-in-out;
	}
}

@keyframes fall {
	100% {
		margin-top: 120vh;
	}
}

#leaves {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	z-index: 0;
}

#leaves > .l1 {
	background-image: url('./leaf1.png');
}
#leaves > .l2 {
	background-image: url('./leaf2.png');
}
#leaves > .l3 {
	background-image: url('./leaf3.svg');
}
#leaves > .l4 {
	background-image: url('./leaf4.svg');
}

#leaves > i {
	width: 40px;
	height: 40px;
	position: fixed;
	top: 0px;
	animation-name: fall, sway;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
	animation-timing-function: linear, ease-in-out;
	background-repeat: no-repeat
}