:root{
--cubicB:cubic-bezier(.5,.83,.0,1.22);
--animWarp_0:1vw;
--animWarp_100:10vw;

--animWarpReverse_0:.3vw;
--animWarpReverse_100:3.5vw;

--opacityWarp_0:1.0;
--opacityWarp_100:.1;

--opacityWarpReverse_0:.0;
--opacityWarpReverse_100:1.0;

--scaleWarp-1:.01;
--scaleWarp-2:20.01;
--scaleWarp-3:40.01;
--scaleWarp-4:60.01;
--scaleWarp-5:80.01;
--scaleWarp-6:120.01;
--scaleWarp-7:140.01;
--scaleWarp-8:160.01;
--scaleWarp-9:180.01;
--scaleWarp-10:200.01;
--scaleWarp-11:220.01;
--scaleWarp-12:240.01;
--scaleWarp-13:260.01;
--scaleWarp-14:280.01;
--scaleWarp-15:300.01;

--durationJellyAnim:2500ms;
--durationJellyAnim1:0s;
--durationJellyAnim2:.07515s;/* .153s; */
--durationJellyAnim3:.1512s;/* .306s; */
--durationJellyAnim4:.2254s;/* .458s; */
--durationJellyAnim5:.305s;/* .61s; */
--durationJellyAnim6:.382s;/* .764s; */
--durationJellyAnim7:.4054s;/* .917s; */
--durationJellyAnim8:.5035s;/* 1.07s; */
--durationJellyAnim9:.61s;/* 1.22s; */
--durationJellyAnim10:.6968s;/* 1.375s; */
--durationJellyAnim11:.7515s;/* 1.53s; */
--durationJellyAnim12:.84s;/* 1.68s; */
--durationJellyAnim13:.915s;/* 1.83s; */
--durationJellyAnim14:.9999s;/* 1.99s; */
--durationJellyAnim15:1.07s;/* 2.14s; */

--howManyTimes:1.0; /* 1.1 */
--jelly-Stroke:#00B4FF;/* rgb(255,255,255,1)  #FFFFFF #2f085f */

}

body{
background:black;
padding:0;
margin:0}

#infinity{
position:absolute;
background:none;
width:10vw;
height:10vw;
left:-3vw;
top:19.5vw;
opacity:0;
-webkit-animation:infilip 2300ms var(--cubicB) 1 reverse;
-moz-animation:infilip 2300ms var(--cubicB) 1 reverse;
-ms-animation:infilip 2300ms var(--cubicB) 1 reverse;
-o-animation:infilip 2300ms var(--cubicB) 1 reverse;
animation:infilip 2300ms var(--cubicB) 1 reverse}

#jelly{
position:absolute;
width:3vw;
height:4vw;
top:23.1vw;
bottom:0;
left:.8vw;
margin:0 auto;
opacity:1; /* 0 */
z-index:-2;
-webkit-animation:jellyrotate 2750ms ease-in-out, pattern 2500ms ease-in-out; /* , pattern 3500ms ease-in-out 1 */
-moz-animation:jellyrotate 2750ms ease-in-out, pattern 2500ms ease-in-out;
-ms-animation:jellyrotate 2750ms ease-in-out, pattern 2500ms ease-in-out;
-o-animation:jellyrotate 2750ms ease-in-out, pattern 2500ms ease-in-out;
animation:jellyrotate 2750ms ease-in-out, pattern 2500ms ease-in-out}

svg{
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg)}

circle{
fill:none;
stroke-width:0;
stroke-linecap:round;
opacity:0;
stroke-dasharray:.0,5.2334%}

