body{
    overflow: hidden;
    margin:0;
  }
  canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    z-index: -1;
  }
  button
  {
    position: absolute;
    height: auto;
    z-index: 2;
    cursor: pointer;
    width: 10vw;
    padding:0.5% 0%;
    margin-left:46vw;
    margin-top: 60vh;
    background-image: linear-gradient(to bottom, rgb(140, 0, 255),rgb(255, 0, 128),rgb(247, 0, 255),rgb(255, 0, 128),rgb(251, 255, 0));
    border: none;
    border-radius: 7%;
    color:whitesmoke;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 2vw;
    font-weight: 13px;
    align-items: center;
  }

  @media (max-width: 800px)
  {
    button
  {
    position: absolute;
    height: 15vw;
    cursor: pointer;
    z-index: 2;
    width: 35vw;
    padding:0.5% 0%;
    margin-left:30vw;
    margin-top: 60vh;
    background-image: linear-gradient(to bottom, rgb(140, 0, 255),rgb(255, 0, 128),rgb(247, 0, 255),rgb(255, 0, 128),rgb(251, 255, 0));
    border: none;
    border-radius: 7%;
    color:whitesmoke;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 7vw;
    font-weight: 13px;
    align-items: center;
  }
  }

  @import 'https://fonts.googleapis.com/css?family=Baloo+Chettan|Gloria+Hallelujah';
  html, body, .anim-wrap {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  body {
    font-family: Helvetica Neueu, HelveticaNeueu, Helvetica, Arial, sans-serif;
    overflow: hidden;
  }
  
  .anim-wrap {
    position: absolute;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .anim-text {
    font: 8vw "Baloo Chettan", Helvetica Neueu, HelveticaNeueu, Helvetica, Arial;
    white-space: nowrap;
    
    height: 7vh;
    min-width: 0em;
    min-height: 50%;
    float: inherit;
    border-bottom: 1px solid transparent;
    caret-color: #f20dcc;
    font-weight: 700;
  }
  .anim-text:empty, .anim-text:focus {
    border-bottom-color: #f20dcc;
    outline: none;
  }
  
  .char {
    position: relative;
    margin: 0 0.05em;
  }
  
  .char,
  .letter-inner {
    display: inline-block;
  }
  
  .anim[data-effect=fade] > .letter {
    animation: fadeIn 1.5s backwards;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(2);
    }
  }
  .anim[data-effect=slide] > .letter {
    animation: slide 1s backwards;
    transform-origin: bottom left;
  }
  @keyframes slide {
    0% {
      transform: translateX(90vw) skew(-17deg) scaleX(3);
      animation-timing-function: ease-in;
    }
    80% {
      transform: translateX(0) skew(-17deg) scaleX(3);
      animation-timing-function: ease-out;
    }
    88% {
      transform: translateX(0) skew(12deg) scaleX(0.8);
      animation-timing-function: ease-in-out;
    }
    95% {
      transform: translateX(0) skew(-5deg) scaleX(1);
      animation-timing-function: ease-in-out;
    }
    100% {
      transform: translateX(0) skew(0deg) scaleX(1);
      animation-timing-function: ease-in-out;
    }
  }
  @keyframes slideIn {
    from {
      transform: translateX(70vw);
    }
  }
  .anim[data-effect=roll] > .letter {
    animation: rollIn 1.1s cubic-bezier(0, 0, 0.6, 1) backwards;
  }
  @keyframes rollIn {
    from {
      transform: translateX(90vw) rotate(1200deg);
    }
  }
  .anim[data-effect=peel] > .letter {
    animation: peelIn 2s backwards ease-in-out;
  }
  .anim[data-effect=peel] > .letter > .letter-inner {
    animation: rotateY 1.3s 0.7s backwards ease-in;
  }
  @keyframes peelIn {
    from {
      transform: translate(-100vw, 0);
    }
  }
  @keyframes rotateY {
    from {
      transform: scale(3) rotateY(180deg);
    }
  }
  .anim[data-effect=swivel] > .letter:not(.space)::before {
    background: currentColor;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.2;
  }
  .anim[data-effect=swivel] {
    perspective: 100vmax;
    perspective-origin: top;
  }
  .anim[data-effect=swivel] > .letter {
    padding: 0 0.1em;
    animation: swivel 5s backwards;
    transform-origin: top;
  }
  @keyframes swivel {
    0% {
      transform: rotateX(-90deg);
    }
    10% {
      transform: rotateX(82deg);
    }
    20% {
      transform: rotateX(-74deg);
    }
    30% {
      transform: rotateX(66deg);
    }
    39% {
      transform: rotateX(-58deg);
    }
    48% {
      transform: rotateX(50deg);
    }
    56% {
      transform: rotateX(-42deg);
    }
    63% {
      transform: rotateX(35deg);
    }
    70% {
      transform: rotateX(-28deg);
    }
    77% {
      transform: rotateX(21deg);
    }
    83% {
      transform: rotateX(-15deg);
    }
    89% {
      transform: rotateX(9deg);
    }
    95% {
      transform: rotateX(-4deg);
    }
    100% {
      transform: none;
    }
  }
  .anim[data-effect=hop] > .letter {
    animation: slideIn 2s linear backwards;
  }
  .anim[data-effect=hop] > .letter > .letter-inner {
    animation: hop 0.1s 20 alternate;
  }
  @keyframes hop {
    to {
      transform: translateY(-0.6em);
    }
  }
  .anim[data-effect=wave] {
    animation: slideIn 3s linear backwards;
  }
  .anim[data-effect=wave] > .letter {
    animation: hop 0.15s 20 alternate;
  }
  .anim[data-effect=wave2] {
    animation: slideIn 3s linear backwards;
  }
  .anim[data-effect=wave2] > .letter {
    animation: inflate 0.5s 6 linear alternate;
  }
  @keyframes inflate {
    to {
      transform: scale(2);
    }
  }
  .anim[data-effect=converge] > .letter {
    animation: converge 2.5s forwards;
  }
  .anim[data-effect=converge] > .letter:nth-child(1n) {
    transform: translate(100vw, -71vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(2n) {
    transform: translate(8vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(3n) {
    transform: translate(-100vw, -6vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(4n) {
    transform: translate(100vw, 48vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(5n) {
    transform: translate(-83vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(6n) {
    transform: translate(-100vw, -79vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(7n) {
    transform: translate(-40vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(8n) {
    transform: translate(-1vw, -100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(9n) {
    transform: translate(100vw, 64vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(10n) {
    transform: translate(-99vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(11n) {
    transform: translate(-100vw, 25vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(12n) {
    transform: translate(100vw, 32vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(13n) {
    transform: translate(100vw, 50vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(14n) {
    transform: translate(-100vw, -53vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(15n) {
    transform: translate(-87vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(16n) {
    transform: translate(85vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(17n) {
    transform: translate(34vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(18n) {
    transform: translate(-92vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(19n) {
    transform: translate(100vw, 25vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(20n) {
    transform: translate(-100vw, -69vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(21n) {
    transform: translate(-100vw, 48vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(22n) {
    transform: translate(44vw, -100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(23n) {
    transform: translate(-30vw, -100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(24n) {
    transform: translate(-100vw, 10vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(25n) {
    transform: translate(-45vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(26n) {
    transform: translate(89vw, 100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(27n) {
    transform: translate(-37vw, -100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(28n) {
    transform: translate(-100vw, -15vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(29n) {
    transform: translate(28vw, -100vh);
  }
  .anim[data-effect=converge] > .letter:nth-child(30n) {
    transform: translate(100vw, -5vh);
  }
  @keyframes converge {
    to {
      transform: translate(0, 0);
    }
  }
  .anim[data-effect=spiral] > .letter {
    animation: spiral 3s ease-in both;
  }
  @keyframes spiral {
    from {
      transform: rotate(720deg) translateY(-60vmax);
    }
  }
  .anim[data-effect=snow] > .letter {
    animation: snow 5s cubic-bezier(0.68, 0.21, 0.7, 1) both;
  }
  .anim[data-effect=snow] > .letter > .letter-inner {
    animation: sway 1s cubic-bezier(0.46, 0.03, 0.52, 0.96) 5 alternate;
  }
  @keyframes snow {
    from {
      transform: translateY(-60vh);
    }
  }
  @keyframes sway {
    from {
      transform: translate(2em, 0);
    }
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .char {
    margin: 0 0.15em;
    animation: 0.5s cubic-bezier(0.33, 0.08, 0.7, 0.32) forwards;
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+1) {
    animation-name: meteorite;
    transform: translate(-15.10328062vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+1) > .letter-inner {
    transform: translate(0.0579599989em, -0.0137610795em) rotate(-3.7917305434deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+2) {
    animation-name: meteorite;
    transform: translate(-14.9954798413vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+2) > .letter-inner {
    transform: translate(-0.0972772802em, 0.1457836028em) rotate(5.9819679292deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+3) {
    animation-name: meteorite;
    transform: translate(23.7881949227vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+3) > .letter-inner {
    transform: translate(-0.0875975066em, 0.1310737342em) rotate(-6.1700777594deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+4) {
    animation-name: meteorite;
    transform: translate(5.0656423547vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+4) > .letter-inner {
    transform: translate(0.0421516694em, -0.1030416086em) rotate(-1.9239517229deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+5) {
    animation-name: meteorite;
    transform: translate(-8.8223186255vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+5) > .letter-inner {
    transform: translate(0.0927831961em, 0.0128592865em) rotate(0.5219959708deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+6) {
    animation-name: meteorite;
    transform: translate(-21.1090791996vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+6) > .letter-inner {
    transform: translate(-0.044192353em, -0.0966385503em) rotate(-1.5243529658deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+7) {
    animation-name: meteorite;
    transform: translate(-10.402864913vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+7) > .letter-inner {
    transform: translate(-0.0013184277em, 0.1189040537em) rotate(0.2086522577deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+8) {
    animation-name: meteorite;
    transform: translate(12.5589813215vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+8) > .letter-inner {
    transform: translate(-0.0188056448em, 0.1065864071em) rotate(-3.5016991365deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+9) {
    animation-name: meteorite;
    transform: translate(14.6930084586vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+9) > .letter-inner {
    transform: translate(-0.0378158094em, -0.1006649128em) rotate(3.1649060269deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+10) {
    animation-name: meteorite;
    transform: translate(10.3175646042vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+10) > .letter-inner {
    transform: translate(0.0568082995em, -0.0897906662em) rotate(-5.67276764deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+11) {
    animation-name: meteorite;
    transform: translate(24.8414156986vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+11) > .letter-inner {
    transform: translate(-0.0431874231em, 0.0989623756em) rotate(8.6676512865deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+12) {
    animation-name: meteorite;
    transform: translate(5.6804367085vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+12) > .letter-inner {
    transform: translate(-0.036916763em, 0.102986649em) rotate(-1.2695947114deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+13) {
    animation-name: meteorite;
    transform: translate(9.9314193464vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+13) > .letter-inner {
    transform: translate(0.0398897439em, -0.0803195105em) rotate(1.730354115deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+14) {
    animation-name: meteorite;
    transform: translate(20.9502959048vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+14) > .letter-inner {
    transform: translate(-0.0008252495em, -0.1393480505em) rotate(1.4950678196deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+15) {
    animation-name: meteorite;
    transform: translate(16.4745717916vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+15) > .letter-inner {
    transform: translate(-0.0240830992em, -0.0763899478em) rotate(-9.5452324098deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+16) {
    animation-name: meteorite;
    transform: translate(10.0938648574vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+16) > .letter-inner {
    transform: translate(0.0209929127em, -0.0388308043em) rotate(1.5299495271deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+17) {
    animation-name: meteorite;
    transform: translate(14.7989662183vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+17) > .letter-inner {
    transform: translate(-0.0164134418em, -0.1321545947em) rotate(-0.7271717166deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+18) {
    animation-name: meteorite;
    transform: translate(-11.6491918138vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+18) > .letter-inner {
    transform: translate(0.075917236em, 0.0780400453em) rotate(-3.7467349717deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+19) {
    animation-name: meteorite;
    transform: translate(-16.6438469426vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+19) > .letter-inner {
    transform: translate(-0.0782388481em, -0.1460652938em) rotate(1.8367017714deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+20) {
    animation-name: meteorite;
    transform: translate(9.0386186931vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+20) > .letter-inner {
    transform: translate(0.083403378em, 0.0437676686em) rotate(-9.6912400512deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+21) {
    animation-name: meteorite;
    transform: translate(11.3703214253vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+21) > .letter-inner {
    transform: translate(-0.0888071306em, 0.0847388056em) rotate(-9.2386131023deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+22) {
    animation-name: meteorite;
    transform: translate(13.6893289215vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+22) > .letter-inner {
    transform: translate(-0.0393340713em, 0.1446625133em) rotate(-4.3350482141deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+23) {
    animation-name: meteorite;
    transform: translate(-19.2634639408vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+23) > .letter-inner {
    transform: translate(-0.0937978928em, -0.0104151753em) rotate(-6.72902501deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+24) {
    animation-name: meteorite;
    transform: translate(-20.5701734736vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+24) > .letter-inner {
    transform: translate(0.0510510357em, -0.024334127em) rotate(9.4137104052deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+25) {
    animation-name: meteorite;
    transform: translate(-14.8620799565vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+25) > .letter-inner {
    transform: translate(-0.0202624516em, -0.0529222026em) rotate(-4.764975386deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+26) {
    animation-name: meteorite;
    transform: translate(16.5163583113vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+26) > .letter-inner {
    transform: translate(-0.0820714844em, 0.0724419049em) rotate(3.3064723149deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+27) {
    animation-name: meteorite;
    transform: translate(10.4572946155vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+27) > .letter-inner {
    transform: translate(-0.0907579853em, 0.0800701694em) rotate(6.7477610134deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+28) {
    animation-name: meteorite;
    transform: translate(-3.2746484242vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+28) > .letter-inner {
    transform: translate(-0.0766209996em, -0.126918376em) rotate(-4.1757383383deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+29) {
    animation-name: meteorite;
    transform: translate(-1.7253792303vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+29) > .letter-inner {
    transform: translate(-0.0207752486em, 0.1397872968em) rotate(2.3288132244deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+30) {
    animation-name: meteorite;
    transform: translate(-16.6517343226vw, -60vh);
  }
  .anim[data-effect=meteorite] > .letter:nth-child(30n+30) > .letter-inner {
    transform: translate(0.0277418552em, -0.0548443973em) rotate(-6.6895798507deg);
  }
  @keyframes meteorite {
    to {
      transform: none;
    }
  }
  .anim[data-effect=bounce] > .letter {
    animation: bounce 2s ease-in both;
  }
  @keyframes bounce {
    0% {
      transform: translateY(-60vh);
      animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    37% {
      transform: none;
      animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    55% {
      transform: translateY(-25vh);
      animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    73% {
      transform: none;
      animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    81% {
      transform: translateY(-10vh);
      animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    89% {
      transform: none;
      animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    93% {
      transform: translateY(-4vh);
      animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    97% {
      transform: none;
      animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
    98.5% {
      transform: translateY(-1.1vh);
      animation-timing-function: cubic-bezier(0.5, 0, 0.82, 0.52);
    }
    100% {
      transform: none;
      animation-timing-function: cubic-bezier(0.18, 0.48, 0.5, 1);
    }
  }
  .anim[data-effect=float] > .letter {
    animation: float 18s ease-in-out backwards;
  }
  .anim[data-effect=float] > .letter > .letter-inner {
    animation: float-perpetual ease-in-out 10s 18s infinite alternate;
  }
  @keyframes float {
    0% {
      transform: translateY(60vh);
    }
    33% {
      transform: translateY(-8vh);
    }
    51% {
      transform: translateY(6vh);
    }
    66% {
      transform: translateY(-4vh);
    }
    80% {
      transform: translateY(3vh);
    }
    91% {
      transform: translateY(-1.3vh);
    }
    100% {
      transform: none;
    }
  }
  @keyframes float-perpetual {
    0% {
      transform: translateY(0);
    }
    37% {
      transform: translateY(-1.5vh);
    }
    58% {
      transform: translateY(1.3vh);
    }
    81% {
      transform: translateY(-1vh);
    }
    100% {
      transform: translateY(0.8vh);
    }
  }
  .anim[data-effect=bubble] > .letter {
    position: relative;
    animation: bubble-letter 1.3s cubic-bezier(0, 0, 0.33, 1) both;
  }
  .anim[data-effect=bubble] > .letter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid;
    border-radius: 999px;
    animation: bubble 2.6s cubic-bezier(0, 0.41, 0.28, 1) both;
    animation-delay: inherit;
  }
  .anim[data-effect=bubble] > .letter::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: currentColor;
    border-radius: 999px;
    animation: bubble 2.6s cubic-bezier(0, 0.41, 0.28, 1) both;
    animation-delay: inherit;
    opacity: 0.3;
  }
  @keyframes bubble-letter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes bubble {
    from {
      width: 0;
      height: 0;
    }
    to {
      width: 10em;
      height: 10em;
      opacity: 0;
      visibility: hidden;
    }
  }
  
 .btn, .control {
    padding: 0.5em 1em;
    font-size: 1.2em;
  }
  
  .btn {
    background: #f20dcc;
    border: 1px solid transparent;
    color: white;
    cursor: pointer;
    transition: 0.25s;
  }
  
  .btn:hover, .btn:focus {
    background: #f655db;
  }
  
  select {
    border: none;
    outline-color: #f20dcc;
  }
  
  #controls {
    position: absolute;
    right: 1px;
    top: 1px;
    border-bottom-left-radius: 5px;
    box-shadow: -1px 2px 13px rgba(51, 0, 43, 0.4);
  }
  
  #controls button {
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    border-bottom-left-radius: 5px;
  }
  
  .hide {
    display: none !important;
  }
  
  .alert {
    position: absolute;
    bottom: -1.6em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4em 1em 2em;
    background: #f20dcc;
    color: #fff0fc;
    animation: 2s 40s peep-in both ease-in-out;
    border-radius: 5px;
    box-shadow: 0 -1px 6px 1px rgba(242, 13, 204, 0.3);
  }
  .alert.close {
    animation: peep-out 0.8s linear both;
  }
  
  @keyframes peep-in {
    0% {
      transform: translate(-50%, 100%);
      animation-timing-function: linear;
    }
    76% {
      transform: translate(-50%, -18%);
    }
    90% {
      transform: translate(-50%, -20%);
    }
    98% {
      transform: translate(-50%, 8%);
    }
    100% {
      transform: translate(-50%, 0);
    }
  }
  @keyframes peep-out {
    to {
      transform: translate(-50%, 100%);
      visibility: hidden;
    }
  }
  .dismiss {
    border: none;
    background: #ff70e7;
    color: white;
    padding: 0.2em 0.5em;
    cursor: pointer;
    margin-left: 0.2em;
  }
  
  .tip {
    position: absolute;
    color: #f20dcc;
    animation: show-tip 0.5s 15s ease-in both;
    font-size: 1.3rem;
    font-family: "Gloria Hallelujah", cursive;
  }
  @keyframes show-tip {
    from {
      visibility: hidden;
      opacity: 0;
    }
  }
  .tip .text {
    text-shadow: -1px 2px 4px rgba(51, 0, 43, 0.2);
  }
  .tip strong {
    font-weight: normal;
  }
  .tip svg {
    width: 110px;
    height: auto;
    -webkit-filter: drop-shadow(-1px 3px 5px rgba(51, 0, 43, 0.3));
    filter: drop-shadow(-1px 3px 5px rgba(51, 0, 43, 0.3));
    animation: show-tip 0.5s 15.1s ease-in both;
  }
  .tip svg path {
    fill: #f20dcc;
  }
  @keyframes show-tip-arrow {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: scale(0);
    }
    85% {
      visibility: visible;
      opacity: 1;
      transform: scale(1.2);
    }
    100% {
      visibility: visible;
      opacity: 1;
      transform: none;
    }
  }
  
  .tip-effect {
    left: -120px;
    top: 0.5em;
    animation-delay: 20s;
  }
  .tip-effect .text {
    width: 110px;
    display: flex;
    justify-content: center;
    white-space: nowrap;
    margin-left: -40px;
  }
  .tip-effect svg {
    animation-delay: 20.1s;
  }
  
  .tip-type {
    display: flex;
    left: 50%;
    top: calc(50% - 6rem);
    transform: translateX(-50%);
    animation-delay: 12s;
  }
  .tip-type svg {
    animation-delay: 12.1s;
    width: 40px;
    height: 40px;
    margin-top: 0.8em;
    margin-left: 20px;
    transform: rotate(-9deg);
    -webkit-filter: drop-shadow(0px 1px 3px rgba(51, 0, 43, 0.3));
    filter: drop-shadow(0px 1px 3px rgba(51, 0, 43, 0.3));
  }