body {
	perspective: 48rem;
	overflow-x: hidden;
}

.confetti-piece {
	--cp-size: 0.75rem;
	--cp-bs: 0 0 0.375rem hsla(0, 0%, 0%, 0.24);
	--init-rotate: 0deg;
	--init-skew: 0deg;
	--init-scale: 1.0;
	--wobbleX: 2.4rem;
	
	pointer-events: none;

	position: fixed;
	top: calc(var(--cp-size) * -1);
	z-index: 9999 !important;

	width: var(--cp-size);
	height: var(--cp-size);

	box-shadow: var(--cp-bs);
	
	transform:
		rotate(var(--init-rotate))
		skew(var(--init-skew))
		scale(var(--init-scale));

	transform-style: preserve-3d;
	backface-visibility: visible;

	animation:
		fall 2.5s cubic-bezier(0.64, 1, 0.32, 1) forwards,
		wobble 0.6s ease-in-out infinite alternate;
}

@keyframes fall {
	from {
		transform:
			translateY(calc(var(--cp-size) * -1))
			rotate(var(--init-rotate))
			rotateX(0deg)
			rotateY(0deg);
	}
	to {
		transform:
			translateY(105dvh)
			rotate(calc(var(--init-rotate) + 1080deg))
			rotateX(720deg)
			rotateY(450deg)
			skew(var(--init-skew))
			scale(var(--init-scale));
	}
}

@keyframes wobble {
	from {
		margin-left: calc(var(--wobbleX) * -1);
	}
	to {
		margin-left: var(--wobbleX);
	}
}