.scaleWarp:nth-child(1){
r:var(--scaleWarp-1);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim1) cubic-bezier(.4,-.1,.33,1) var(--howManyTimes);
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim1) cubic-bezier(.4,-.1,.33,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim1) cubic-bezier(.4,-.1,.33,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim1) cubic-bezier(.4,-.1,.33,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim1) cubic-bezier(.4,-.1,.33,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(2){
r:var(--scaleWarp-2);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim2) cubic-bezier(.4,-.078,.33,1) var(--howManyTimes); /* .153s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim2) cubic-bezier(.4,-.078,.33,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim2) cubic-bezier(.4,-.078,.33,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim2) cubic-bezier(.4,-.078,.33,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim2) cubic-bezier(.4,-.078,.33,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(3){
r:var(--scaleWarp-3);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim3) cubic-bezier(.4,-.056,.33,1) var(--howManyTimes); /* .306s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim3) cubic-bezier(.4,-.056,.33,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim3) cubic-bezier(.4,-.056,.33,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim3) cubic-bezier(.4,-.056,.33,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim3) cubic-bezier(.4,-.056,.33,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(4){
r:var(--scaleWarp-4);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim4) cubic-bezier(.4,-.033,.33,1) var(--howManyTimes); /* .458s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim4) cubic-bezier(.4,-.033,.33,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim4) cubic-bezier(.4,-.033,.33,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim4) cubic-bezier(.4,-.033,.33,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim4) cubic-bezier(.4,-.033,.33,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(5){
r:var(--scaleWarp-5);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim5) cubic-bezier(.4,-.011,.33,1) var(--howManyTimes); /* .61s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim5) cubic-bezier(.4,-.011,.33,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim5) cubic-bezier(.4,-.011,.33,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim5) cubic-bezier(.4,-.011,.33,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim5) cubic-bezier(.4,-.011,.33,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(6){
r:var(--scaleWarp-6);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim6) cubic-bezier(.4,.011,.333,1) var(--howManyTimes); /* .764s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim6) cubic-bezier(.4,.011,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim6) cubic-bezier(.4,.011,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim6) cubic-bezier(.4,.011,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim6) cubic-bezier(.4,.011,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(7){
r:var(--scaleWarp-7);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim7) cubic-bezier(0.4,.033,.333,1) var(--howManyTimes); /* .917s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim7) cubic-bezier(0.4,.033,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim7) cubic-bezier(0.4,.033,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim7) cubic-bezier(0.4,.033,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim7) cubic-bezier(0.4,.033,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(8){
r:var(--scaleWarp-8);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim8) cubic-bezier(.4,.056,.333,1) var(--howManyTimes); /* 1.07s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim8) cubic-bezier(.4,.056,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim8) cubic-bezier(.4,.056,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim8) cubic-bezier(.4,.056,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim8) cubic-bezier(.4,.056,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(9){
r:var(--scaleWarp-9);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim9) cubic-bezier(.4,.078,.333,1) var(--howManyTimes); /* 1.22s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim9) cubic-bezier(.4,.078,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim9) cubic-bezier(.4,.078,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim9) cubic-bezier(.4,.078,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim9) cubic-bezier(.4,.078,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(10){
r:var(--scaleWarp-10);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim10) cubic-bezier(.4,.1,.333,1) var(--howManyTimes); /* 1.375s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim10) cubic-bezier(.4,.1,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim10) cubic-bezier(.4,.1,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim10) cubic-bezier(.4,.1,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim10) cubic-bezier(.4,.1,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(11){
r:var(--scaleWarp-11);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim11) cubic-bezier(.4,.12,.333,1) var(--howManyTimes); /* 1.53s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim11) cubic-bezier(.4,.12,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim11) cubic-bezier(.4,.12,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim11) cubic-bezier(.4,.12,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim11) cubic-bezier(.4,.12,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(12){
r:var(--scaleWarp-12);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim12) cubic-bezier(.4,.14,.333,1) var(--howManyTimes); /* 1.68s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim12) cubic-bezier(.4,.14,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim12) cubic-bezier(.4,.14,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim12) cubic-bezier(.4,.14,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim12) cubic-bezier(.4,.14 ,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(13){
r:var(--scaleWarp-13);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim13) cubic-bezier(.4,.17,.333,1) var(--howManyTimes); /* 1.83s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim13) cubic-bezier(.4,.17,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim13) cubic-bezier(.4,.17,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim13) cubic-bezier(.4,.17,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim13) cubic-bezier(.4,.17,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(14){
r:var(--scaleWarp-14);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim14) cubic-bezier(.4,.19,.333,1) var(--howManyTimes); /* 1.99s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim14) cubic-bezier(.4,.19,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim14) cubic-bezier(.4,.19,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim14) cubic-bezier(.4,.19,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim14) cubic-bezier(.4,.19,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

.scaleWarp:nth-child(15){
r:var(--scaleWarp-15);
-webkit-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim15) cubic-bezier(.4,.21,.333,1) var(--howManyTimes); /* 2.14s */
-moz-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim15) cubic-bezier(.4,.21,.333,1) var(--howManyTimes);
-ms-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim15) cubic-bezier(.4,.21,.333,1) var(--howManyTimes);
-o-animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim15) cubic-bezier(.4,.21,.333,1) var(--howManyTimes);
animation:animWarp var(--durationJellyAnim) var(--durationJellyAnim15) cubic-bezier(.4,.21,.333,1) var(--howManyTimes);
-webkit-transform-origin:center center;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
transform-origin:center center}

