Kamie got a reaction from
Beyondspace in Trying to Add Confetti Code From Codepen to a Single Page
Site URL: https://www.tofw.com/anniversaryannouncement
Hey All,
We are trying to add confetti to an announcement page. I found this code: https://codepen.io/fionnachan/pen/EvaqOB exported the pen, copied and pasted the CSS into the page header code injection spot but nothing is happening. Below is what we pasted. Any ideas what we are doing wrong or how to fix it?
<style>
body {
margin: 0;
overflow: hidden;
}
.wrapper {
position: relative;
min-height: 100vh;
}
[class|="confetti"] {
position: absolute;
}
.confetti-0 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 88%;
opacity: 0.748760738;
-webkit-transform: rotate(130.2146768728deg);
transform: rotate(130.2146768728deg);
-webkit-animation: drop-0 4.3943857284s 0.7711268434s infinite;
animation: drop-0 4.3943857284s 0.7711268434s infinite;
}
@-webkit-keyframes drop-0 {
100% {
top: 110%;
left: 94%;
}
}
@keyframes drop-0 {
100% {
top: 110%;
left: 94%;
}
}
.confetti-1 {
width: 2px;
height: 0.8px;
background-color: #263672;
top: -10%;
left: 82%;
opacity: 0.8927727349;
-webkit-transform: rotate(4.8624582501deg);
transform: rotate(4.8624582501deg);
-webkit-animation: drop-1 4.2517087012s 0.6910502962s infinite;
animation: drop-1 4.2517087012s 0.6910502962s infinite;
}
@-webkit-keyframes drop-1 {
100% {
top: 110%;
left: 84%;
}
}
@keyframes drop-1 {
100% {
top: 110%;
left: 84%;
}
}
.confetti-2 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 43%;
opacity: 1.0335797432;
-webkit-transform: rotate(119.2268510301deg);
transform: rotate(119.2268510301deg);
-webkit-animation: drop-2 4.8406082607s 0.4406149682s infinite;
animation: drop-2 4.8406082607s 0.4406149682s infinite;
}
@-webkit-keyframes drop-2 {
100% {
top: 110%;
left: 45%;
}
}
@keyframes drop-2 {
100% {
top: 110%;
left: 45%;
}
}
.confetti-3 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 7%;
opacity: 1.3171674202;
-webkit-transform: rotate(2.7087205927deg);
transform: rotate(2.7087205927deg);
-webkit-animation: drop-3 4.4441167674s 0.576153815s infinite;
animation: drop-3 4.4441167674s 0.576153815s infinite;
}
@-webkit-keyframes drop-3 {
100% {
top: 110%;
left: 20%;
}
}
@keyframes drop-3 {
100% {
top: 110%;
left: 20%;
}
}
.confetti-4 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 24%;
opacity: 0.5075171062;
-webkit-transform: rotate(314.3078578535deg);
transform: rotate(314.3078578535deg);
-webkit-animation: drop-4 4.6583059634s 0.194595147s infinite;
animation: drop-4 4.6583059634s 0.194595147s infinite;
}
@-webkit-keyframes drop-4 {
100% {
top: 110%;
left: 32%;
}
}
@keyframes drop-4 {
100% {
top: 110%;
left: 32%;
}
}
.confetti-5 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 25%;
opacity: 0.6085965522;
-webkit-transform: rotate(28.6025373759deg);
transform: rotate(28.6025373759deg);
-webkit-animation: drop-5 4.5783817195s 0.988976112s infinite;
animation: drop-5 4.5783817195s 0.988976112s infinite;
}
@-webkit-keyframes drop-5 {
100% {
top: 110%;
left: 36%;
}
}
@keyframes drop-5 {
100% {
top: 110%;
left: 36%;
}
}
.confetti-6 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 48%;
opacity: 1.3876011701;
-webkit-transform: rotate(186.3531139766deg);
transform: rotate(186.3531139766deg);
-webkit-animation: drop-6 4.5914931112s 0.3186752974s infinite;
animation: drop-6 4.5914931112s 0.3186752974s infinite;
}
@-webkit-keyframes drop-6 {
100% {
top: 110%;
left: 50%;
}
}
@keyframes drop-6 {
100% {
top: 110%;
left: 50%;
}
}
.confetti-7 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 29%;
opacity: 1.4121308191;
-webkit-transform: rotate(158.7339020062deg);
transform: rotate(158.7339020062deg);
-webkit-animation: drop-7 4.4798931755s 0.8718819295s infinite;
animation: drop-7 4.4798931755s 0.8718819295s infinite;
}
@-webkit-keyframes drop-7 {
100% {
top: 110%;
left: 34%;
}
}
@keyframes drop-7 {
100% {
top: 110%;
left: 34%;
}
}
.confetti-8 {
width: 6px;
height: 2.4px;
background-color: #263672;
top: -10%;
left: 57%;
opacity: 1.3057910022;
-webkit-transform: rotate(344.1339220376deg);
transform: rotate(344.1339220376deg);
-webkit-animation: drop-8 4.6325839602s 0.884048671s infinite;
animation: drop-8 4.6325839602s 0.884048671s infinite;
}
@-webkit-keyframes drop-8 {
100% {
top: 110%;
left: 70%;
}
}
@keyframes drop-8 {
100% {
top: 110%;
left: 70%;
}
}
.confetti-9 {
width: 4px;
height: 1.6px;
background-color: #263672;
top: -10%;
left: 94%;
opacity: 1.133068568;
-webkit-transform: rotate(250.843039035deg);
transform: rotate(250.843039035deg);
-webkit-animation: drop-9 4.956909197s 0.985975179s infinite;
animation: drop-9 4.956909197s 0.985975179s infinite;
}
@-webkit-keyframes drop-9 {
100% {
top: 110%;
left: 96%;
}
}
@keyframes drop-9 {
100% {
top: 110%;
left: 96%;
}
}
.confetti-10 {
width: 1px;
height: 0.4px;
background-color: #d13447;
top: -10%;
left: 60%;
opacity: 0.920891356;
-webkit-transform: rotate(29.5470040087deg);
transform: rotate(29.5470040087deg);
-webkit-animation: drop-10 4.8069485076s 0.0260163247s infinite;
animation: drop-10 4.8069485076s 0.0260163247s infinite;
}
@-webkit-keyframes drop-10 {
100% {
top: 110%;
left: 61%;
}
}
@keyframes drop-10 {
100% {
top: 110%;
left: 61%;
}
}
.confetti-11 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 88%;
opacity: 1.1743664813;
-webkit-transform: rotate(340.0270406931deg);
transform: rotate(340.0270406931deg);
-webkit-animation: drop-11 4.5215241495s 0.2456250087s infinite;
animation: drop-11 4.5215241495s 0.2456250087s infinite;
}
@-webkit-keyframes drop-11 {
100% {
top: 110%;
left: 103%;
}
}
@keyframes drop-11 {
100% {
top: 110%;
left: 103%;
}
}
.confetti-12 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 83%;
opacity: 0.8291203121;
-webkit-transform: rotate(354.4594508221deg);
transform: rotate(354.4594508221deg);
-webkit-animation: drop-12 4.5231811846s 0.8529621249s infinite;
animation: drop-12 4.5231811846s 0.8529621249s infinite;
}
@-webkit-keyframes drop-12 {
100% {
top: 110%;
left: 87%;
}
}
@keyframes drop-12 {
100% {
top: 110%;
left: 87%;
}
}
.confetti-13 {
width: 8px;
height: 3.2px;
background-color: #263672;
top: -10%;
left: 37%;
opacity: 0.7844187128;
-webkit-transform: rotate(163.9247537025deg);
transform: rotate(163.9247537025deg);
-webkit-animation: drop-13 4.9306852188s 0.4533820487s infinite;
animation: drop-13 4.9306852188s 0.4533820487s infinite;
}
@-webkit-keyframes drop-13 {
100% {
top: 110%;
left: 43%;
}
}
@keyframes drop-13 {
100% {
top: 110%;
left: 43%;
}
}
.confetti-14 {
width: 2px;
height: 0.8px;
background-color: #263672;
top: -10%;
left: 5%;
opacity: 1.3687806656;
-webkit-transform: rotate(93.1048403283deg);
transform: rotate(93.1048403283deg);
-webkit-animation: drop-14 4.9947823419s 0.9416581874s infinite;
animation: drop-14 4.9947823419s 0.9416581874s infinite;
}
@-webkit-keyframes drop-14 {
100% {
top: 110%;
left: 6%;
}
}
@keyframes drop-14 {
100% {
top: 110%;
left: 6%;
}
}
.confetti-15 {
width: 1px;
height: 0.4px;
background-color: #d13447;
top: -10%;
left: 66%;
opacity: 1.1659797767;
-webkit-transform: rotate(112.0246887101deg);
transform: rotate(112.0246887101deg);
-webkit-animation: drop-15 4.7276498535s 0.404943118s infinite;
animation: drop-15 4.7276498535s 0.404943118s infinite;
}
@-webkit-keyframes drop-15 {
100% {
top: 110%;
left: 75%;
}
}
@keyframes drop-15 {
100% {
top: 110%;
left: 75%;
}
}
.confetti-16 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 95%;
opacity: 1.013812783;
-webkit-transform: rotate(38.771421941deg);
transform: rotate(38.771421941deg);
-webkit-animation: drop-16 4.6949546538s 0.5044131557s infinite;
animation: drop-16 4.6949546538s 0.5044131557s infinite;
}
@-webkit-keyframes drop-16 {
100% {
top: 110%;
left: 106%;
}
}
@keyframes drop-16 {
100% {
top: 110%;
left: 106%;
}
}
.confetti-17 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 62%;
opacity: 1.3699763751;
-webkit-transform: rotate(333.9401249372deg);
transform: rotate(333.9401249372deg);
-webkit-animation: drop-17 4.7119617917s 0.7333334343s infinite;
animation: drop-17 4.7119617917s 0.7333334343s infinite;
}
@-webkit-keyframes drop-17 {
100% {
top: 110%;
left: 74%;
}
}
@keyframes drop-17 {
100% {
top: 110%;
left: 74%;
}
}
.confetti-18 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 91%;
opacity: 1.1089851139;
-webkit-transform: rotate(138.7147022868deg);
transform: rotate(138.7147022868deg);
-webkit-animation: drop-18 4.402907738s 0.1757982109s infinite;
animation: drop-18 4.402907738s 0.1757982109s infinite;
}
@-webkit-keyframes drop-18 {
100% {
top: 110%;
left: 99%;
}
}
@keyframes drop-18 {
100% {
top: 110%;
left: 99%;
}
}
.confetti-19 {
width: 6px;
height: 2.4px;
background-color: #263672;
top: -10%;
left: 21%;
opacity: 1.2295182828;
-webkit-transform: rotate(157.4352321175deg);
transform: rotate(157.4352321175deg);
-webkit-animation: drop-19 4.817412117s 0.291485561s infinite;
animation: drop-19 4.817412117s 0.291485561s infinite;
}
@-webkit-keyframes drop-19 {
100% {
top: 110%;
left: 32%;
}
}
@keyframes drop-19 {
100% {
top: 110%;
left: 32%;
}
}
.confetti-20 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 4%;
opacity: 1.179281707;
-webkit-transform: rotate(83.5886694595deg);
transform: rotate(83.5886694595deg);
-webkit-animation: drop-20 4.9692148332s 0.3694042932s infinite;
animation: drop-20 4.9692148332s 0.3694042932s infinite;
}
@-webkit-keyframes drop-20 {
100% {
top: 110%;
left: 14%;
}
}
@keyframes drop-20 {
100% {
top: 110%;
left: 14%;
}
}
.confetti-21 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 19%;
opacity: 1.3911606866;
-webkit-transform: rotate(175.8296580784deg);
transform: rotate(175.8296580784deg);
-webkit-animation: drop-21 4.9354898573s 0.2819943711s infinite;
animation: drop-21 4.9354898573s 0.2819943711s infinite;
}
@-webkit-keyframes drop-21 {
100% {
top: 110%;
left: 33%;
}
}
@keyframes drop-21 {
100% {
top: 110%;
left: 33%;
}
}
.confetti-22 {
width: 2px;
height: 0.8px;
background-color: #d13447;
top: -10%;
left: 23%;
opacity: 1.4861171592;
-webkit-transform: rotate(185.4679813932deg);
transform: rotate(185.4679813932deg);
-webkit-animation: drop-22 4.4659670898s 0.5413633298s infinite;
animation: drop-22 4.4659670898s 0.5413633298s infinite;
}
@-webkit-keyframes drop-22 {
100% {
top: 110%;
left: 38%;
}
}
@keyframes drop-22 {
100% {
top: 110%;
left: 38%;
}
}
.confetti-23 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 59%;
opacity: 1.3794432528;
-webkit-transform: rotate(154.5206102952deg);
transform: rotate(154.5206102952deg);
-webkit-animation: drop-23 4.7941155231s 0.7309590615s infinite;
animation: drop-23 4.7941155231s 0.7309590615s infinite;
}
@-webkit-keyframes drop-23 {
100% {
top: 110%;
left: 74%;
}
}
@keyframes drop-23 {
100% {
top: 110%;
left: 74%;
}
}
.confetti-24 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 27%;
opacity: 0.6528228536;
-webkit-transform: rotate(66.1375385682deg);
transform: rotate(66.1375385682deg);
-webkit-animation: drop-24 4.3572108222s 0.5956072669s infinite;
animation: drop-24 4.3572108222s 0.5956072669s infinite;
}
@-webkit-keyframes drop-24 {
100% {
top: 110%;
left: 33%;
}
}
@keyframes drop-24 {
100% {
top: 110%;
left: 33%;
}
}
.confetti-25 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 38%;
opacity: 0.6262929825;
-webkit-transform: rotate(168.9864319327deg);
transform: rotate(168.9864319327deg);
-webkit-animation: drop-25 4.6108452988s 0.493516289s infinite;
animation: drop-25 4.6108452988s 0.493516289s infinite;
}
@-webkit-keyframes drop-25 {
100% {
top: 110%;
left: 47%;
}
}
@keyframes drop-25 {
100% {
top: 110%;
left: 47%;
}
}
.confetti-26 {
width: 6px;
height: 2.4px;
background-color: #263672;
top: -10%;
left: 98%;
opacity: 0.6112784666;
-webkit-transform: rotate(33.5251768694deg);
transform: rotate(33.5251768694deg);
-webkit-animation: drop-26 4.7175992562s 0.1788901145s infinite;
animation: drop-26 4.7175992562s 0.1788901145s infinite;
}
@-webkit-keyframes drop-26 {
100% {
top: 110%;
left: 102%;
}
}
@keyframes drop-26 {
100% {
top: 110%;
left: 102%;
}
}
.confetti-27 {
width: 1px;
height: 0.4px;
background-color: #ffbf00;
top: -10%;
left: 85%;
opacity: 1.3252238976;
-webkit-transform: rotate(169.531780074deg);
transform: rotate(169.531780074deg);
-webkit-animation: drop-27 4.3524474529s 0.4784144162s infinite;
animation: drop-27 4.3524474529s 0.4784144162s infinite;
}
@-webkit-keyframes drop-27 {
100% {
top: 110%;
left: 89%;
}
}
@keyframes drop-27 {
100% {
top: 110%;
left: 89%;
}
}
.confetti-28 {
width: 4px;
height: 1.6px;
background-color: #263672;
top: -10%;
left: 98%;
opacity: 0.8995155475;
-webkit-transform: rotate(238.6219264242deg);
transform: rotate(238.6219264242deg);
-webkit-animation: drop-28 4.2246942399s 0.3367384005s infinite;
animation: drop-28 4.2246942399s 0.3367384005s infinite;
}
@-webkit-keyframes drop-28 {
100% {
top: 110%;
left: 111%;
}
}
@keyframes drop-28 {
100% {
top: 110%;
left: 111%;
}
}
.confetti-29 {
width: 6px;
height: 2.4px;
background-color: #ffbf00;
top: -10%;
left: 58%;
opacity: 0.6409311538;
-webkit-transform: rotate(183.6652168391deg);
transform: rotate(183.6652168391deg);
-webkit-animation: drop-29 4.8552209743s 0.9602329388s infinite;
animation: drop-29 4.8552209743s 0.9602329388s infinite;
}
@-webkit-keyframes drop-29 {
100% {
top: 110%;
left: 66%;
}
}
@keyframes drop-29 {
100% {
top: 110%;
left: 66%;
}
}
.confetti-30 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 13%;
opacity: 1.3826631475;
-webkit-transform: rotate(220.0949572966deg);
transform: rotate(220.0949572966deg);
-webkit-animation: drop-30 4.1988713044s 0.9417091807s infinite;
animation: drop-30 4.1988713044s 0.9417091807s infinite;
}
@-webkit-keyframes drop-30 {
100% {
top: 110%;
left: 23%;
}
}
@keyframes drop-30 {
100% {
top: 110%;
left: 23%;
}
}
.confetti-31 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 39%;
opacity: 1.0470793457;
-webkit-transform: rotate(18.9863628041deg);
transform: rotate(18.9863628041deg);
-webkit-animation: drop-31 4.4179919071s 0.3261670622s infinite;
animation: drop-31 4.4179919071s 0.3261670622s infinite;
}
@-webkit-keyframes drop-31 {
100% {
top: 110%;
left: 52%;
}
}
@keyframes drop-31 {
100% {
top: 110%;
left: 52%;
}
}
.confetti-32 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 87%;
opacity: 1.2355027716;
-webkit-transform: rotate(147.6801685517deg);
transform: rotate(147.6801685517deg);
-webkit-animation: drop-32 4.6478365162s 0.9486033117s infinite;
animation: drop-32 4.6478365162s 0.9486033117s infinite;
}
@-webkit-keyframes drop-32 {
100% {
top: 110%;
left: 102%;
}
}
@keyframes drop-32 {
100% {
top: 110%;
left: 102%;
}
}
.confetti-33 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 48%;
opacity: 1.3761204503;
-webkit-transform: rotate(81.7950698895deg);
transform: rotate(81.7950698895deg);
-webkit-animation: drop-33 4.4192859044s 0.8099499904s infinite;
animation: drop-33 4.4192859044s 0.8099499904s infinite;
}
@-webkit-keyframes drop-33 {
100% {
top: 110%;
left: 59%;
}
}
@keyframes drop-33 {
100% {
top: 110%;
left: 59%;
}
}
.confetti-34 {
width: 1px;
height: 0.4px;
background-color: #263672;
top: -10%;
left: 66%;
opacity: 0.9414579175;
-webkit-transform: rotate(62.9306001108deg);
transform: rotate(62.9306001108deg);
-webkit-animation: drop-34 4.4175355037s 0.2211505764s infinite;
animation: drop-34 4.4175355037s 0.2211505764s infinite;
}
@-webkit-keyframes drop-34 {
100% {
top: 110%;
left: 71%;
}
}
@keyframes drop-34 {
100% {
top: 110%;
left: 71%;
}
}
.confetti-35 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 44%;
opacity: 1.1608338782;
-webkit-transform: rotate(56.6631336855deg);
transform: rotate(56.6631336855deg);
-webkit-animation: drop-35 4.7183605787s 0.2566422088s infinite;
animation: drop-35 4.7183605787s 0.2566422088s infinite;
}
@-webkit-keyframes drop-35 {
100% {
top: 110%;
left: 52%;
}
}
@keyframes drop-35 {
100% {
top: 110%;
left: 52%;
}
}
.confetti-36 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 49%;
opacity: 0.941861145;
-webkit-transform: rotate(151.5972791131deg);
transform: rotate(151.5972791131deg);
-webkit-animation: drop-36 4.7277590759s 0.3338729509s infinite;
animation: drop-36 4.7277590759s 0.3338729509s infinite;
}
@-webkit-keyframes drop-36 {
100% {
top: 110%;
left: 60%;
}
}
@keyframes drop-36 {
100% {
top: 110%;
left: 60%;
}
}
.confetti-37 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 79%;
opacity: 0.9720074328;
-webkit-transform: rotate(121.3281519137deg);
transform: rotate(121.3281519137deg);
-webkit-animation: drop-37 4.1525631876s 0.3542347137s infinite;
animation: drop-37 4.1525631876s 0.3542347137s infinite;
}
@-webkit-keyframes drop-37 {
100% {
top: 110%;
left: 82%;
}
}
@keyframes drop-37 {
100% {
top: 110%;
left: 82%;
}
}
.confetti-38 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 83%;
opacity: 0.6897198065;
-webkit-transform: rotate(235.6042185175deg);
transform: rotate(235.6042185175deg);
-webkit-animation: drop-38 4.2061668356s 0.2700564876s infinite;
animation: drop-38 4.2061668356s 0.2700564876s infinite;
}
@-webkit-keyframes drop-38 {
100% {
top: 110%;
left: 85%;
}
}
@keyframes drop-38 {
100% {
top: 110%;
left: 85%;
}
}
.confetti-39 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 21%;
opacity: 0.8054123676;
-webkit-transform: rotate(176.9944913354deg);
transform: rotate(176.9944913354deg);
-webkit-animation: drop-39 4.7006337637s 0.6247043461s infinite;
animation: drop-39 4.7006337637s 0.6247043461s infinite;
}
@-webkit-keyframes drop-39 {
100% {
top: 110%;
left: 28%;
}
}
@keyframes drop-39 {
100% {
top: 110%;
left: 28%;
}
}
.confetti-40 {
width: 6px;
height: 2.4px;
background-color: #ffbf00;
top: -10%;
left: 18%;
opacity: 1.3105051599;
-webkit-transform: rotate(220.0201915581deg);
transform: rotate(220.0201915581deg);
-webkit-animation: drop-40 4.8837861257s 0.9707382049s infinite;
animation: drop-40 4.8837861257s 0.9707382049s infinite;
}
@-webkit-keyframes drop-40 {
100% {
top: 110%;
left: 30%;
}
}
@keyframes drop-40 {
100% {
top: 110%;
left: 30%;
}
}
.confetti-41 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 48%;
opacity: 0.7573530178;
-webkit-transform: rotate(277.3256626897deg);
transform: rotate(277.3256626897deg);
-webkit-animation: drop-41 4.7831758583s 0.2913647343s infinite;
animation: drop-41 4.7831758583s 0.2913647343s infinite;
}
@-webkit-keyframes drop-41 {
100% {
top: 110%;
left: 61%;
}
}
@keyframes drop-41 {
100% {
top: 110%;
left: 61%;
}
}
.confetti-42 {
width: 6px;
height: 2.4px;
background-color: #d13447;
top: -10%;
left: 16%;
opacity: 1.078554936;
-webkit-transform: rotate(192.8756077601deg);
transform: rotate(192.8756077601deg);
-webkit-animation: drop-42 4.9291106537s 0.7544614447s infinite;
animation: drop-42 4.9291106537s 0.7544614447s infinite;
}
@-webkit-keyframes drop-42 {
100% {
top: 110%;
left: 27%;
}
}
@keyframes drop-42 {
100% {
top: 110%;
left: 27%;
}
}
.confetti-43 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 32%;
opacity: 1.2979021228;
-webkit-transform: rotate(53.6149407998deg);
transform: rotate(53.6149407998deg);
-webkit-animation: drop-43 4.459428656s 0.2215431843s infinite;
animation: drop-43 4.459428656s 0.2215431843s infinite;
}
@-webkit-keyframes drop-43 {
100% {
top: 110%;
left: 46%;
}
}
@keyframes drop-43 {
100% {
top: 110%;
left: 46%;
}
}
.confetti-44 {
width: 6px;
height: 2.4px;
background-color: #263672;
top: -10%;
left: 40%;
opacity: 0.5289220012;
-webkit-transform: rotate(298.284804348deg);
transform: rotate(298.284804348deg);
-webkit-animation: drop-44 4.8297056252s 0.3862810652s infinite;
animation: drop-44 4.8297056252s 0.3862810652s infinite;
}
@-webkit-keyframes drop-44 {
100% {
top: 110%;
left: 55%;
}
}
@keyframes drop-44 {
100% {
top: 110%;
left: 55%;
}
}
.confetti-45 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 88%;
opacity: 1.1159570333;
-webkit-transform: rotate(137.0267626688deg);
transform: rotate(137.0267626688deg);
-webkit-animation: drop-45 4.9344103169s 0.087383356s infinite;
animation: drop-45 4.9344103169s 0.087383356s infinite;
}
@-webkit-keyframes drop-45 {
100% {
top: 110%;
left: 103%;
}
}
@keyframes drop-45 {
100% {
top: 110%;
left: 103%;
}
}
.confetti-46 {
width: 7px;
height: 2.8px;
background-color: #ffbf00;
top: -10%;
left: 90%;
opacity: 0.7826353553;
-webkit-transform: rotate(245.4525951021deg);
transform: rotate(245.4525951021deg);
-webkit-animation: drop-46 4.6908513026s 0.3364038955s infinite;
animation: drop-46 4.6908513026s 0.3364038955s infinite;
}
@-webkit-keyframes drop-46 {
100% {
top: 110%;
left: 95%;
}
}
@keyframes drop-46 {
100% {
top: 110%;
left: 95%;
}
}
.confetti-47 {
width: 2px;
height: 0.8px;
background-color: #d13447;
top: -10%;
left: 68%;
opacity: 1.3871276923;
-webkit-transform: rotate(341.3544145457deg);
transform: rotate(341.3544145457deg);
-webkit-animation: drop-47 4.6549979454s 0.2839724798s infinite;
animation: drop-47 4.6549979454s 0.2839724798s infinite;
}
@-webkit-keyframes drop-47 {
100% {
top: 110%;
left: 83%;
}
}
@keyframes drop-47 {
100% {
top: 110%;
left: 83%;
}
}
.confetti-48 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 42%;
opacity: 0.726977179;
-webkit-transform: rotate(97.7684365513deg);
transform: rotate(97.7684365513deg);
-webkit-animation: drop-48 4.4702542151s 0.3444735258s infinite;
animation: drop-48 4.4702542151s 0.3444735258s infinite;
}
@-webkit-keyframes drop-48 {
100% {
top: 110%;
left: 44%;
}
}
@keyframes drop-48 {
100% {
top: 110%;
left: 44%;
}
}
.confetti-49 {
width: 3px;
height: 1.2px;
background-color: #ffbf00;
top: -10%;
left: 2%;
opacity: 0.9190330138;
-webkit-transform: rotate(38.8322404092deg);
transform: rotate(38.8322404092deg);
-webkit-animation: drop-49 4.827495062s 0.4372143276s infinite;
animation: drop-49 4.827495062s 0.4372143276s infinite;
}
@-webkit-keyframes drop-49 {
100% {
top: 110%;
left: 5%;
}
}
@keyframes drop-49 {
100% {
top: 110%;
left: 5%;
}
}
.confetti-50 {
width: 6px;
height: 2.4px;
background-color: #d13447;
top: -10%;
left: 42%;
opacity: 0.9264725748;
-webkit-transform: rotate(302.5534960034deg);
transform: rotate(302.5534960034deg);
-webkit-animation: drop-50 4.4026516845s 0.4564744167s infinite;
animation: drop-50 4.4026516845s 0.4564744167s infinite;
}
@-webkit-keyframes drop-50 {
100% {
top: 110%;
left: 47%;
}
}
@keyframes drop-50 {
100% {
top: 110%;
left: 47%;
}
}
.confetti-51 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 38%;
opacity: 1.2216444614;
-webkit-transform: rotate(285.5528327664deg);
transform: rotate(285.5528327664deg);
-webkit-animation: drop-51 4.5839505244s 0.2918281469s infinite;
animation: drop-51 4.5839505244s 0.2918281469s infinite;
}
@-webkit-keyframes drop-51 {
100% {
top: 110%;
left: 52%;
}
}
@keyframes drop-51 {
100% {
top: 110%;
left: 52%;
}
}
.confetti-52 {
width: 3px;
height: 1.2px;
background-color: #ffbf00;
top: -10%;
left: 96%;
opacity: 0.5381406129;
-webkit-transform: rotate(247.6635394456deg);
transform: rotate(247.6635394456deg);
-webkit-animation: drop-52 4.4394584841s 0.1189407909s infinite;
animation: drop-52 4.4394584841s 0.1189407909s infinite;
}
@-webkit-keyframes drop-52 {
100% {
top: 110%;
left: 111%;
}
}
@keyframes drop-52 {
100% {
top: 110%;
left: 111%;
}
}
.confetti-53 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 88%;
opacity: 1.3019819934;
-webkit-transform: rotate(358.8190198623deg);
transform: rotate(358.8190198623deg);
-webkit-animation: drop-53 4.6155295954s 0.8861324294s infinite;
animation: drop-53 4.6155295954s 0.8861324294s infinite;
}
@-webkit-keyframes drop-53 {
100% {
top: 110%;
left: 94%;
}
}
@keyframes drop-53 {
100% {
top: 110%;
left: 94%;
}
}
.confetti-54 {
width: 2px;
height: 0.8px;
background-color: #263672;
top: -10%;
left: 12%;
opacity: 0.9328476449;
-webkit-transform: rotate(169.7037648184deg);
transform: rotate(169.7037648184deg);
-webkit-animation: drop-54 4.8153949768s 0.8030751119s infinite;
animation: drop-54 4.8153949768s 0.8030751119s infinite;
}
@-webkit-keyframes drop-54 {
100% {
top: 110%;
left: 18%;
}
}
@keyframes drop-54 {
100% {
top: 110%;
left: 18%;
}
}
.confetti-55 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 10%;
opacity: 1.2260470841;
-webkit-transform: rotate(359.5086694896deg);
transform: rotate(359.5086694896deg);
-webkit-animation: drop-55 4.9763446626s 0.4770408132s infinite;
animation: drop-55 4.9763446626s 0.4770408132s infinite;
}
@-webkit-keyframes drop-55 {
100% {
top: 110%;
left: 22%;
}
}
@keyframes drop-55 {
100% {
top: 110%;
left: 22%;
}
}
.confetti-56 {
width: 3px;
height: 1.2px;
background-color: #ffbf00;
top: -10%;
left: 54%;
opacity: 0.8430184514;
-webkit-transform: rotate(336.9149077365deg);
transform: rotate(336.9149077365deg);
-webkit-animation: drop-56 4.2762400941s 0.225537498s infinite;
animation: drop-56 4.2762400941s 0.225537498s infinite;
}
@-webkit-keyframes drop-56 {
100% {
top: 110%;
left: 60%;
}
}
@keyframes drop-56 {
100% {
top: 110%;
left: 60%;
}
}
.confetti-57 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 42%;
opacity: 1.1214686143;
-webkit-transform: rotate(282.73405967deg);
transform: rotate(282.73405967deg);
-webkit-animation: drop-57 4.6513778014s 0.9115692549s infinite;
animation: drop-57 4.6513778014s 0.9115692549s infinite;
}
@-webkit-keyframes drop-57 {
100% {
top: 110%;
left: 56%;
}
}
@keyframes drop-57 {
100% {
top: 110%;
left: 56%;
}
}
.confetti-58 {
width: 2px;
height: 0.8px;
background-color: #ffbf00;
top: -10%;
left: 3%;
opacity: 1.0385594633;
-webkit-transform: rotate(23.5069996911deg);
transform: rotate(23.5069996911deg);
-webkit-animation: drop-58 4.71534566s 0.2840794301s infinite;
animation: drop-58 4.71534566s 0.2840794301s infinite;
}
@-webkit-keyframes drop-58 {
100% {
top: 110%;
left: 15%;
}
}
@keyframes drop-58 {
100% {
top: 110%;
left: 15%;
}
}
.confetti-59 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 66%;
opacity: 0.5326603477;
-webkit-transform: rotate(309.729529441deg);
transform: rotate(309.729529441deg);
-webkit-animation: drop-59 4.817638709s 0.7580384947s infinite;
animation: drop-59 4.817638709s 0.7580384947s infinite;
}
@-webkit-keyframes drop-59 {
100% {
top: 110%;
left: 81%;
}
}
@keyframes drop-59 {
100% {
top: 110%;
left: 81%;
}
}
.confetti-60 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 100%;
opacity: 1.0217407048;
-webkit-transform: rotate(91.608596535deg);
transform: rotate(91.608596535deg);
-webkit-animation: drop-60 4.2483110306s 0.0729695792s infinite;
animation: drop-60 4.2483110306s 0.0729695792s infinite;
}
@-webkit-keyframes drop-60 {
100% {
top: 110%;
left: 110%;
}
}
@keyframes drop-60 {
100% {
top: 110%;
left: 110%;
}
}
.confetti-61 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 32%;
opacity: 0.836508996;
-webkit-transform: rotate(250.7874794862deg);
transform: rotate(250.7874794862deg);
-webkit-animation: drop-61 4.1102644659s 0.9027774497s infinite;
animation: drop-61 4.1102644659s 0.9027774497s infinite;
}
@-webkit-keyframes drop-61 {
100% {
top: 110%;
left: 41%;
}
}
@keyframes drop-61 {
100% {
top: 110%;
left: 41%;
}
}
.confetti-62 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 4%;
opacity: 1.1349904763;
-webkit-transform: rotate(85.8807198119deg);
transform: rotate(85.8807198119deg);
-webkit-animation: drop-62 4.8020831995s 0.731851471s infinite;
animation: drop-62 4.8020831995s 0.731851471s infinite;
}
@-webkit-keyframes drop-62 {
100% {
top: 110%;
left: 9%;
}
}
@keyframes drop-62 {
100% {
top: 110%;
left: 9%;
}
}
.confetti-63 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 74%;
opacity: 0.8840770041;
-webkit-transform: rotate(334.738168238deg);
transform: rotate(334.738168238deg);
-webkit-animation: drop-63 4.01241081s 0.4868452516s infinite;
animation: drop-63 4.01241081s 0.4868452516s infinite;
}
@-webkit-keyframes drop-63 {
100% {
top: 110%;
left: 81%;
}
}
@keyframes drop-63 {
100% {
top: 110%;
left: 81%;
}
}
.confetti-64 {
width: 7px;
height: 2.8px;
background-color: #ffbf00;
top: -10%;
left: 4%;
opacity: 0.6983432694;
-webkit-transform: rotate(274.5326241261deg);
transform: rotate(274.5326241261deg);
-webkit-animation: drop-64 4.3643891003s 0.0888939544s infinite;
animation: drop-64 4.3643891003s 0.0888939544s infinite;
}
@-webkit-keyframes drop-64 {
100% {
top: 110%;
left: 10%;
}
}
@keyframes drop-64 {
100% {
top: 110%;
left: 10%;
}
}
.confetti-65 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 70%;
opacity: 1.3689540889;
-webkit-transform: rotate(268.6465433167deg);
transform: rotate(268.6465433167deg);
-webkit-animation: drop-65 4.8902138743s 0.0355614238s infinite;
animation: drop-65 4.8902138743s 0.0355614238s infinite;
}
@-webkit-keyframes drop-65 {
100% {
top: 110%;
left: 72%;
}
}
@keyframes drop-65 {
100% {
top: 110%;
left: 72%;
}
}
.confetti-66 {
width: 4px;
height: 1.6px;
background-color: #263672;
top: -10%;
left: 35%;
opacity: 1.4170309957;
-webkit-transform: rotate(82.794461726deg);
transform: rotate(82.794461726deg);
-webkit-animation: drop-66 4.0991735409s 0.2963254916s infinite;
animation: drop-66 4.0991735409s 0.2963254916s infinite;
}
@-webkit-keyframes drop-66 {
100% {
top: 110%;
left: 45%;
}
}
@keyframes drop-66 {
100% {
top: 110%;
left: 45%;
}
}
.confetti-67 {
width: 6px;
height: 2.4px;
background-color: #ffbf00;
top: -10%;
left: 6%;
opacity: 1.2126221644;
-webkit-transform: rotate(172.0432455933deg);
transform: rotate(172.0432455933deg);
-webkit-animation: drop-67 4.7397261574s 0.8669530953s infinite;
animation: drop-67 4.7397261574s 0.8669530953s infinite;
}
@-webkit-keyframes drop-67 {
100% {
top: 110%;
left: 17%;
}
}
@keyframes drop-67 {
100% {
top: 110%;
left: 17%;
}
}
.confetti-68 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 49%;
opacity: 1.0862008091;
-webkit-transform: rotate(308.3856116251deg);
transform: rotate(308.3856116251deg);
-webkit-animation: drop-68 4.51226171s 0.9838299199s infinite;
animation: drop-68 4.51226171s 0.9838299199s infinite;
}
@-webkit-keyframes drop-68 {
100% {
top: 110%;
left: 61%;
}
}
@keyframes drop-68 {
100% {
top: 110%;
left: 61%;
}
}
.confetti-69 {
width: 7px;
height: 2.8px;
background-color: #ffbf00;
top: -10%;
left: 47%;
opacity: 1.2544121531;
-webkit-transform: rotate(150.8490751406deg);
transform: rotate(150.8490751406deg);
-webkit-animation: drop-69 4.5006851056s 0.9655244909s infinite;
animation: drop-69 4.5006851056s 0.9655244909s infinite;
}
@-webkit-keyframes drop-69 {
100% {
top: 110%;
left: 60%;
}
}
@keyframes drop-69 {
100% {
top: 110%;
left: 60%;
}
}
.confetti-70 {
width: 6px;
height: 2.4px;
background-color: #ffbf00;
top: -10%;
left: 85%;
opacity: 1.1896143442;
-webkit-transform: rotate(271.6676114012deg);
transform: rotate(271.6676114012deg);
-webkit-animation: drop-70 4.9738522793s 0.5098850531s infinite;
animation: drop-70 4.9738522793s 0.5098850531s infinite;
}
@-webkit-keyframes drop-70 {
100% {
top: 110%;
left: 96%;
}
}
@keyframes drop-70 {
100% {
top: 110%;
left: 96%;
}
}
.confetti-71 {
width: 6px;
height: 2.4px;
background-color: #ffbf00;
top: -10%;
left: 58%;
opacity: 1.4632623748;
-webkit-transform: rotate(300.1257452297deg);
transform: rotate(300.1257452297deg);
-webkit-animation: drop-71 4.6038820154s 0.4779868091s infinite;
animation: drop-71 4.6038820154s 0.4779868091s infinite;
}
@-webkit-keyframes drop-71 {
100% {
top: 110%;
left: 71%;
}
}
@keyframes drop-71 {
100% {
top: 110%;
left: 71%;
}
}
.confetti-72 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 9%;
opacity: 1.2931769056;
-webkit-transform: rotate(336.9685460302deg);
transform: rotate(336.9685460302deg);
-webkit-animation: drop-72 4.7675772383s 0.9597476506s infinite;
animation: drop-72 4.7675772383s 0.9597476506s infinite;
}
@-webkit-keyframes drop-72 {
100% {
top: 110%;
left: 13%;
}
}
@keyframes drop-72 {
100% {
top: 110%;
left: 13%;
}
}
.confetti-73 {
width: 7px;
height: 2.8px;
background-color: #ffbf00;
top: -10%;
left: 99%;
opacity: 1.3799465642;
-webkit-transform: rotate(131.8868227053deg);
transform: rotate(131.8868227053deg);
-webkit-animation: drop-73 4.1244431241s 0.7593004643s infinite;
animation: drop-73 4.1244431241s 0.7593004643s infinite;
}
@-webkit-keyframes drop-73 {
100% {
top: 110%;
left: 107%;
}
}
@keyframes drop-73 {
100% {
top: 110%;
left: 107%;
}
}
.confetti-74 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 69%;
opacity: 1.2407443523;
-webkit-transform: rotate(197.7132017982deg);
transform: rotate(197.7132017982deg);
-webkit-animation: drop-74 4.4084854011s 0.0256903765s infinite;
animation: drop-74 4.4084854011s 0.0256903765s infinite;
}
@-webkit-keyframes drop-74 {
100% {
top: 110%;
left: 75%;
}
}
@keyframes drop-74 {
100% {
top: 110%;
left: 75%;
}
}
.confetti-75 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 4%;
opacity: 1.3843219676;
-webkit-transform: rotate(300.0256552518deg);
transform: rotate(300.0256552518deg);
-webkit-animation: drop-75 4.6706634486s 0.2856458129s infinite;
animation: drop-75 4.6706634486s 0.2856458129s infinite;
}
@-webkit-keyframes drop-75 {
100% {
top: 110%;
left: 5%;
}
}
@keyframes drop-75 {
100% {
top: 110%;
left: 5%;
}
}
.confetti-76 {
width: 2px;
height: 0.8px;
background-color: #d13447;
top: -10%;
left: 52%;
opacity: 1.4379966515;
-webkit-transform: rotate(255.1416991638deg);
transform: rotate(255.1416991638deg);
-webkit-animation: drop-76 4.1313640402s 0.7099190139s infinite;
animation: drop-76 4.1313640402s 0.7099190139s infinite;
}
@-webkit-keyframes drop-76 {
100% {
top: 110%;
left: 67%;
}
}
@keyframes drop-76 {
100% {
top: 110%;
left: 67%;
}
}
.confetti-77 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 55%;
opacity: 0.7120524348;
-webkit-transform: rotate(331.9776604745deg);
transform: rotate(331.9776604745deg);
-webkit-animation: drop-77 4.4097189726s 0.3218303778s infinite;
animation: drop-77 4.4097189726s 0.3218303778s infinite;
}
@-webkit-keyframes drop-77 {
100% {
top: 110%;
left: 65%;
}
}
@keyframes drop-77 {
100% {
top: 110%;
left: 65%;
}
}
.confetti-78 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 20%;
opacity: 1.3581685604;
-webkit-transform: rotate(46.1902380111deg);
transform: rotate(46.1902380111deg);
-webkit-animation: drop-78 4.2604613523s 0.846904873s infinite;
animation: drop-78 4.2604613523s 0.846904873s infinite;
}
@-webkit-keyframes drop-78 {
100% {
top: 110%;
left: 26%;
}
}
@keyframes drop-78 {
100% {
top: 110%;
left: 26%;
}
}
.confetti-79 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 55%;
opacity: 1.1767531649;
-webkit-transform: rotate(353.7122088524deg);
transform: rotate(353.7122088524deg);
-webkit-animation: drop-79 4.6512568045s 0.2023588667s infinite;
animation: drop-79 4.6512568045s 0.2023588667s infinite;
}
@-webkit-keyframes drop-79 {
100% {
top: 110%;
left: 62%;
}
}
@keyframes drop-79 {
100% {
top: 110%;
left: 62%;
}
}
.confetti-80 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 40%;
opacity: 1.0765366102;
-webkit-transform: rotate(144.0001838416deg);
transform: rotate(144.0001838416deg);
-webkit-animation: drop-80 4.5984264901s 0.0039827093s infinite;
animation: drop-80 4.5984264901s 0.0039827093s infinite;
}
@-webkit-keyframes drop-80 {
100% {
top: 110%;
left: 44%;
}
}
@keyframes drop-80 {
100% {
top: 110%;
left: 44%;
}
}
.confetti-81 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 8%;
opacity: 1.0356917031;
-webkit-transform: rotate(225.7944775177deg);
transform: rotate(225.7944775177deg);
-webkit-animation: drop-81 4.8994386826s 0.6020012548s infinite;
animation: drop-81 4.8994386826s 0.6020012548s infinite;
}
@-webkit-keyframes drop-81 {
100% {
top: 110%;
left: 15%;
}
}
@keyframes drop-81 {
100% {
top: 110%;
left: 15%;
}
}
.confetti-82 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 61%;
opacity: 1.0652998836;
-webkit-transform: rotate(55.6189283611deg);
transform: rotate(55.6189283611deg);
-webkit-animation: drop-82 4.1559371987s 0.1284721351s infinite;
animation: drop-82 4.1559371987s 0.1284721351s infinite;
}
@-webkit-keyframes drop-82 {
100% {
top: 110%;
left: 66%;
}
}
@keyframes drop-82 {
100% {
top: 110%;
left: 66%;
}
}
.confetti-83 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 40%;
opacity: 0.8104745427;
-webkit-transform: rotate(5.1002279066deg);
transform: rotate(5.1002279066deg);
-webkit-animation: drop-83 4.6974162074s 0.557897198s infinite;
animation: drop-83 4.6974162074s 0.557897198s infinite;
}
@-webkit-keyframes drop-83 {
100% {
top: 110%;
left: 44%;
}
}
@keyframes drop-83 {
100% {
top: 110%;
left: 44%;
}
}
.confetti-84 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 63%;
opacity: 0.8506628341;
-webkit-transform: rotate(135.3578925605deg);
transform: rotate(135.3578925605deg);
-webkit-animation: drop-84 4.7320518262s 0.9369153482s infinite;
animation: drop-84 4.7320518262s 0.9369153482s infinite;
}
@-webkit-keyframes drop-84 {
100% {
top: 110%;
left: 78%;
}
}
@keyframes drop-84 {
100% {
top: 110%;
left: 78%;
}
}
.confetti-85 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 14%;
opacity: 0.5176421119;
-webkit-transform: rotate(309.6276821264deg);
transform: rotate(309.6276821264deg);
-webkit-animation: drop-85 4.7211154678s 0.8354915675s infinite;
animation: drop-85 4.7211154678s 0.8354915675s infinite;
}
@-webkit-keyframes drop-85 {
100% {
top: 110%;
left: 24%;
}
}
@keyframes drop-85 {
100% {
top: 110%;
left: 24%;
}
}
.confetti-86 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 16%;
opacity: 0.5953061775;
-webkit-transform: rotate(201.2285478202deg);
transform: rotate(201.2285478202deg);
-webkit-animation: drop-86 4.1291119819s 0.0698162969s infinite;
animation: drop-86 4.1291119819s 0.0698162969s infinite;
}
@-webkit-keyframes drop-86 {
100% {
top: 110%;
left: 19%;
}
}
@keyframes drop-86 {
100% {
top: 110%;
left: 19%;
}
}
.confetti-87 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 82%;
opacity: 0.6899529266;
-webkit-transform: rotate(8.5081224986deg);
transform: rotate(8.5081224986deg);
-webkit-animation: drop-87 4.2432890017s 0.6669037517s infinite;
animation: drop-87 4.2432890017s 0.6669037517s infinite;
}
@-webkit-keyframes drop-87 {
100% {
top: 110%;
left: 88%;
}
}
@keyframes drop-87 {
100% {
top: 110%;
left: 88%;
}
}
.confetti-88 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 81%;
opacity: 0.7980193256;
-webkit-transform: rotate(215.3480652165deg);
transform: rotate(215.3480652165deg);
-webkit-animation: drop-88 4.62841992s 0.7708023464s infinite;
animation: drop-88 4.62841992s 0.7708023464s infinite;
}
@-webkit-keyframes drop-88 {
100% {
top: 110%;
left: 90%;
}
}
@keyframes drop-88 {
100% {
top: 110%;
left: 90%;
}
}
.confetti-89 {
width: 8px;
height: 3.2px;
background-color: #263672;
top: -10%;
left: 76%;
opacity: 1.0625594272;
-webkit-transform: rotate(215.6930375558deg);
transform: rotate(215.6930375558deg);
-webkit-animation: drop-89 4.2739493281s 0.7062573645s infinite;
animation: drop-89 4.2739493281s 0.7062573645s infinite;
}
@-webkit-keyframes drop-89 {
100% {
top: 110%;
left: 85%;
}
}
@keyframes drop-89 {
100% {
top: 110%;
left: 85%;
}
}
.confetti-90 {
width: 1px;
height: 0.4px;
background-color: #d13447;
top: -10%;
left: 27%;
opacity: 1.028638824;
-webkit-transform: rotate(52.6349036278deg);
transform: rotate(52.6349036278deg);
-webkit-animation: drop-90 4.1595182418s 0.3895649988s infinite;
animation: drop-90 4.1595182418s 0.3895649988s infinite;
}
@-webkit-keyframes drop-90 {
100% {
top: 110%;
left: 32%;
}
}
@keyframes drop-90 {
100% {
top: 110%;
left: 32%;
}
}
.confetti-91 {
width: 7px;
height: 2.8px;
background-color: #ffbf00;
top: -10%;
left: 49%;
opacity: 1.2710260128;
-webkit-transform: rotate(295.1873739161deg);
transform: rotate(295.1873739161deg);
-webkit-animation: drop-91 4.8872066913s 0.9449329318s infinite;
animation: drop-91 4.8872066913s 0.9449329318s infinite;
}
@-webkit-keyframes drop-91 {
100% {
top: 110%;
left: 51%;
}
}
@keyframes drop-91 {
100% {
top: 110%;
left: 51%;
}
}
.confetti-92 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 50%;
opacity: 1.3472276658;
-webkit-transform: rotate(227.7529679921deg);
transform: rotate(227.7529679921deg);
-webkit-animation: drop-92 4.8640354979s 0.4428225593s infinite;
animation: drop-92 4.8640354979s 0.4428225593s infinite;
}
@-webkit-keyframes drop-92 {
100% {
top: 110%;
left: 59%;
}
}
@keyframes drop-92 {
100% {
top: 110%;
left: 59%;
}
}
.confetti-93 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 30%;
opacity: 1.4820593816;
-webkit-transform: rotate(232.6745900082deg);
transform: rotate(232.6745900082deg);
-webkit-animation: drop-93 4.1617234282s 0.902250642s infinite;
animation: drop-93 4.1617234282s 0.902250642s infinite;
}
@-webkit-keyframes drop-93 {
100% {
top: 110%;
left: 36%;
}
}
@keyframes drop-93 {
100% {
top: 110%;
left: 36%;
}
}
.confetti-94 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 71%;
opacity: 0.5737926225;
-webkit-transform: rotate(318.4930895539deg);
transform: rotate(318.4930895539deg);
-webkit-animation: drop-94 4.113450658s 0.1416638974s infinite;
animation: drop-94 4.113450658s 0.1416638974s infinite;
}
@-webkit-keyframes drop-94 {
100% {
top: 110%;
left: 79%;
}
}
@keyframes drop-94 {
100% {
top: 110%;
left: 79%;
}
}
.confetti-95 {
width: 1px;
height: 0.4px;
background-color: #ffbf00;
top: -10%;
left: 66%;
opacity: 1.4380831846;
-webkit-transform: rotate(124.3820430278deg);
transform: rotate(124.3820430278deg);
-webkit-animation: drop-95 4.2054115589s 0.1144509887s infinite;
animation: drop-95 4.2054115589s 0.1144509887s infinite;
}
@-webkit-keyframes drop-95 {
100% {
top: 110%;
left: 71%;
}
}
@keyframes drop-95 {
100% {
top: 110%;
left: 71%;
}
}
.confetti-96 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 20%;
opacity: 0.6418596498;
-webkit-transform: rotate(159.9142311835deg);
transform: rotate(159.9142311835deg);
-webkit-animation: drop-96 4.6688273812s 0.4274877193s infinite;
animation: drop-96 4.6688273812s 0.4274877193s infinite;
}
@-webkit-keyframes drop-96 {
100% {
top: 110%;
left: 34%;
}
}
@keyframes drop-96 {
100% {
top: 110%;
left: 34%;
}
}
.confetti-97 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 33%;
opacity: 0.8359865006;
-webkit-transform: rotate(315.4868879356deg);
transform: rotate(315.4868879356deg);
-webkit-animation: drop-97 4.6816706059s 0.3169953891s infinite;
animation: drop-97 4.6816706059s 0.3169953891s infinite;
}
@-webkit-keyframes drop-97 {
100% {
top: 110%;
left: 45%;
}
}
@keyframes drop-97 {
100% {
top: 110%;
left: 45%;
}
}
.confetti-98 {
width: 6px;
height: 2.4px;
background-color: #d13447;
top: -10%;
left: 23%;
opacity: 1.0976340655;
-webkit-transform: rotate(82.8571292557deg);
transform: rotate(82.8571292557deg);
-webkit-animation: drop-98 4.8538135112s 0.8341768089s infinite;
animation: drop-98 4.8538135112s 0.8341768089s infinite;
}
@-webkit-keyframes drop-98 {
100% {
top: 110%;
left: 29%;
}
}
@keyframes drop-98 {
100% {
top: 110%;
left: 29%;
}
}
.confetti-99 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 67%;
opacity: 0.8471920216;
-webkit-transform: rotate(44.9317272936deg);
transform: rotate(44.9317272936deg);
-webkit-animation: drop-99 4.0392843162s 0.4390822016s infinite;
animation: drop-99 4.0392843162s 0.4390822016s infinite;
}
@-webkit-keyframes drop-99 {
100% {
top: 110%;
left: 74%;
}
}
@keyframes drop-99 {
100% {
top: 110%;
left: 74%;
}
}
.confetti-100 {
width: 1px;
height: 0.4px;
background-color: #d13447;
top: -10%;
left: 63%;
opacity: 0.7272251833;
-webkit-transform: rotate(155.8630708992deg);
transform: rotate(155.8630708992deg);
-webkit-animation: drop-100 4.2543560089s 0.4438481151s infinite;
animation: drop-100 4.2543560089s 0.4438481151s infinite;
}
@-webkit-keyframes drop-100 {
100% {
top: 110%;
left: 65%;
}
}
@keyframes drop-100 {
100% {
top: 110%;
left: 65%;
}
}
.confetti-101 {
width: 4px;
height: 1.6px;
background-color: #263672;
top: -10%;
left: 38%;
opacity: 1.4840693954;
-webkit-transform: rotate(95.516766414deg);
transform: rotate(95.516766414deg);
-webkit-animation: drop-101 4.3480345713s 0.458612664s infinite;
animation: drop-101 4.3480345713s 0.458612664s infinite;
}
@-webkit-keyframes drop-101 {
100% {
top: 110%;
left: 39%;
}
}
@keyframes drop-101 {
100% {
top: 110%;
left: 39%;
}
}
.confetti-102 {
width: 2px;
height: 0.8px;
background-color: #d13447;
top: -10%;
left: 49%;
opacity: 0.7432016902;
-webkit-transform: rotate(155.7178519598deg);
transform: rotate(155.7178519598deg);
-webkit-animation: drop-102 4.3574640545s 0.150345702s infinite;
animation: drop-102 4.3574640545s 0.150345702s infinite;
}
@-webkit-keyframes drop-102 {
100% {
top: 110%;
left: 58%;
}
}
@keyframes drop-102 {
100% {
top: 110%;
left: 58%;
}
}
.confetti-103 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 61%;
opacity: 1.3428037106;
-webkit-transform: rotate(63.6648792189deg);
transform: rotate(63.6648792189deg);
-webkit-animation: drop-103 4.496179442s 0.8617512121s infinite;
animation: drop-103 4.496179442s 0.8617512121s infinite;
}
@-webkit-keyframes drop-103 {
100% {
top: 110%;
left: 75%;
}
}
@keyframes drop-103 {
100% {
top: 110%;
left: 75%;
}
}
.confetti-104 {
width: 6px;
height: 2.4px;
background-color: #d13447;
top: -10%;
left: 100%;
opacity: 0.5542069278;
-webkit-transform: rotate(228.36755454deg);
transform: rotate(228.36755454deg);
-webkit-animation: drop-104 4.2395279384s 0.8597901724s infinite;
animation: drop-104 4.2395279384s 0.8597901724s infinite;
}
@-webkit-keyframes drop-104 {
100% {
top: 110%;
left: 111%;
}
}
@keyframes drop-104 {
100% {
top: 110%;
left: 111%;
}
}
.confetti-105 {
width: 7px;
height: 2.8px;
background-color: #ffbf00;
top: -10%;
left: 18%;
opacity: 1.1094996847;
-webkit-transform: rotate(133.4049927722deg);
transform: rotate(133.4049927722deg);
-webkit-animation: drop-105 4.5554934515s 0.5146432068s infinite;
animation: drop-105 4.5554934515s 0.5146432068s infinite;
}
@-webkit-keyframes drop-105 {
100% {
top: 110%;
left: 19%;
}
}
@keyframes drop-105 {
100% {
top: 110%;
left: 19%;
}
}
.confetti-106 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 63%;
opacity: 1.4107395633;
-webkit-transform: rotate(161.4104486313deg);
transform: rotate(161.4104486313deg);
-webkit-animation: drop-106 4.7981735446s 0.6573846512s infinite;
animation: drop-106 4.7981735446s 0.6573846512s infinite;
}
@-webkit-keyframes drop-106 {
100% {
top: 110%;
left: 65%;
}
}
@keyframes drop-106 {
100% {
top: 110%;
left: 65%;
}
}
.confetti-107 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 99%;
opacity: 1.270275964;
-webkit-transform: rotate(122.7146352931deg);
transform: rotate(122.7146352931deg);
-webkit-animation: drop-107 4.5992090553s 0.0929215887s infinite;
animation: drop-107 4.5992090553s 0.0929215887s infinite;
}
@-webkit-keyframes drop-107 {
100% {
top: 110%;
left: 102%;
}
}
@keyframes drop-107 {
100% {
top: 110%;
left: 102%;
}
}
.confetti-108 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 4%;
opacity: 1.2142002444;
-webkit-transform: rotate(357.7777268793deg);
transform: rotate(357.7777268793deg);
-webkit-animation: drop-108 4.6926623416s 0.7691936284s infinite;
animation: drop-108 4.6926623416s 0.7691936284s infinite;
}
@-webkit-keyframes drop-108 {
100% {
top: 110%;
left: 19%;
}
}
@keyframes drop-108 {
100% {
top: 110%;
left: 19%;
}
}
.confetti-109 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 35%;
opacity: 0.5449547143;
-webkit-transform: rotate(209.6753143155deg);
transform: rotate(209.6753143155deg);
-webkit-animation: drop-109 4.5064157499s 0.9977606369s infinite;
animation: drop-109 4.5064157499s 0.9977606369s infinite;
}
@-webkit-keyframes drop-109 {
100% {
top: 110%;
left: 36%;
}
}
@keyframes drop-109 {
100% {
top: 110%;
left: 36%;
}
}
.confetti-110 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 60%;
opacity: 0.6363955635;
-webkit-transform: rotate(62.9331820125deg);
transform: rotate(62.9331820125deg);
-webkit-animation: drop-110 4.3601777974s 0.6965685149s infinite;
animation: drop-110 4.3601777974s 0.6965685149s infinite;
}
@-webkit-keyframes drop-110 {
100% {
top: 110%;
left: 73%;
}
}
@keyframes drop-110 {
100% {
top: 110%;
left: 73%;
}
}
.confetti-111 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 20%;
opacity: 1.3740569609;
-webkit-transform: rotate(275.3317334231deg);
transform: rotate(275.3317334231deg);
-webkit-animation: drop-111 4.9391102159s 0.6202641518s infinite;
animation: drop-111 4.9391102159s 0.6202641518s infinite;
}
@-webkit-keyframes drop-111 {
100% {
top: 110%;
left: 27%;
}
}
@keyframes drop-111 {
100% {
top: 110%;
left: 27%;
}
}
.confetti-112 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 3%;
opacity: 1.3275384931;
-webkit-transform: rotate(23.0903331567deg);
transform: rotate(23.0903331567deg);
-webkit-animation: drop-112 4.1258659362s 0.955627185s infinite;
animation: drop-112 4.1258659362s 0.955627185s infinite;
}
@-webkit-keyframes drop-112 {
100% {
top: 110%;
left: 4%;
}
}
@keyframes drop-112 {
100% {
top: 110%;
left: 4%;
}
}
.confetti-113 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 6%;
opacity: 0.9512788668;
-webkit-transform: rotate(334.7531840834deg);
transform: rotate(334.7531840834deg);
-webkit-animation: drop-113 4.8168082109s 0.3717631714s infinite;
animation: drop-113 4.8168082109s 0.3717631714s infinite;
}
@-webkit-keyframes drop-113 {
100% {
top: 110%;
left: 14%;
}
}
@keyframes drop-113 {
100% {
top: 110%;
left: 14%;
}
}
.confetti-114 {
width: 8px;
height: 3.2px;
background-color: #263672;
top: -10%;
left: 58%;
opacity: 0.5016814005;
-webkit-transform: rotate(8.1281777553deg);
transform: rotate(8.1281777553deg);
-webkit-animation: drop-114 4.7199640468s 0.4436626687s infinite;
animation: drop-114 4.7199640468s 0.4436626687s infinite;
}
@-webkit-keyframes drop-114 {
100% {
top: 110%;
left: 72%;
}
}
@keyframes drop-114 {
100% {
top: 110%;
left: 72%;
}
}
.confetti-115 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 61%;
opacity: 1.1047714243;
-webkit-transform: rotate(179.0249960452deg);
transform: rotate(179.0249960452deg);
-webkit-animation: drop-115 4.2297424389s 0.1237548129s infinite;
animation: drop-115 4.2297424389s 0.1237548129s infinite;
}
@-webkit-keyframes drop-115 {
100% {
top: 110%;
left: 68%;
}
}
@keyframes drop-115 {
100% {
top: 110%;
left: 68%;
}
}
.confetti-116 {
width: 6px;
height: 2.4px;
background-color: #263672;
top: -10%;
left: 99%;
opacity: 0.8569025776;
-webkit-transform: rotate(267.7858539944deg);
transform: rotate(267.7858539944deg);
-webkit-animation: drop-116 4.7314647427s 0.207695863s infinite;
animation: drop-116 4.7314647427s 0.207695863s infinite;
}
@-webkit-keyframes drop-116 {
100% {
top: 110%;
left: 112%;
}
}
@keyframes drop-116 {
100% {
top: 110%;
left: 112%;
}
}
.confetti-117 {
width: 1px;
height: 0.4px;
background-color: #d13447;
top: -10%;
left: 51%;
opacity: 0.9927926595;
-webkit-transform: rotate(245.3619520167deg);
transform: rotate(245.3619520167deg);
-webkit-animation: drop-117 4.192352073s 0.43518199s infinite;
animation: drop-117 4.192352073s 0.43518199s infinite;
}
@-webkit-keyframes drop-117 {
100% {
top: 110%;
left: 60%;
}
}
@keyframes drop-117 {
100% {
top: 110%;
left: 60%;
}
}
.confetti-118 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 12%;
opacity: 1.2075920494;
-webkit-transform: rotate(187.8230142783deg);
transform: rotate(187.8230142783deg);
-webkit-animation: drop-118 4.4565634596s 0.8390160341s infinite;
animation: drop-118 4.4565634596s 0.8390160341s infinite;
}
@-webkit-keyframes drop-118 {
100% {
top: 110%;
left: 14%;
}
}
@keyframes drop-118 {
100% {
top: 110%;
left: 14%;
}
}
.confetti-119 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 47%;
opacity: 1.3961422817;
-webkit-transform: rotate(299.5687508162deg);
transform: rotate(299.5687508162deg);
-webkit-animation: drop-119 4.657220337s 0.7927529918s infinite;
animation: drop-119 4.657220337s 0.7927529918s infinite;
}
@-webkit-keyframes drop-119 {
100% {
top: 110%;
left: 48%;
}
}
@keyframes drop-119 {
100% {
top: 110%;
left: 48%;
}
}
.confetti-120 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 29%;
opacity: 1.1269241698;
-webkit-transform: rotate(257.2289809494deg);
transform: rotate(257.2289809494deg);
-webkit-animation: drop-120 4.047713153s 0.6526555608s infinite;
animation: drop-120 4.047713153s 0.6526555608s infinite;
}
@-webkit-keyframes drop-120 {
100% {
top: 110%;
left: 36%;
}
}
@keyframes drop-120 {
100% {
top: 110%;
left: 36%;
}
}
.confetti-121 {
width: 7px;
height: 2.8px;
background-color: #d13447;
top: -10%;
left: 34%;
opacity: 0.5353971749;
-webkit-transform: rotate(187.8529359112deg);
transform: rotate(187.8529359112deg);
-webkit-animation: drop-121 4.7410107128s 0.3777467917s infinite;
animation: drop-121 4.7410107128s 0.3777467917s infinite;
}
@-webkit-keyframes drop-121 {
100% {
top: 110%;
left: 48%;
}
}
@keyframes drop-121 {
100% {
top: 110%;
left: 48%;
}
}
.confetti-122 {
width: 1px;
height: 0.4px;
background-color: #263672;
top: -10%;
left: 22%;
opacity: 0.9360881477;
-webkit-transform: rotate(217.8893836253deg);
transform: rotate(217.8893836253deg);
-webkit-animation: drop-122 4.0291322017s 0.4958142876s infinite;
animation: drop-122 4.0291322017s 0.4958142876s infinite;
}
@-webkit-keyframes drop-122 {
100% {
top: 110%;
left: 35%;
}
}
@keyframes drop-122 {
100% {
top: 110%;
left: 35%;
}
}
.confetti-123 {
width: 4px;
height: 1.6px;
background-color: #ffbf00;
top: -10%;
left: 30%;
opacity: 1.3505251524;
-webkit-transform: rotate(138.3651960772deg);
transform: rotate(138.3651960772deg);
-webkit-animation: drop-123 4.031239386s 0.695620138s infinite;
animation: drop-123 4.031239386s 0.695620138s infinite;
}
@-webkit-keyframes drop-123 {
100% {
top: 110%;
left: 45%;
}
}
@keyframes drop-123 {
100% {
top: 110%;
left: 45%;
}
}
.confetti-124 {
width: 5px;
height: 2px;
background-color: #ffbf00;
top: -10%;
left: 59%;
opacity: 0.9627733977;
-webkit-transform: rotate(73.1566141905deg);
transform: rotate(73.1566141905deg);
-webkit-animation: drop-124 4.8051622829s 0.5919259448s infinite;
animation: drop-124 4.8051622829s 0.5919259448s infinite;
}
@-webkit-keyframes drop-124 {
100% {
top: 110%;
left: 61%;
}
}
@keyframes drop-124 {
100% {
top: 110%;
left: 61%;
}
}
.confetti-125 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 71%;
opacity: 0.6198059476;
-webkit-transform: rotate(167.8719397462deg);
transform: rotate(167.8719397462deg);
-webkit-animation: drop-125 4.3221567379s 0.6643892194s infinite;
animation: drop-125 4.3221567379s 0.6643892194s infinite;
}
@-webkit-keyframes drop-125 {
100% {
top: 110%;
left: 73%;
}
}
@keyframes drop-125 {
100% {
top: 110%;
left: 73%;
}
}
.confetti-126 {
width: 1px;
height: 0.4px;
background-color: #d13447;
top: -10%;
left: 86%;
opacity: 0.7488851891;
-webkit-transform: rotate(144.4663297597deg);
transform: rotate(144.4663297597deg);
-webkit-animation: drop-126 4.2645615667s 0.0084572349s infinite;
animation: drop-126 4.2645615667s 0.0084572349s infinite;
}
@-webkit-keyframes drop-126 {
100% {
top: 110%;
left: 88%;
}
}
@keyframes drop-126 {
100% {
top: 110%;
left: 88%;
}
}
.confetti-127 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 8%;
opacity: 1.334933193;
-webkit-transform: rotate(203.2896043343deg);
transform: rotate(203.2896043343deg);
-webkit-animation: drop-127 4.4225483374s 0.6838371291s infinite;
animation: drop-127 4.4225483374s 0.6838371291s infinite;
}
@-webkit-keyframes drop-127 {
100% {
top: 110%;
left: 23%;
}
}
@keyframes drop-127 {
100% {
top: 110%;
left: 23%;
}
}
.confetti-128 {
width: 8px;
height: 3.2px;
background-color: #263672;
top: -10%;
left: 9%;
opacity: 0.9589669525;
-webkit-transform: rotate(296.9988853105deg);
transform: rotate(296.9988853105deg);
-webkit-animation: drop-128 4.1651562055s 0.8487005923s infinite;
animation: drop-128 4.1651562055s 0.8487005923s infinite;
}
@-webkit-keyframes drop-128 {
100% {
top: 110%;
left: 15%;
}
}
@keyframes drop-128 {
100% {
top: 110%;
left: 15%;
}
}
.confetti-129 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 57%;
opacity: 1.1183286145;
-webkit-transform: rotate(116.4601038839deg);
transform: rotate(116.4601038839deg);
-webkit-animation: drop-129 4.7459686667s 0.2173224737s infinite;
animation: drop-129 4.7459686667s 0.2173224737s infinite;
}
@-webkit-keyframes drop-129 {
100% {
top: 110%;
left: 70%;
}
}
@keyframes drop-129 {
100% {
top: 110%;
left: 70%;
}
}
.confetti-130 {
width: 2px;
height: 0.8px;
background-color: #ffbf00;
top: -10%;
left: 50%;
opacity: 1.1552827625;
-webkit-transform: rotate(44.7632851826deg);
transform: rotate(44.7632851826deg);
-webkit-animation: drop-130 4.1697569262s 0.6825971506s infinite;
animation: drop-130 4.1697569262s 0.6825971506s infinite;
}
@-webkit-keyframes drop-130 {
100% {
top: 110%;
left: 57%;
}
}
@keyframes drop-130 {
100% {
top: 110%;
left: 57%;
}
}
.confetti-131 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 19%;
opacity: 1.0690521219;
-webkit-transform: rotate(323.3830002491deg);
transform: rotate(323.3830002491deg);
-webkit-animation: drop-131 4.7628147169s 0.8252241406s infinite;
animation: drop-131 4.7628147169s 0.8252241406s infinite;
}
@-webkit-keyframes drop-131 {
100% {
top: 110%;
left: 34%;
}
}
@keyframes drop-131 {
100% {
top: 110%;
left: 34%;
}
}
.confetti-132 {
width: 1px;
height: 0.4px;
background-color: #263672;
top: -10%;
left: 31%;
opacity: 1.0633616886;
-webkit-transform: rotate(308.2808747912deg);
transform: rotate(308.2808747912deg);
-webkit-animation: drop-132 4.9409095397s 0.1580104483s infinite;
animation: drop-132 4.9409095397s 0.1580104483s infinite;
}
@-webkit-keyframes drop-132 {
100% {
top: 110%;
left: 43%;
}
}
@keyframes drop-132 {
100% {
top: 110%;
left: 43%;
}
}
.confetti-133 {
width: 1px;
height: 0.4px;
background-color: #ffbf00;
top: -10%;
left: 21%;
opacity: 0.9329782773;
-webkit-transform: rotate(71.697760032deg);
transform: rotate(71.697760032deg);
-webkit-animation: drop-133 4.3446672697s 0.8856251651s infinite;
animation: drop-133 4.3446672697s 0.8856251651s infinite;
}
@-webkit-keyframes drop-133 {
100% {
top: 110%;
left: 35%;
}
}
@keyframes drop-133 {
100% {
top: 110%;
left: 35%;
}
}
.confetti-134 {
width: 8px;
height: 3.2px;
background-color: #d13447;
top: -10%;
left: 15%;
opacity: 1.3852565674;
-webkit-transform: rotate(148.2116979475deg);
transform: rotate(148.2116979475deg);
-webkit-animation: drop-134 4.7587440375s 0.6971011507s infinite;
animation: drop-134 4.7587440375s 0.6971011507s infinite;
}
@-webkit-keyframes drop-134 {
100% {
top: 110%;
left: 28%;
}
}
@keyframes drop-134 {
100% {
top: 110%;
left: 28%;
}
}
.confetti-135 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 3%;
opacity: 0.6442560537;
-webkit-transform: rotate(71.4511164373deg);
transform: rotate(71.4511164373deg);
-webkit-animation: drop-135 4.3089889647s 0.2474244722s infinite;
animation: drop-135 4.3089889647s 0.2474244722s infinite;
}
@-webkit-keyframes drop-135 {
100% {
top: 110%;
left: 12%;
}
}
@keyframes drop-135 {
100% {
top: 110%;
left: 12%;
}
}
.confetti-136 {
width: 7px;
height: 2.8px;
background-color: #263672;
top: -10%;
left: 13%;
opacity: 0.9421949166;
-webkit-transform: rotate(290.7034778528deg);
transform: rotate(290.7034778528deg);
-webkit-animation: drop-136 4.0480383593s 0.935697052s infinite;
animation: drop-136 4.0480383593s 0.935697052s infinite;
}
@-webkit-keyframes drop-136 {
100% {
top: 110%;
left: 22%;
}
}
@keyframes drop-136 {
100% {
top: 110%;
left: 22%;
}
}
.confetti-137 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 81%;
opacity: 1.353573323;
-webkit-transform: rotate(65.8935236736deg);
transform: rotate(65.8935236736deg);
-webkit-animation: drop-137 4.1834854822s 0.0997771268s infinite;
animation: drop-137 4.1834854822s 0.0997771268s infinite;
}
@-webkit-keyframes drop-137 {
100% {
top: 110%;
left: 95%;
}
}
@keyframes drop-137 {
100% {
top: 110%;
left: 95%;
}
}
.confetti-138 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 73%;
opacity: 0.5344250979;
-webkit-transform: rotate(301.0813263394deg);
transform: rotate(301.0813263394deg);
-webkit-animation: drop-138 4.1712028728s 0.9997230302s infinite;
animation: drop-138 4.1712028728s 0.9997230302s infinite;
}
@-webkit-keyframes drop-138 {
100% {
top: 110%;
left: 84%;
}
}
@keyframes drop-138 {
100% {
top: 110%;
left: 84%;
}
}
.confetti-139 {
width: 5px;
height: 2px;
background-color: #d13447;
top: -10%;
left: 53%;
opacity: 1.4705316416;
-webkit-transform: rotate(220.6580081996deg);
transform: rotate(220.6580081996deg);
-webkit-animation: drop-139 4.110245023s 0.5619626091s infinite;
animation: drop-139 4.110245023s 0.5619626091s infinite;
}
@-webkit-keyframes drop-139 {
100% {
top: 110%;
left: 64%;
}
}
@keyframes drop-139 {
100% {
top: 110%;
left: 64%;
}
}
.confetti-140 {
width: 6px;
height: 2.4px;
background-color: #263672;
top: -10%;
left: 10%;
opacity: 1.4014643357;
-webkit-transform: rotate(267.6311304894deg);
transform: rotate(267.6311304894deg);
-webkit-animation: drop-140 4.7153819267s 0.3093126417s infinite;
animation: drop-140 4.7153819267s 0.3093126417s infinite;
}
@-webkit-keyframes drop-140 {
100% {
top: 110%;
left: 23%;
}
}
@keyframes drop-140 {
100% {
top: 110%;
left: 23%;
}
}
.confetti-141 {
width: 5px;
height: 2px;
background-color: #263672;
top: -10%;
left: 81%;
opacity: 1.053827305;
-webkit-transform: rotate(253.6339705676deg);
transform: rotate(253.6339705676deg);
-webkit-animation: drop-141 4.5935204204s 0.2320308283s infinite;
animation: drop-141 4.5935204204s 0.2320308283s infinite;
}
@-webkit-keyframes drop-141 {
100% {
top: 110%;
left: 89%;
}
}
@keyframes drop-141 {
100% {
top: 110%;
left: 89%;
}
}
.confetti-142 {
width: 1px;
height: 0.4px;
background-color: #ffbf00;
top: -10%;
left: 97%;
opacity: 1.1781292466;
-webkit-transform: rotate(150.2811694489deg);
transform: rotate(150.2811694489deg);
-webkit-animation: drop-142 4.5995149244s 0.4612865477s infinite;
animation: drop-142 4.5995149244s 0.4612865477s infinite;
}
@-webkit-keyframes drop-142 {
100% {
top: 110%;
left: 104%;
}
}
@keyframes drop-142 {
100% {
top: 110%;
left: 104%;
}
}
.confetti-143 {
width: 8px;
height: 3.2px;
background-color: #263672;
top: -10%;
left: 51%;
opacity: 1.2586075869;
-webkit-transform: rotate(347.549234132deg);
transform: rotate(347.549234132deg);
-webkit-animation: drop-143 4.7737301517s 0.3257652384s infinite;
animation: drop-143 4.7737301517s 0.3257652384s infinite;
}
@-webkit-keyframes drop-143 {
100% {
top: 110%;
left: 62%;
}
}
@keyframes drop-143 {
100% {
top: 110%;
left: 62%;
}
}
.confetti-144 {
width: 2px;
height: 0.8px;
background-color: #ffbf00;
top: -10%;
left: 41%;
opacity: 1.3661274624;
-webkit-transform: rotate(130.7611839641deg);
transform: rotate(130.7611839641deg);
-webkit-animation: drop-144 4.2483322699s 0.5001100643s infinite;
animation: drop-144 4.2483322699s 0.5001100643s infinite;
}
@-webkit-keyframes drop-144 {
100% {
top: 110%;
left: 55%;
}
}
@keyframes drop-144 {
100% {
top: 110%;
left: 55%;
}
}
.confetti-145 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 63%;
opacity: 1.4048530344;
-webkit-transform: rotate(172.7336467693deg);
transform: rotate(172.7336467693deg);
-webkit-animation: drop-145 4.7818717572s 0.0083465067s infinite;
animation: drop-145 4.7818717572s 0.0083465067s infinite;
}
@-webkit-keyframes drop-145 {
100% {
top: 110%;
left: 70%;
}
}
@keyframes drop-145 {
100% {
top: 110%;
left: 70%;
}
}
.confetti-146 {
width: 6px;
height: 2.4px;
background-color: #ffbf00;
top: -10%;
left: 65%;
opacity: 0.8046682188;
-webkit-transform: rotate(276.0606294248deg);
transform: rotate(276.0606294248deg);
-webkit-animation: drop-146 4.0775303946s 0.6978658684s infinite;
animation: drop-146 4.0775303946s 0.6978658684s infinite;
}
@-webkit-keyframes drop-146 {
100% {
top: 110%;
left: 69%;
}
}
@keyframes drop-146 {
100% {
top: 110%;
left: 69%;
}
}
.confetti-147 {
width: 3px;
height: 1.2px;
background-color: #263672;
top: -10%;
left: 36%;
opacity: 1.4178314535;
-webkit-transform: rotate(129.6701109364deg);
transform: rotate(129.6701109364deg);
-webkit-animation: drop-147 4.9169584177s 0.9913690752s infinite;
animation: drop-147 4.9169584177s 0.9913690752s infinite;
}
@-webkit-keyframes drop-147 {
100% {
top: 110%;
left: 40%;
}
}
@keyframes drop-147 {
100% {
top: 110%;
left: 40%;
}
}
.confetti-148 {
width: 8px;
height: 3.2px;
background-color: #ffbf00;
top: -10%;
left: 73%;
opacity: 0.9159845243;
-webkit-transform: rotate(98.3758419109deg);
transform: rotate(98.3758419109deg);
-webkit-animation: drop-148 4.6936853895s 0.3841610196s infinite;
animation: drop-148 4.6936853895s 0.3841610196s infinite;
}
@-webkit-keyframes drop-148 {
100% {
top: 110%;
left: 86%;
}
}
@keyframes drop-148 {
100% {
top: 110%;
left: 86%;
}
}
.confetti-149 {
width: 4px;
height: 1.6px;
background-color: #d13447;
top: -10%;
left: 45%;
opacity: 1.4402936311;
-webkit-transform: rotate(287.8432050308deg);
transform: rotate(287.8432050308deg);
-webkit-animation: drop-149 4.1840224236s 0.0020628884s infinite;
animation: drop-149 4.1840224236s 0.0020628884s infinite;
}
@-webkit-keyframes drop-149 {
100% {
top: 110%;
left: 53%;
}
}
@keyframes drop-149 {
100% {
top: 110%;
left: 53%;
}
}
.confetti-150 {
width: 3px;
height: 1.2px;
background-color: #d13447;
top: -10%;
left: 81%;
opacity: 1.3899395477;
-webkit-transform: rotate(156.7108301575deg);
transform: rotate(156.7108301575deg);
-webkit-animation: drop-150 4.6402512115s 0.845526529s infinite;
animation: drop-150 4.6402512115s 0.845526529s infinite;
}
@-webkit-keyframes drop-150 {
100% {
top: 110%;
left: 89%;
}
}
@keyframes drop-150 {
100% {
top: 110%;
left: 89%;
}
}
</style>
Kamie got a reaction from Beyondspace in Trying to Add Confetti Code From Codepen to a Single Page
