.box{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.confetti{
	position: absolute;
	top: -100px;
}
/* Start Animation */
.confetti:nth-child(100n+2){
	animation: animateStart 1.5s ease 1;
}
.confetti:nth-child(100n+4){
	animation: animateStart 1.4s ease 1;
}
.confetti:nth-child(1000n+0){
	animation: animateStart 1.6s ease 1;
}
@keyframes animateStart{
	0%{
		top: 100%;
		left: 50%;
		box-shadow: 0 0 5px #000;
	}
	100%{
		transform: rotate3d(1,1,1,360deg);
		top: -100px;
	}
}
/* Falling Animation */
.confetti:nth-child(100n+0){
	animation: animateThree 3.4s linear 0.5s 3;
}
.confetti:nth-child(100n+1){
	animation: animate 4s linear 3;
}
.confetti:nth-child(100n+3){
	animation: animate 4.2s linear 0.5s 3;
}
.confetti:nth-child(100n+5){
	animation: animateTwo 3s linear 0.5s 3;
}
.confetti:nth-child(100n+6){
	animation: animateTwo 2.9s linear 0.5s 3;
}
.confetti:nth-child(100n+7){
	animation: animate 2.8s linear 0.5s 3;
}
.confetti:nth-child(100n+8){
	animation: animate 2.7s linear 0.5s 3;
}
.confetti:nth-child(100n+9){
	animation: animate 2.6s linear 0.5s 3;
}
.confetti:nth-child(100n+10){
	animation: animate 2.5s linear 0.5s 3;
}
@keyframes animate{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(1,1,1,360deg);
		top: 100%;
	}
}
@keyframes animateTwo{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(0,0,1,360deg);
		top: 100%;
	}
}
@keyframes animateThree{
	0%{
		top: -100px;
	}
	100%{
		transform: rotate3d(0,1,0,360deg);
		top: 100%;
	}
}