.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; } span:before { content: '💣'; } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } 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; } } }