#confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 9999; }
.confetti { position: absolute; top: -10vh; will-change: transform, opacity; border-radius: 2px; animation-iteration-count: infinite; animation-timing-function: linear; }
.confetti--v1 { animation-name: confetti-fall-1; }
.confetti--v2 { animation-name: confetti-fall-2; }
.confetti--v3 { animation-name: confetti-fall-3; }
.confetti--v4 { animation-name: confetti-fall-4; }
.confetti--v5 { animation-name: confetti-fall-5; }

@keyframes confetti-fall-1 { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(30px, 110vh, 0) rotate(360deg); } }
@keyframes confetti-fall-2 { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(-30px, 110vh, 0) rotate(-360deg); } }
@keyframes confetti-fall-3 { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(60px, 110vh, 0) rotate(540deg); } }
@keyframes confetti-fall-4 { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(-60px, 110vh, 0) rotate(-540deg); } }
@keyframes confetti-fall-5 { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); } 100% { transform: translate3d(0px, 110vh, 0) rotate(720deg); } }