We_Relese/App/Relese/Content/V2/Effect/zhadan.css

@charset "UTF-8";
.effect-box .effect-canvas span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  line-height: 1;
  white-space: nowrap;
  animation: explosion 2s cubic-bezier(0.74, 0, 0.83, 0.94) infinite reverse both;
}
.effect-box .effect-canvas span:before {
  content: "💣";
}
.effect-box .effect-canvas span:nth-child(1) {
  clip-path: circle(8% at 0% 0%);
  transform: translate(-50%, -50%) translate(-41.7193vmax, -41.7193vmax);
  animation-name: explosion0;
}
@keyframes explosion0 {
  21%, 78% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(2) {
  clip-path: circle(8% at 8% 0%);
  transform: translate(-50%, -50%) translate(-39.69827vmax, -44.79614vmax);
  animation-name: explosion1;
}
@keyframes explosion1 {
  48%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(3) {
  clip-path: circle(8% at 16% 0%);
  transform: translate(-50%, -50%) translate(-36.61801vmax, -48.01027vmax);
  animation-name: explosion2;
}
@keyframes explosion2 {
  26%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(4) {
  clip-path: circle(8% at 24% 0%);
  transform: translate(-50%, -50%) translate(-32.24903vmax, -51.22635vmax);
  animation-name: explosion3;
}
@keyframes explosion3 {
  39%, 79% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(5) {
  clip-path: circle(8% at 32% 0%);
  transform: translate(-50%, -50%) translate(-26.39259vmax, -54.22956vmax);
  animation-name: explosion4;
}
@keyframes explosion4 {
  47%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(6) {
  clip-path: circle(8% at 40% 0%);
  transform: translate(-50%, -50%) translate(-18.95576vmax, -56.72991vmax);
  animation-name: explosion5;
}
@keyframes explosion5 {
  42%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(7) {
  clip-path: circle(8% at 48% 0%);
  transform: translate(-50%, -50%) translate(-10.04092vmax, -58.40702vmax);
  animation-name: explosion6;
}
@keyframes explosion6 {
  45%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(8) {
  clip-path: circle(8% at 56% 0%);
  transform: translate(-50%, -50%) translate(0vmax, -59vmax);
  animation-name: explosion7;
}
@keyframes explosion7 {
  38%, 67% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(9) {
  clip-path: circle(8% at 64% 0%);
  transform: translate(-50%, -50%) translate(10.04092vmax, -58.40702vmax);
  animation-name: explosion8;
}
@keyframes explosion8 {
  37%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(10) {
  clip-path: circle(8% at 72% 0%);
  transform: translate(-50%, -50%) translate(18.95576vmax, -56.72991vmax);
  animation-name: explosion9;
}
@keyframes explosion9 {
  39%, 64% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(11) {
  clip-path: circle(8% at 80% 0%);
  transform: translate(-50%, -50%) translate(26.39259vmax, -54.22956vmax);
  animation-name: explosion10;
}
@keyframes explosion10 {
  49%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(12) {
  clip-path: circle(8% at 88% 0%);
  transform: translate(-50%, -50%) translate(32.24903vmax, -51.22635vmax);
  animation-name: explosion11;
}
@keyframes explosion11 {
  27%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(13) {
  clip-path: circle(8% at 96% 0%);
  transform: translate(-50%, -50%) translate(36.61801vmax, -48.01027vmax);
  animation-name: explosion12;
}
@keyframes explosion12 {
  34%, 66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(14) {
  clip-path: circle(8% at 104% 0%);
  transform: translate(-50%, -50%) translate(39.69827vmax, -44.79614vmax);
  animation-name: explosion13;
}
@keyframes explosion13 {
  23%, 83% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(15) {
  clip-path: circle(8% at 112% 0%);
  transform: translate(-50%, -50%) translate(41.7193vmax, -41.7193vmax);
  animation-name: explosion14;
}
@keyframes explosion14 {
  23%, 71% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(16) {
  clip-path: circle(8% at 0% 8%);
  transform: translate(-50%, -50%) translate(-44.79614vmax, -39.69827vmax);
  animation-name: explosion15;
}
@keyframes explosion15 {
  41%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(17) {
  clip-path: circle(8% at 8% 8%);
  transform: translate(-50%, -50%) translate(-43.13351vmax, -43.13351vmax);
  animation-name: explosion16;
}
@keyframes explosion16 {
  22%, 80% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(18) {
  clip-path: circle(8% at 16% 8%);
  transform: translate(-50%, -50%) translate(-40.33162vmax, -46.8615vmax);
  animation-name: explosion17;
}
@keyframes explosion17 {
  34%, 85% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(19) {
  clip-path: circle(8% at 24% 8%);
  transform: translate(-50%, -50%) translate(-36.05551vmax, -50.75507vmax);
  animation-name: explosion18;
}
@keyframes explosion18 {
  43%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(20) {
  clip-path: circle(8% at 32% 8%);
  transform: translate(-50%, -50%) translate(-29.96331vmax, -54.56006vmax);
  animation-name: explosion19;
}
@keyframes explosion19 {
  50%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(21) {
  clip-path: circle(8% at 40% 8%);
  transform: translate(-50%, -50%) translate(-21.81972vmax, -57.86968vmax);
  animation-name: explosion20;
}
@keyframes explosion20 {
  32%, 79% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(22) {
  clip-path: circle(8% at 48% 8%);
  transform: translate(-50%, -50%) translate(-11.67233vmax, -60.17003vmax);
  animation-name: explosion21;
}
@keyframes explosion21 {
  22%, 88% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(23) {
  clip-path: circle(8% at 56% 8%);
  transform: translate(-50%, -50%) translate(0vmax, -61vmax);
  animation-name: explosion22;
}
@keyframes explosion22 {
  28%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(24) {
  clip-path: circle(8% at 64% 8%);
  transform: translate(-50%, -50%) translate(11.67233vmax, -60.17003vmax);
  animation-name: explosion23;
}
@keyframes explosion23 {
  25%, 71% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(25) {
  clip-path: circle(8% at 72% 8%);
  transform: translate(-50%, -50%) translate(21.81972vmax, -57.86968vmax);
  animation-name: explosion24;
}
@keyframes explosion24 {
  43%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(26) {
  clip-path: circle(8% at 80% 8%);
  transform: translate(-50%, -50%) translate(29.96331vmax, -54.56006vmax);
  animation-name: explosion25;
}
@keyframes explosion25 {
  22%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(27) {
  clip-path: circle(8% at 88% 8%);
  transform: translate(-50%, -50%) translate(36.05551vmax, -50.75507vmax);
  animation-name: explosion26;
}
@keyframes explosion26 {
  48%, 86% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(28) {
  clip-path: circle(8% at 96% 8%);
  transform: translate(-50%, -50%) translate(40.33162vmax, -46.8615vmax);
  animation-name: explosion27;
}
@keyframes explosion27 {
  30%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(29) {
  clip-path: circle(8% at 104% 8%);
  transform: translate(-50%, -50%) translate(43.13351vmax, -43.13351vmax);
  animation-name: explosion28;
}
@keyframes explosion28 {
  35%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(30) {
  clip-path: circle(8% at 112% 8%);
  transform: translate(-50%, -50%) translate(44.79614vmax, -39.69827vmax);
  animation-name: explosion29;
}
@keyframes explosion29 {
  28%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(31) {
  clip-path: circle(8% at 0% 16%);
  transform: translate(-50%, -50%) translate(-48.01027vmax, -36.61801vmax);
  animation-name: explosion30;
}
@keyframes explosion30 {
  45%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(32) {
  clip-path: circle(8% at 8% 16%);
  transform: translate(-50%, -50%) translate(-46.8615vmax, -40.33162vmax);
  animation-name: explosion31;
}
@keyframes explosion31 {
  43%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(33) {
  clip-path: circle(8% at 16% 16%);
  transform: translate(-50%, -50%) translate(-44.54773vmax, -44.54773vmax);
  animation-name: explosion32;
}
@keyframes explosion32 {
  37%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(34) {
  clip-path: circle(8% at 24% 16%);
  transform: translate(-50%, -50%) translate(-40.60518vmax, -49.19473vmax);
  animation-name: explosion33;
}
@keyframes explosion33 {
  40%, 81% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(35) {
  clip-path: circle(8% at 32% 16%);
  transform: translate(-50%, -50%) translate(-34.47122vmax, -54.02205vmax);
  animation-name: explosion34;
}
@keyframes explosion34 {
  40%, 65% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(36) {
  clip-path: circle(8% at 40% 16%);
  transform: translate(-50%, -50%) translate(-25.62596vmax, -58.49403vmax);
  animation-name: explosion35;
}
@keyframes explosion35 {
  45%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(37) {
  clip-path: circle(8% at 48% 16%);
  transform: translate(-50%, -50%) translate(-13.92425vmax, -61.77658vmax);
  animation-name: explosion36;
}
@keyframes explosion36 {
  35%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(38) {
  clip-path: circle(8% at 56% 16%);
  transform: translate(-50%, -50%) translate(0vmax, -63vmax);
  animation-name: explosion37;
}
@keyframes explosion37 {
  34%, 70% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(39) {
  clip-path: circle(8% at 64% 16%);
  transform: translate(-50%, -50%) translate(13.92425vmax, -61.77658vmax);
  animation-name: explosion38;
}
@keyframes explosion38 {
  39%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(40) {
  clip-path: circle(8% at 72% 16%);
  transform: translate(-50%, -50%) translate(25.62596vmax, -58.49403vmax);
  animation-name: explosion39;
}
@keyframes explosion39 {
  42%, 86% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(41) {
  clip-path: circle(8% at 80% 16%);
  transform: translate(-50%, -50%) translate(34.47122vmax, -54.02205vmax);
  animation-name: explosion40;
}
@keyframes explosion40 {
  26%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(42) {
  clip-path: circle(8% at 88% 16%);
  transform: translate(-50%, -50%) translate(40.60518vmax, -49.19473vmax);
  animation-name: explosion41;
}
@keyframes explosion41 {
  45%, 66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(43) {
  clip-path: circle(8% at 96% 16%);
  transform: translate(-50%, -50%) translate(44.54773vmax, -44.54773vmax);
  animation-name: explosion42;
}
@keyframes explosion42 {
  45%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(44) {
  clip-path: circle(8% at 104% 16%);
  transform: translate(-50%, -50%) translate(46.8615vmax, -40.33162vmax);
  animation-name: explosion43;
}
@keyframes explosion43 {
  22%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(45) {
  clip-path: circle(8% at 112% 16%);
  transform: translate(-50%, -50%) translate(48.01027vmax, -36.61801vmax);
  animation-name: explosion44;
}
@keyframes explosion44 {
  27%, 85% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(46) {
  clip-path: circle(8% at 0% 24%);
  transform: translate(-50%, -50%) translate(-51.22635vmax, -32.24903vmax);
  animation-name: explosion45;
}
@keyframes explosion45 {
  34%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(47) {
  clip-path: circle(8% at 8% 24%);
  transform: translate(-50%, -50%) translate(-50.75507vmax, -36.05551vmax);
  animation-name: explosion46;
}
@keyframes explosion46 {
  43%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(48) {
  clip-path: circle(8% at 16% 24%);
  transform: translate(-50%, -50%) translate(-49.19473vmax, -40.60518vmax);
  animation-name: explosion47;
}
@keyframes explosion47 {
  43%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(49) {
  clip-path: circle(8% at 24% 24%);
  transform: translate(-50%, -50%) translate(-45.96194vmax, -45.96194vmax);
  animation-name: explosion48;
}
@keyframes explosion48 {
  20%, 63% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(50) {
  clip-path: circle(8% at 32% 24%);
  transform: translate(-50%, -50%) translate(-40.2vmax, -52vmax);
  animation-name: explosion49;
}
@keyframes explosion49 {
  28%, 78% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(51) {
  clip-path: circle(8% at 40% 24%);
  transform: translate(-50%, -50%) translate(-30.85774vmax, -58.13777vmax);
  animation-name: explosion50;
}
@keyframes explosion50 {
  43%, 79% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(52) {
  clip-path: circle(8% at 48% 24%);
  transform: translate(-50%, -50%) translate(-17.22003vmax, -63.05926vmax);
  animation-name: explosion51;
}
@keyframes explosion51 {
  37%, 55% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(53) {
  clip-path: circle(8% at 56% 24%);
  transform: translate(-50%, -50%) translate(0vmax, -65vmax);
  animation-name: explosion52;
}
@keyframes explosion52 {
  32%, 89% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(54) {
  clip-path: circle(8% at 64% 24%);
  transform: translate(-50%, -50%) translate(17.22003vmax, -63.05926vmax);
  animation-name: explosion53;
}
@keyframes explosion53 {
  47%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(55) {
  clip-path: circle(8% at 72% 24%);
  transform: translate(-50%, -50%) translate(30.85774vmax, -58.13777vmax);
  animation-name: explosion54;
}
@keyframes explosion54 {
  45%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(56) {
  clip-path: circle(8% at 80% 24%);
  transform: translate(-50%, -50%) translate(40.2vmax, -52vmax);
  animation-name: explosion55;
}
@keyframes explosion55 {
  29%, 80% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(57) {
  clip-path: circle(8% at 88% 24%);
  transform: translate(-50%, -50%) translate(45.96194vmax, -45.96194vmax);
  animation-name: explosion56;
}
@keyframes explosion56 {
  49%, 83% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(58) {
  clip-path: circle(8% at 96% 24%);
  transform: translate(-50%, -50%) translate(49.19473vmax, -40.60518vmax);
  animation-name: explosion57;
}
@keyframes explosion57 {
  38%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(59) {
  clip-path: circle(8% at 104% 24%);
  transform: translate(-50%, -50%) translate(50.75507vmax, -36.05551vmax);
  animation-name: explosion58;
}
@keyframes explosion58 {
  38%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(60) {
  clip-path: circle(8% at 112% 24%);
  transform: translate(-50%, -50%) translate(51.22635vmax, -32.24903vmax);
  animation-name: explosion59;
}
@keyframes explosion59 {
  36%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(61) {
  clip-path: circle(8% at 0% 32%);
  transform: translate(-50%, -50%) translate(-54.22956vmax, -26.39259vmax);
  animation-name: explosion60;
}
@keyframes explosion60 {
  20%, 64% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(62) {
  clip-path: circle(8% at 8% 32%);
  transform: translate(-50%, -50%) translate(-54.56006vmax, -29.96331vmax);
  animation-name: explosion61;
}
@keyframes explosion61 {
  30%, 79% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(63) {
  clip-path: circle(8% at 16% 32%);
  transform: translate(-50%, -50%) translate(-54.02205vmax, -34.47122vmax);
  animation-name: explosion62;
}
@keyframes explosion62 {
  35%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(64) {
  clip-path: circle(8% at 24% 32%);
  transform: translate(-50%, -50%) translate(-52vmax, -40.2vmax);
  animation-name: explosion63;
}
@keyframes explosion63 {
  22%, 67% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(65) {
  clip-path: circle(8% at 32% 32%);
  transform: translate(-50%, -50%) translate(-47.37615vmax, -47.37615vmax);
  animation-name: explosion64;
}
@keyframes explosion64 {
  47%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(66) {
  clip-path: circle(8% at 40% 32%);
  transform: translate(-50%, -50%) translate(-38.27431vmax, -55.74737vmax);
  animation-name: explosion65;
}
@keyframes explosion65 {
  29%, 53% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(67) {
  clip-path: circle(8% at 48% 32%);
  transform: translate(-50%, -50%) translate(-22.45217vmax, -63.56178vmax);
  animation-name: explosion66;
}
@keyframes explosion66 {
  21%, 81% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(68) {
  clip-path: circle(8% at 56% 32%);
  transform: translate(-50%, -50%) translate(0vmax, -67vmax);
  animation-name: explosion67;
}
@keyframes explosion67 {
  37%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(69) {
  clip-path: circle(8% at 64% 32%);
  transform: translate(-50%, -50%) translate(22.45217vmax, -63.56178vmax);
  animation-name: explosion68;
}
@keyframes explosion68 {
  30%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(70) {
  clip-path: circle(8% at 72% 32%);
  transform: translate(-50%, -50%) translate(38.27431vmax, -55.74737vmax);
  animation-name: explosion69;
}
@keyframes explosion69 {
  42%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(71) {
  clip-path: circle(8% at 80% 32%);
  transform: translate(-50%, -50%) translate(47.37615vmax, -47.37615vmax);
  animation-name: explosion70;
}
@keyframes explosion70 {
  43%, 79% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(72) {
  clip-path: circle(8% at 88% 32%);
  transform: translate(-50%, -50%) translate(52vmax, -40.2vmax);
  animation-name: explosion71;
}
@keyframes explosion71 {
  46%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(73) {
  clip-path: circle(8% at 96% 32%);
  transform: translate(-50%, -50%) translate(54.02205vmax, -34.47122vmax);
  animation-name: explosion72;
}
@keyframes explosion72 {
  39%, 83% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(74) {
  clip-path: circle(8% at 104% 32%);
  transform: translate(-50%, -50%) translate(54.56006vmax, -29.96331vmax);
  animation-name: explosion73;
}
@keyframes explosion73 {
  39%, 54% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(75) {
  clip-path: circle(8% at 112% 32%);
  transform: translate(-50%, -50%) translate(54.22956vmax, -26.39259vmax);
  animation-name: explosion74;
}
@keyframes explosion74 {
  35%, 89% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(76) {
  clip-path: circle(8% at 0% 40%);
  transform: translate(-50%, -50%) translate(-56.72991vmax, -18.95576vmax);
  animation-name: explosion75;
}
@keyframes explosion75 {
  45%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(77) {
  clip-path: circle(8% at 8% 40%);
  transform: translate(-50%, -50%) translate(-57.86968vmax, -21.81972vmax);
  animation-name: explosion76;
}
@keyframes explosion76 {
  31%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(78) {
  clip-path: circle(8% at 16% 40%);
  transform: translate(-50%, -50%) translate(-58.49403vmax, -25.62596vmax);
  animation-name: explosion77;
}
@keyframes explosion77 {
  37%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(79) {
  clip-path: circle(8% at 24% 40%);
  transform: translate(-50%, -50%) translate(-58.13777vmax, -30.85774vmax);
  animation-name: explosion78;
}
@keyframes explosion78 {
  46%, 86% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(80) {
  clip-path: circle(8% at 32% 40%);
  transform: translate(-50%, -50%) translate(-55.74737vmax, -38.27431vmax);
  animation-name: explosion79;
}
@keyframes explosion79 {
  27%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(81) {
  clip-path: circle(8% at 40% 40%);
  transform: translate(-50%, -50%) translate(-48.79037vmax, -48.79037vmax);
  animation-name: explosion80;
}
@keyframes explosion80 {
  40%, 66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(82) {
  clip-path: circle(8% at 48% 40%);
  transform: translate(-50%, -50%) translate(-31.75217vmax, -61.71548vmax);
  animation-name: explosion81;
}
@keyframes explosion81 {
  28%, 80% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(83) {
  clip-path: circle(8% at 56% 40%);
  transform: translate(-50%, -50%) translate(0vmax, -69vmax);
  animation-name: explosion82;
}
@keyframes explosion82 {
  34%, 67% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(84) {
  clip-path: circle(8% at 64% 40%);
  transform: translate(-50%, -50%) translate(31.75217vmax, -61.71548vmax);
  animation-name: explosion83;
}
@keyframes explosion83 {
  21%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(85) {
  clip-path: circle(8% at 72% 40%);
  transform: translate(-50%, -50%) translate(48.79037vmax, -48.79037vmax);
  animation-name: explosion84;
}
@keyframes explosion84 {
  42%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(86) {
  clip-path: circle(8% at 80% 40%);
  transform: translate(-50%, -50%) translate(55.74737vmax, -38.27431vmax);
  animation-name: explosion85;
}
@keyframes explosion85 {
  25%, 55% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(87) {
  clip-path: circle(8% at 88% 40%);
  transform: translate(-50%, -50%) translate(58.13777vmax, -30.85774vmax);
  animation-name: explosion86;
}
@keyframes explosion86 {
  31%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(88) {
  clip-path: circle(8% at 96% 40%);
  transform: translate(-50%, -50%) translate(58.49403vmax, -25.62596vmax);
  animation-name: explosion87;
}
@keyframes explosion87 {
  40%, 80% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(89) {
  clip-path: circle(8% at 104% 40%);
  transform: translate(-50%, -50%) translate(57.86968vmax, -21.81972vmax);
  animation-name: explosion88;
}
@keyframes explosion88 {
  30%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(90) {
  clip-path: circle(8% at 112% 40%);
  transform: translate(-50%, -50%) translate(56.72991vmax, -18.95576vmax);
  animation-name: explosion89;
}
@keyframes explosion89 {
  20%, 54% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(91) {
  clip-path: circle(8% at 0% 48%);
  transform: translate(-50%, -50%) translate(-58.40702vmax, -10.04092vmax);
  animation-name: explosion90;
}
@keyframes explosion90 {
  33%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(92) {
  clip-path: circle(8% at 8% 48%);
  transform: translate(-50%, -50%) translate(-60.17003vmax, -11.67233vmax);
  animation-name: explosion91;
}
@keyframes explosion91 {
  41%, 89% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(93) {
  clip-path: circle(8% at 16% 48%);
  transform: translate(-50%, -50%) translate(-61.77658vmax, -13.92425vmax);
  animation-name: explosion92;
}
@keyframes explosion92 {
  28%, 72% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(94) {
  clip-path: circle(8% at 24% 48%);
  transform: translate(-50%, -50%) translate(-63.05926vmax, -17.22003vmax);
  animation-name: explosion93;
}
@keyframes explosion93 {
  33%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(95) {
  clip-path: circle(8% at 32% 48%);
  transform: translate(-50%, -50%) translate(-63.56178vmax, -22.45217vmax);
  animation-name: explosion94;
}
@keyframes explosion94 {
  39%, 53% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(96) {
  clip-path: circle(8% at 40% 48%);
  transform: translate(-50%, -50%) translate(-61.71548vmax, -31.75217vmax);
  animation-name: explosion95;
}
@keyframes explosion95 {
  44%, 54% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(97) {
  clip-path: circle(8% at 48% 48%);
  transform: translate(-50%, -50%) translate(-50.20458vmax, -50.20458vmax);
  animation-name: explosion96;
}
@keyframes explosion96 {
  41%, 71% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(98) {
  clip-path: circle(8% at 56% 48%);
  transform: translate(-50%, -50%) translate(0vmax, -71vmax);
  animation-name: explosion97;
}
@keyframes explosion97 {
  44%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(99) {
  clip-path: circle(8% at 64% 48%);
  transform: translate(-50%, -50%) translate(50.20458vmax, -50.20458vmax);
  animation-name: explosion98;
}
@keyframes explosion98 {
  49%, 71% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(100) {
  clip-path: circle(8% at 72% 48%);
  transform: translate(-50%, -50%) translate(61.71548vmax, -31.75217vmax);
  animation-name: explosion99;
}
@keyframes explosion99 {
  42%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(101) {
  clip-path: circle(8% at 80% 48%);
  transform: translate(-50%, -50%) translate(63.56178vmax, -22.45217vmax);
  animation-name: explosion100;
}
@keyframes explosion100 {
  43%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(102) {
  clip-path: circle(8% at 88% 48%);
  transform: translate(-50%, -50%) translate(63.05926vmax, -17.22003vmax);
  animation-name: explosion101;
}
@keyframes explosion101 {
  37%, 72% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(103) {
  clip-path: circle(8% at 96% 48%);
  transform: translate(-50%, -50%) translate(61.77658vmax, -13.92425vmax);
  animation-name: explosion102;
}
@keyframes explosion102 {
  26%, 67% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(104) {
  clip-path: circle(8% at 104% 48%);
  transform: translate(-50%, -50%) translate(60.17003vmax, -11.67233vmax);
  animation-name: explosion103;
}
@keyframes explosion103 {
  35%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(105) {
  clip-path: circle(8% at 112% 48%);
  transform: translate(-50%, -50%) translate(58.40702vmax, -10.04092vmax);
  animation-name: explosion104;
}
@keyframes explosion104 {
  30%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(106) {
  clip-path: circle(8% at 0% 56%);
  transform: translate(-50%, -50%) translate(-59vmax, 0vmax);
  animation-name: explosion105;
}
@keyframes explosion105 {
  41%, 89% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(107) {
  clip-path: circle(8% at 8% 56%);
  transform: translate(-50%, -50%) translate(-61vmax, 0vmax);
  animation-name: explosion106;
}
@keyframes explosion106 {
  31%, 72% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(108) {
  clip-path: circle(8% at 16% 56%);
  transform: translate(-50%, -50%) translate(-63vmax, 0vmax);
  animation-name: explosion107;
}
@keyframes explosion107 {
  37%, 63% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(109) {
  clip-path: circle(8% at 24% 56%);
  transform: translate(-50%, -50%) translate(-65vmax, 0vmax);
  animation-name: explosion108;
}
@keyframes explosion108 {
  49%, 78% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(110) {
  clip-path: circle(8% at 32% 56%);
  transform: translate(-50%, -50%) translate(-67vmax, 0vmax);
  animation-name: explosion109;
}
@keyframes explosion109 {
  27%, 60% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(111) {
  clip-path: circle(8% at 40% 56%);
  transform: translate(-50%, -50%) translate(-69vmax, 0vmax);
  animation-name: explosion110;
}
@keyframes explosion110 {
  44%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(112) {
  clip-path: circle(8% at 48% 56%);
  transform: translate(-50%, -50%) translate(-71vmax, 0vmax);
  animation-name: explosion111;
}
@keyframes explosion111 {
  34%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(113) {
  clip-path: circle(8% at 56% 56%);
  transform: translate(-50%, -50%) translate(0vmax, 73vmax);
  animation-name: explosion112;
}
@keyframes explosion112 {
  44%, 85% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(114) {
  clip-path: circle(8% at 64% 56%);
  transform: translate(-50%, -50%) translate(71vmax, 0vmax);
  animation-name: explosion113;
}
@keyframes explosion113 {
  27%, 69% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(115) {
  clip-path: circle(8% at 72% 56%);
  transform: translate(-50%, -50%) translate(69vmax, 0vmax);
  animation-name: explosion114;
}
@keyframes explosion114 {
  39%, 80% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(116) {
  clip-path: circle(8% at 80% 56%);
  transform: translate(-50%, -50%) translate(67vmax, 0vmax);
  animation-name: explosion115;
}
@keyframes explosion115 {
  45%, 66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(117) {
  clip-path: circle(8% at 88% 56%);
  transform: translate(-50%, -50%) translate(65vmax, 0vmax);
  animation-name: explosion116;
}
@keyframes explosion116 {
  23%, 60% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(118) {
  clip-path: circle(8% at 96% 56%);
  transform: translate(-50%, -50%) translate(63vmax, 0vmax);
  animation-name: explosion117;
}
@keyframes explosion117 {
  24%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(119) {
  clip-path: circle(8% at 104% 56%);
  transform: translate(-50%, -50%) translate(61vmax, 0vmax);
  animation-name: explosion118;
}
@keyframes explosion118 {
  22%, 58% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(120) {
  clip-path: circle(8% at 112% 56%);
  transform: translate(-50%, -50%) translate(59vmax, 0vmax);
  animation-name: explosion119;
}
@keyframes explosion119 {
  22%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(121) {
  clip-path: circle(8% at 0% 64%);
  transform: translate(-50%, -50%) translate(-58.40702vmax, 10.04092vmax);
  animation-name: explosion120;
}
@keyframes explosion120 {
  42%, 71% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(122) {
  clip-path: circle(8% at 8% 64%);
  transform: translate(-50%, -50%) translate(-60.17003vmax, 11.67233vmax);
  animation-name: explosion121;
}
@keyframes explosion121 {
  44%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(123) {
  clip-path: circle(8% at 16% 64%);
  transform: translate(-50%, -50%) translate(-61.77658vmax, 13.92425vmax);
  animation-name: explosion122;
}
@keyframes explosion122 {
  48%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(124) {
  clip-path: circle(8% at 24% 64%);
  transform: translate(-50%, -50%) translate(-63.05926vmax, 17.22003vmax);
  animation-name: explosion123;
}
@keyframes explosion123 {
  48%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(125) {
  clip-path: circle(8% at 32% 64%);
  transform: translate(-50%, -50%) translate(-63.56178vmax, 22.45217vmax);
  animation-name: explosion124;
}
@keyframes explosion124 {
  27%, 78% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(126) {
  clip-path: circle(8% at 40% 64%);
  transform: translate(-50%, -50%) translate(-61.71548vmax, 31.75217vmax);
  animation-name: explosion125;
}
@keyframes explosion125 {
  25%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(127) {
  clip-path: circle(8% at 48% 64%);
  transform: translate(-50%, -50%) translate(-50.20458vmax, 50.20458vmax);
  animation-name: explosion126;
}
@keyframes explosion126 {
  23%, 72% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(128) {
  clip-path: circle(8% at 56% 64%);
  transform: translate(-50%, -50%) translate(0vmax, 71vmax);
  animation-name: explosion127;
}
@keyframes explosion127 {
  32%, 53% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(129) {
  clip-path: circle(8% at 64% 64%);
  transform: translate(-50%, -50%) translate(50.20458vmax, 50.20458vmax);
  animation-name: explosion128;
}
@keyframes explosion128 {
  38%, 66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(130) {
  clip-path: circle(8% at 72% 64%);
  transform: translate(-50%, -50%) translate(61.71548vmax, 31.75217vmax);
  animation-name: explosion129;
}
@keyframes explosion129 {
  48%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(131) {
  clip-path: circle(8% at 80% 64%);
  transform: translate(-50%, -50%) translate(63.56178vmax, 22.45217vmax);
  animation-name: explosion130;
}
@keyframes explosion130 {
  21%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(132) {
  clip-path: circle(8% at 88% 64%);
  transform: translate(-50%, -50%) translate(63.05926vmax, 17.22003vmax);
  animation-name: explosion131;
}
@keyframes explosion131 {
  45%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(133) {
  clip-path: circle(8% at 96% 64%);
  transform: translate(-50%, -50%) translate(61.77658vmax, 13.92425vmax);
  animation-name: explosion132;
}
@keyframes explosion132 {
  28%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(134) {
  clip-path: circle(8% at 104% 64%);
  transform: translate(-50%, -50%) translate(60.17003vmax, 11.67233vmax);
  animation-name: explosion133;
}
@keyframes explosion133 {
  46%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(135) {
  clip-path: circle(8% at 112% 64%);
  transform: translate(-50%, -50%) translate(58.40702vmax, 10.04092vmax);
  animation-name: explosion134;
}
@keyframes explosion134 {
  25%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(136) {
  clip-path: circle(8% at 0% 72%);
  transform: translate(-50%, -50%) translate(-56.72991vmax, 18.95576vmax);
  animation-name: explosion135;
}
@keyframes explosion135 {
  26%, 67% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(137) {
  clip-path: circle(8% at 8% 72%);
  transform: translate(-50%, -50%) translate(-57.86968vmax, 21.81972vmax);
  animation-name: explosion136;
}
@keyframes explosion136 {
  46%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(138) {
  clip-path: circle(8% at 16% 72%);
  transform: translate(-50%, -50%) translate(-58.49403vmax, 25.62596vmax);
  animation-name: explosion137;
}
@keyframes explosion137 {
  37%, 66% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(139) {
  clip-path: circle(8% at 24% 72%);
  transform: translate(-50%, -50%) translate(-58.13777vmax, 30.85774vmax);
  animation-name: explosion138;
}
@keyframes explosion138 {
  30%, 69% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(140) {
  clip-path: circle(8% at 32% 72%);
  transform: translate(-50%, -50%) translate(-55.74737vmax, 38.27431vmax);
  animation-name: explosion139;
}
@keyframes explosion139 {
  42%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(141) {
  clip-path: circle(8% at 40% 72%);
  transform: translate(-50%, -50%) translate(-48.79037vmax, 48.79037vmax);
  animation-name: explosion140;
}
@keyframes explosion140 {
  44%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(142) {
  clip-path: circle(8% at 48% 72%);
  transform: translate(-50%, -50%) translate(-31.75217vmax, 61.71548vmax);
  animation-name: explosion141;
}
@keyframes explosion141 {
  29%, 90% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(143) {
  clip-path: circle(8% at 56% 72%);
  transform: translate(-50%, -50%) translate(0vmax, 69vmax);
  animation-name: explosion142;
}
@keyframes explosion142 {
  49%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(144) {
  clip-path: circle(8% at 64% 72%);
  transform: translate(-50%, -50%) translate(31.75217vmax, 61.71548vmax);
  animation-name: explosion143;
}
@keyframes explosion143 {
  50%, 70% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(145) {
  clip-path: circle(8% at 72% 72%);
  transform: translate(-50%, -50%) translate(48.79037vmax, 48.79037vmax);
  animation-name: explosion144;
}
@keyframes explosion144 {
  23%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(146) {
  clip-path: circle(8% at 80% 72%);
  transform: translate(-50%, -50%) translate(55.74737vmax, 38.27431vmax);
  animation-name: explosion145;
}
@keyframes explosion145 {
  20%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(147) {
  clip-path: circle(8% at 88% 72%);
  transform: translate(-50%, -50%) translate(58.13777vmax, 30.85774vmax);
  animation-name: explosion146;
}
@keyframes explosion146 {
  25%, 64% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(148) {
  clip-path: circle(8% at 96% 72%);
  transform: translate(-50%, -50%) translate(58.49403vmax, 25.62596vmax);
  animation-name: explosion147;
}
@keyframes explosion147 {
  27%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(149) {
  clip-path: circle(8% at 104% 72%);
  transform: translate(-50%, -50%) translate(57.86968vmax, 21.81972vmax);
  animation-name: explosion148;
}
@keyframes explosion148 {
  41%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(150) {
  clip-path: circle(8% at 112% 72%);
  transform: translate(-50%, -50%) translate(56.72991vmax, 18.95576vmax);
  animation-name: explosion149;
}
@keyframes explosion149 {
  33%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(151) {
  clip-path: circle(8% at 0% 80%);
  transform: translate(-50%, -50%) translate(-54.22956vmax, 26.39259vmax);
  animation-name: explosion150;
}
@keyframes explosion150 {
  47%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(152) {
  clip-path: circle(8% at 8% 80%);
  transform: translate(-50%, -50%) translate(-54.56006vmax, 29.96331vmax);
  animation-name: explosion151;
}
@keyframes explosion151 {
  23%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(153) {
  clip-path: circle(8% at 16% 80%);
  transform: translate(-50%, -50%) translate(-54.02205vmax, 34.47122vmax);
  animation-name: explosion152;
}
@keyframes explosion152 {
  27%, 89% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(154) {
  clip-path: circle(8% at 24% 80%);
  transform: translate(-50%, -50%) translate(-52vmax, 40.2vmax);
  animation-name: explosion153;
}
@keyframes explosion153 {
  31%, 63% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(155) {
  clip-path: circle(8% at 32% 80%);
  transform: translate(-50%, -50%) translate(-47.37615vmax, 47.37615vmax);
  animation-name: explosion154;
}
@keyframes explosion154 {
  21%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(156) {
  clip-path: circle(8% at 40% 80%);
  transform: translate(-50%, -50%) translate(-38.27431vmax, 55.74737vmax);
  animation-name: explosion155;
}
@keyframes explosion155 {
  26%, 50% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(157) {
  clip-path: circle(8% at 48% 80%);
  transform: translate(-50%, -50%) translate(-22.45217vmax, 63.56178vmax);
  animation-name: explosion156;
}
@keyframes explosion156 {
  29%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(158) {
  clip-path: circle(8% at 56% 80%);
  transform: translate(-50%, -50%) translate(0vmax, 67vmax);
  animation-name: explosion157;
}
@keyframes explosion157 {
  43%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(159) {
  clip-path: circle(8% at 64% 80%);
  transform: translate(-50%, -50%) translate(22.45217vmax, 63.56178vmax);
  animation-name: explosion158;
}
@keyframes explosion158 {
  46%, 55% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(160) {
  clip-path: circle(8% at 72% 80%);
  transform: translate(-50%, -50%) translate(38.27431vmax, 55.74737vmax);
  animation-name: explosion159;
}
@keyframes explosion159 {
  24%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(161) {
  clip-path: circle(8% at 80% 80%);
  transform: translate(-50%, -50%) translate(47.37615vmax, 47.37615vmax);
  animation-name: explosion160;
}
@keyframes explosion160 {
  46%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(162) {
  clip-path: circle(8% at 88% 80%);
  transform: translate(-50%, -50%) translate(52vmax, 40.2vmax);
  animation-name: explosion161;
}
@keyframes explosion161 {
  38%, 85% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(163) {
  clip-path: circle(8% at 96% 80%);
  transform: translate(-50%, -50%) translate(54.02205vmax, 34.47122vmax);
  animation-name: explosion162;
}
@keyframes explosion162 {
  44%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(164) {
  clip-path: circle(8% at 104% 80%);
  transform: translate(-50%, -50%) translate(54.56006vmax, 29.96331vmax);
  animation-name: explosion163;
}
@keyframes explosion163 {
  40%, 70% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(165) {
  clip-path: circle(8% at 112% 80%);
  transform: translate(-50%, -50%) translate(54.22956vmax, 26.39259vmax);
  animation-name: explosion164;
}
@keyframes explosion164 {
  30%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(166) {
  clip-path: circle(8% at 0% 88%);
  transform: translate(-50%, -50%) translate(-51.22635vmax, 32.24903vmax);
  animation-name: explosion165;
}
@keyframes explosion165 {
  30%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(167) {
  clip-path: circle(8% at 8% 88%);
  transform: translate(-50%, -50%) translate(-50.75507vmax, 36.05551vmax);
  animation-name: explosion166;
}
@keyframes explosion166 {
  39%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(168) {
  clip-path: circle(8% at 16% 88%);
  transform: translate(-50%, -50%) translate(-49.19473vmax, 40.60518vmax);
  animation-name: explosion167;
}
@keyframes explosion167 {
  24%, 63% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(169) {
  clip-path: circle(8% at 24% 88%);
  transform: translate(-50%, -50%) translate(-45.96194vmax, 45.96194vmax);
  animation-name: explosion168;
}
@keyframes explosion168 {
  31%, 67% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(170) {
  clip-path: circle(8% at 32% 88%);
  transform: translate(-50%, -50%) translate(-40.2vmax, 52vmax);
  animation-name: explosion169;
}
@keyframes explosion169 {
  20%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(171) {
  clip-path: circle(8% at 40% 88%);
  transform: translate(-50%, -50%) translate(-30.85774vmax, 58.13777vmax);
  animation-name: explosion170;
}
@keyframes explosion170 {
  31%, 53% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(172) {
  clip-path: circle(8% at 48% 88%);
  transform: translate(-50%, -50%) translate(-17.22003vmax, 63.05926vmax);
  animation-name: explosion171;
}
@keyframes explosion171 {
  21%, 61% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(173) {
  clip-path: circle(8% at 56% 88%);
  transform: translate(-50%, -50%) translate(0vmax, 65vmax);
  animation-name: explosion172;
}
@keyframes explosion172 {
  33%, 60% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(174) {
  clip-path: circle(8% at 64% 88%);
  transform: translate(-50%, -50%) translate(17.22003vmax, 63.05926vmax);
  animation-name: explosion173;
}
@keyframes explosion173 {
  22%, 69% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(175) {
  clip-path: circle(8% at 72% 88%);
  transform: translate(-50%, -50%) translate(30.85774vmax, 58.13777vmax);
  animation-name: explosion174;
}
@keyframes explosion174 {
  35%, 58% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(176) {
  clip-path: circle(8% at 80% 88%);
  transform: translate(-50%, -50%) translate(40.2vmax, 52vmax);
  animation-name: explosion175;
}
@keyframes explosion175 {
  44%, 90% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(177) {
  clip-path: circle(8% at 88% 88%);
  transform: translate(-50%, -50%) translate(45.96194vmax, 45.96194vmax);
  animation-name: explosion176;
}
@keyframes explosion176 {
  33%, 58% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(178) {
  clip-path: circle(8% at 96% 88%);
  transform: translate(-50%, -50%) translate(49.19473vmax, 40.60518vmax);
  animation-name: explosion177;
}
@keyframes explosion177 {
  41%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(179) {
  clip-path: circle(8% at 104% 88%);
  transform: translate(-50%, -50%) translate(50.75507vmax, 36.05551vmax);
  animation-name: explosion178;
}
@keyframes explosion178 {
  45%, 78% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(180) {
  clip-path: circle(8% at 112% 88%);
  transform: translate(-50%, -50%) translate(51.22635vmax, 32.24903vmax);
  animation-name: explosion179;
}
@keyframes explosion179 {
  32%, 58% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(181) {
  clip-path: circle(8% at 0% 96%);
  transform: translate(-50%, -50%) translate(-48.01027vmax, 36.61801vmax);
  animation-name: explosion180;
}
@keyframes explosion180 {
  49%, 74% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(182) {
  clip-path: circle(8% at 8% 96%);
  transform: translate(-50%, -50%) translate(-46.8615vmax, 40.33162vmax);
  animation-name: explosion181;
}
@keyframes explosion181 {
  48%, 75% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(183) {
  clip-path: circle(8% at 16% 96%);
  transform: translate(-50%, -50%) translate(-44.54773vmax, 44.54773vmax);
  animation-name: explosion182;
}
@keyframes explosion182 {
  37%, 70% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(184) {
  clip-path: circle(8% at 24% 96%);
  transform: translate(-50%, -50%) translate(-40.60518vmax, 49.19473vmax);
  animation-name: explosion183;
}
@keyframes explosion183 {
  43%, 54% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(185) {
  clip-path: circle(8% at 32% 96%);
  transform: translate(-50%, -50%) translate(-34.47122vmax, 54.02205vmax);
  animation-name: explosion184;
}
@keyframes explosion184 {
  34%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(186) {
  clip-path: circle(8% at 40% 96%);
  transform: translate(-50%, -50%) translate(-25.62596vmax, 58.49403vmax);
  animation-name: explosion185;
}
@keyframes explosion185 {
  26%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(187) {
  clip-path: circle(8% at 48% 96%);
  transform: translate(-50%, -50%) translate(-13.92425vmax, 61.77658vmax);
  animation-name: explosion186;
}
@keyframes explosion186 {
  38%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(188) {
  clip-path: circle(8% at 56% 96%);
  transform: translate(-50%, -50%) translate(0vmax, 63vmax);
  animation-name: explosion187;
}
@keyframes explosion187 {
  40%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(189) {
  clip-path: circle(8% at 64% 96%);
  transform: translate(-50%, -50%) translate(13.92425vmax, 61.77658vmax);
  animation-name: explosion188;
}
@keyframes explosion188 {
  34%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(190) {
  clip-path: circle(8% at 72% 96%);
  transform: translate(-50%, -50%) translate(25.62596vmax, 58.49403vmax);
  animation-name: explosion189;
}
@keyframes explosion189 {
  36%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(191) {
  clip-path: circle(8% at 80% 96%);
  transform: translate(-50%, -50%) translate(34.47122vmax, 54.02205vmax);
  animation-name: explosion190;
}
@keyframes explosion190 {
  21%, 87% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(192) {
  clip-path: circle(8% at 88% 96%);
  transform: translate(-50%, -50%) translate(40.60518vmax, 49.19473vmax);
  animation-name: explosion191;
}
@keyframes explosion191 {
  33%, 84% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(193) {
  clip-path: circle(8% at 96% 96%);
  transform: translate(-50%, -50%) translate(44.54773vmax, 44.54773vmax);
  animation-name: explosion192;
}
@keyframes explosion192 {
  38%, 81% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(194) {
  clip-path: circle(8% at 104% 96%);
  transform: translate(-50%, -50%) translate(46.8615vmax, 40.33162vmax);
  animation-name: explosion193;
}
@keyframes explosion193 {
  37%, 73% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(195) {
  clip-path: circle(8% at 112% 96%);
  transform: translate(-50%, -50%) translate(48.01027vmax, 36.61801vmax);
  animation-name: explosion194;
}
@keyframes explosion194 {
  24%, 53% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(196) {
  clip-path: circle(8% at 0% 104%);
  transform: translate(-50%, -50%) translate(-44.79614vmax, 39.69827vmax);
  animation-name: explosion195;
}
@keyframes explosion195 {
  45%, 90% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(197) {
  clip-path: circle(8% at 8% 104%);
  transform: translate(-50%, -50%) translate(-43.13351vmax, 43.13351vmax);
  animation-name: explosion196;
}
@keyframes explosion196 {
  47%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(198) {
  clip-path: circle(8% at 16% 104%);
  transform: translate(-50%, -50%) translate(-40.33162vmax, 46.8615vmax);
  animation-name: explosion197;
}
@keyframes explosion197 {
  34%, 54% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(199) {
  clip-path: circle(8% at 24% 104%);
  transform: translate(-50%, -50%) translate(-36.05551vmax, 50.75507vmax);
  animation-name: explosion198;
}
@keyframes explosion198 {
  26%, 56% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(200) {
  clip-path: circle(8% at 32% 104%);
  transform: translate(-50%, -50%) translate(-29.96331vmax, 54.56006vmax);
  animation-name: explosion199;
}
@keyframes explosion199 {
  29%, 79% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(201) {
  clip-path: circle(8% at 40% 104%);
  transform: translate(-50%, -50%) translate(-21.81972vmax, 57.86968vmax);
  animation-name: explosion200;
}
@keyframes explosion200 {
  32%, 53% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(202) {
  clip-path: circle(8% at 48% 104%);
  transform: translate(-50%, -50%) translate(-11.67233vmax, 60.17003vmax);
  animation-name: explosion201;
}
@keyframes explosion201 {
  33%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  98%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(203) {
  clip-path: circle(8% at 56% 104%);
  transform: translate(-50%, -50%) translate(0vmax, 61vmax);
  animation-name: explosion202;
}
@keyframes explosion202 {
  39%, 76% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(204) {
  clip-path: circle(8% at 64% 104%);
  transform: translate(-50%, -50%) translate(11.67233vmax, 60.17003vmax);
  animation-name: explosion203;
}
@keyframes explosion203 {
  33%, 50% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(205) {
  clip-path: circle(8% at 72% 104%);
  transform: translate(-50%, -50%) translate(21.81972vmax, 57.86968vmax);
  animation-name: explosion204;
}
@keyframes explosion204 {
  49%, 50% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(206) {
  clip-path: circle(8% at 80% 104%);
  transform: translate(-50%, -50%) translate(29.96331vmax, 54.56006vmax);
  animation-name: explosion205;
}
@keyframes explosion205 {
  48%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  91%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(207) {
  clip-path: circle(8% at 88% 104%);
  transform: translate(-50%, -50%) translate(36.05551vmax, 50.75507vmax);
  animation-name: explosion206;
}
@keyframes explosion206 {
  34%, 90% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  99%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(208) {
  clip-path: circle(8% at 96% 104%);
  transform: translate(-50%, -50%) translate(40.33162vmax, 46.8615vmax);
  animation-name: explosion207;
}
@keyframes explosion207 {
  46%, 58% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(209) {
  clip-path: circle(8% at 104% 104%);
  transform: translate(-50%, -50%) translate(43.13351vmax, 43.13351vmax);
  animation-name: explosion208;
}
@keyframes explosion208 {
  40%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(210) {
  clip-path: circle(8% at 112% 104%);
  transform: translate(-50%, -50%) translate(44.79614vmax, 39.69827vmax);
  animation-name: explosion209;
}
@keyframes explosion209 {
  27%, 72% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(211) {
  clip-path: circle(8% at 0% 112%);
  transform: translate(-50%, -50%) translate(-41.7193vmax, 41.7193vmax);
  animation-name: explosion210;
}
@keyframes explosion210 {
  32%, 89% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(212) {
  clip-path: circle(8% at 8% 112%);
  transform: translate(-50%, -50%) translate(-39.69827vmax, 44.79614vmax);
  animation-name: explosion211;
}
@keyframes explosion211 {
  42%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(213) {
  clip-path: circle(8% at 16% 112%);
  transform: translate(-50%, -50%) translate(-36.61801vmax, 48.01027vmax);
  animation-name: explosion212;
}
@keyframes explosion212 {
  37%, 59% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(214) {
  clip-path: circle(8% at 24% 112%);
  transform: translate(-50%, -50%) translate(-32.24903vmax, 51.22635vmax);
  animation-name: explosion213;
}
@keyframes explosion213 {
  22%, 90% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(215) {
  clip-path: circle(8% at 32% 112%);
  transform: translate(-50%, -50%) translate(-26.39259vmax, 54.22956vmax);
  animation-name: explosion214;
}
@keyframes explosion214 {
  32%, 55% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(216) {
  clip-path: circle(8% at 40% 112%);
  transform: translate(-50%, -50%) translate(-18.95576vmax, 56.72991vmax);
  animation-name: explosion215;
}
@keyframes explosion215 {
  42%, 82% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(217) {
  clip-path: circle(8% at 48% 112%);
  transform: translate(-50%, -50%) translate(-10.04092vmax, 58.40702vmax);
  animation-name: explosion216;
}
@keyframes explosion216 {
  34%, 69% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  97%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(218) {
  clip-path: circle(8% at 56% 112%);
  transform: translate(-50%, -50%) translate(0vmax, 59vmax);
  animation-name: explosion217;
}
@keyframes explosion217 {
  44%, 68% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  90%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(219) {
  clip-path: circle(8% at 64% 112%);
  transform: translate(-50%, -50%) translate(10.04092vmax, 58.40702vmax);
  animation-name: explosion218;
}
@keyframes explosion218 {
  31%, 65% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(220) {
  clip-path: circle(8% at 72% 112%);
  transform: translate(-50%, -50%) translate(18.95576vmax, 56.72991vmax);
  animation-name: explosion219;
}
@keyframes explosion219 {
  37%, 50% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(221) {
  clip-path: circle(8% at 80% 112%);
  transform: translate(-50%, -50%) translate(26.39259vmax, 54.22956vmax);
  animation-name: explosion220;
}
@keyframes explosion220 {
  30%, 77% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  94%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(222) {
  clip-path: circle(8% at 88% 112%);
  transform: translate(-50%, -50%) translate(32.24903vmax, 51.22635vmax);
  animation-name: explosion221;
}
@keyframes explosion221 {
  26%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  95%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(223) {
  clip-path: circle(8% at 96% 112%);
  transform: translate(-50%, -50%) translate(36.61801vmax, 48.01027vmax);
  animation-name: explosion222;
}
@keyframes explosion222 {
  35%, 85% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  96%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(224) {
  clip-path: circle(8% at 104% 112%);
  transform: translate(-50%, -50%) translate(39.69827vmax, 44.79614vmax);
  animation-name: explosion223;
}
@keyframes explosion223 {
  34%, 51% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}
.effect-box .effect-canvas span:nth-child(225) {
  clip-path: circle(8% at 112% 112%);
  transform: translate(-50%, -50%) translate(41.7193vmax, 41.7193vmax);
  animation-name: explosion224;
}
@keyframes explosion224 {
  28%, 52% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  92%, 100% {
    transform: translate(-50%, -50%);
    opacity: 0;
  }
}