@-webkit-keyframes jellyrotate{
0%{
-webkit-transform:rotate(-65deg);
transform:rotate(-65deg)}
100%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)}}

@-moz-keyframes jellyrotate{
0%{
-moz-transform:rotate(-65deg);
transform:rotate(-65deg)}
100%{
-moz-transform:rotate(0deg);
transform:rotate(0deg)}}

@-ms-keyframes jellyrotate{
0%{
-ms-transform:rotate(-65deg);
transform:rotate(-65deg)}
100%{
-ms-transform:rotate(0deg);
transform:rotate(0deg)}}

@-o-keyframes jellyrotate{
0%{
-o-transform:rotate(-65deg);
transform:rotate(-65deg))}
100%{
-o-transform:rotate(0deg);
transform:rotate(0deg)}}

@keyframes jellyrotate{
0%{
transform:rotate(-65deg)}
100%{
transform:rotate(0deg)}}

@-webkit-keyframes animWarp{
0%{
stroke-width:var(--animWarp_0);
-webkit-transform:scale(1.35) rotateX(0deg) rotateY(0deg);
transform:scale(1.35) rotateX(0deg) rotateY(0deg);
opacity:var(--opacityWarp_0)}
100%{
stroke-width:var(--animWarp_100);
-webkit-transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
opacity:var(--opacityWarp_100);
stroke:var(--jelly-Stroke)}}

@-moz-keyframes animWarp{
0%{
stroke-width:var(--animWarp_0);
-moz-transform:scale(1.35) rotateX(0deg) rotateY(0deg);
transform:scale(1.35) rotateX(0deg) rotateY(0deg);
opacity:var(--opacityWarp_0)}
100%{
stroke-width:var(--animWarp_100);
-moz-transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
opacity:var(--opacityWarp_100);
stroke:var(--jelly-Stroke)}}

@-ms-keyframes animWarp{
0%{
stroke-width:var(--animWarp_0);
-ms-transform:scale(1.35) rotateX(0deg) rotateY(0deg);
transform:scale(1.35) rotateX(0deg) rotateY(0deg);
opacity:var(--opacityWarp_0)}
100%{
stroke-width:var(--animWarp_100);
-ms-transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
opacity:var(--opacityWarp_100);
stroke:var(--jelly-Stroke)}}

@-o-keyframes animWarp{
0%{
stroke-width:var(--animWarp_0);
-o-transform:scale(1.35) rotateX(0deg) rotateY(0deg);
transform:scale(1.35) rotateX(0deg) rotateY(0deg);
opacity:var(--opacityWarp_0)}
100%{
stroke-width:var(--animWarp_100);
-o-transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
opacity:var(--opacityWarp_100);
stroke:var(--jelly-Stroke)}}

@keyframes animWarp{
0%{
stroke-width:var(--animWarp_0);
transform:scale(1.35) rotateX(0deg) rotateY(0deg);
opacity:var(--opacityWarp_0)}
100%{
stroke-width:var(--animWarp_100);
transform:scale(1.07) rotateX(-45deg) rotateY(-110deg);
opacity:var(--opacityWarp_100);
stroke:var(--jelly-Stroke)}}

@-webkit-keyframes pattern{
0%{
-webkit-filter:hue-rotate(0deg);
filter:hue-rotate(0deg)}
100%{
-webkit-filter:hue-rotate(360deg);
filter:hue-rotate(360deg)}}

@-moz-keyframes pattern{
0%{
-moz-filter:hue-rotate(0deg);
filter:hue-rotate(0deg)}
100%{
-moz-filter:hue-rotate(360deg);
filter:hue-rotate(360deg)}}

@-ms-keyframes pattern{
0%{
-ms-filter:hue-rotate(0deg);
filter:hue-rotate(0deg)}
100%{
-ms-filter:hue-rotate(360deg);
filter:hue-rotate(360deg)}}

@-o-keyframes pattern{
0%{
-o-filter:hue-rotate(0deg);
filter:hue-rotate(0deg)}
100%{
-o-filter:hue-rotate(360deg);
filter:hue-rotate(360deg)}}

@keyframes pattern{
0%{
filter:hue-rotate(0deg)}
100%{
filter:hue-rotate(360deg)}}

/*
@keyframes animWarpReverse{
0%{
stroke-width:var(--animWarpReverse_0);
transform:scale(.7875);
opacity:var(--opacityWarpReverse_0)}
100%{
stroke-width:var(--animWarpReverse_100);
transform:scale(.2073777778);
opacity:var(--opacityWarpReverse_100);
stroke:var(--jelly-Stroke)}} */
