.container {
	overflow: hidden;
	/* for text	 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	pointer-events: none;
}

.confetti span {
	position: absolute;
	top: -10%;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #FFF;
	border-radius: 0 70% 30% 70%;
}

/* add animation */
.confetti span:nth-child(2n+1) {
	animation: confetti-anim-1 20s 0s linear infinite;
}

.confetti span:nth-child(2n+2) {
	animation: confetti-anim-2 10s 0s linear infinite;
}

/* side position */
.confetti span:nth-child(1) {
	left: 0%;
}
.confetti span:nth-child(2) {
	left: 10%;
}
.confetti span:nth-child(3) {
	left: 20%;
}
.confetti span:nth-child(4) {
	left: 30%;
}
.confetti span:nth-child(5) {
	left: 40%;
}
.confetti span:nth-child(6) {
	left: 50%;
}
.confetti span:nth-child(7) {
	left: 60%;
}
.confetti span:nth-child(8) {
	left: 70%;
}
.confetti span:nth-child(9) {
	left: 80%;
}
.confetti span:nth-child(10) {
	left: 90%;
}

/* colors */
.confetti span:nth-child(5n+1) {
	background-image: linear-gradient(to right bottom, #dd7c8a, #edb9bf);
}
.confetti span:nth-child(5n+2) {
	background-color: #fffbfa;
}
.confetti span:nth-child(5n+3) {
	background-image: linear-gradient(to right bottom, #f2d3d7, #fff4e1);
}
.confetti span:nth-child(5n+4) {
	background-color: #f9e4e6;
}
.confetti span:nth-child(5n+5) {
	background-image: linear-gradient(to right bottom, #edb9bf, #fff3f4);
}


/* animation-duration */
.confetti span:nth-child(5n+1) {
	animation-duration: 5s;
}
.confetti span:nth-child(5n+2) {
	animation-duration: 12s;
}
.confetti span:nth-child(5n+3) {
	animation-duration: 8s;
}
.confetti span:nth-child(5n+4) {
	animation-duration: 6s;
}


/* animation-delay */
.confetti span:nth-child(10n+1) {
	animation-delay: 0s;
}
.confetti span:nth-child(10n+2) {
	animation-delay: 9s;
}
.confetti span:nth-child(10n+3) {
	animation-delay: 2s;
}
.confetti span:nth-child(10n+4) {
	animation-delay: 5s;
}
.confetti span:nth-child(10n+5) {
	animation-delay: 6s;
}
.confetti span:nth-child(10n+6) {
	animation-delay: 7s;
}
.confetti span:nth-child(10n+7) {
	animation-delay: 3s;
}
.confetti span:nth-child(10n+8) {
	animation-delay: 1s;
}
.confetti span:nth-child(10n+9) {
	animation-delay: 2s;
}
.confetti span:nth-child(10n+10) {
	animation-delay: 11s;
}

/* animation */

@keyframes confetti-anim-1 {
	0% {
		top: -10%;
		transform: translateX(0) rotateX(0) rotateY(0);
	}

	100% {
		top: 100%;
		transform: translateX(20vw) rotateX(360deg) rotateY(360deg);
	}
}

@keyframes confetti-anim-2 {
	0% {
		top: -10%;
		transform: translateX(0) rotateX(0) rotateY(0);
	}

	100% {
		top: 100%;
		transform: translateX(-20vw) rotateX(360deg) rotateY(360deg);
	}
}