svg.like {
    position: fixed;
    z-index: 10;
    top: calc(50vh - 1rem);
    left: calc(50vw - 1rem);
    border-radius: 100%;
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    background: #212121;
    cursor: pointer;
  }
  
  
  svg.fly {
    position: fixed;
    top: calc(50vh - 1rem);
    left: calc(50vw - 1rem);
    fill: #18FFFF;
  }
  
  svg.h {
    position: fixed;
    z-index: 8;
    top: calc(50vh - 1rem);
    left: calc(50vw - 1rem);
    fill: #fbff00;
  }
  svg.h.h-5, svg.h.h-6, svg.h.h-7, svg.h.h-8 {
    fill: #00ffb8;
  }
  
  div.dot {
    width: 12px;
    height: 12px;
    background: white;
    position: fixed;
    z-index: 9;
    border-radius: 100%;
    top: calc(50vh - 3rem);
    left: calc(50vw - .5rem);
  }
  div.dot:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 100%;
    top: -20px;
    left: 2px;
    position: absolute;
    background: white;
  }
  div.dot:after {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 100%;
    top: -160px;
    left: 2px;
    position: absolute;
    background: white;
    display: none;
  }
  
  /* div {
    background-image: linear-gradient(-10deg, #7028e4 0%, #e5b2ca 100%);
    width: 100vw;
    height: 100vh;
  } */
  div.liked svg.like {
    -webkit-animation: blink 1s forwards;
            animation: blink 1s forwards;
  }
  div.liked svg.fly.fly-1 {
    -webkit-animation: fly-1 1s 0.1s;
            animation: fly-1 1s 0.1s;
  }
  div.liked svg.fly.fly-2 {
    -webkit-animation: fly-2 1s 0.1s;
            animation: fly-2 1s 0.1s;
  }
  div.liked svg.h {
    transition: margin cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s, fill 0.2s 1s, opacity 0.2s 1.2s, -webkit-transform 0.2s 1s;
    transition: margin cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s, transform 0.2s 1s, fill 0.2s 1s, opacity 0.2s 1.2s;
    transition: margin cubic-bezier(0.165, 0.84, 0.44, 1) 1.4s, transform 0.2s 1s, fill 0.2s 1s, opacity 0.2s 1.2s, -webkit-transform 0.2s 1s;
    opacity: 0;
  }
  div.liked svg.h.h-5, div.liked svg.h.h-6, div.liked svg.h.h-7, div.liked svg.h.h-8 {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    fill: white;
  }
  div.liked svg.h.h-1 {
    margin-top: -200px;
  }
  div.liked svg.h.h-2 {
    margin-left: 200px;
  }
  div.liked svg.h.h-3 {
    margin-top: 200px;
  }
  div.liked svg.h.h-4 {
    margin-left: -200px;
  }
  div.liked svg.h.h-5 {
    margin-top: -140px;
    margin-left: 140px;
  }
  div.liked svg.h.h-6 {
    margin-top: 140px;
    margin-left: 140px;
  }
  div.liked svg.h.h-7 {
    margin-top: -140px;
    margin-left: -140px;
  }
  div.liked svg.h.h-8 {
    margin-top: 140px;
    margin-left: -140px;
  }
  div.liked div.dot {
    opacity: 0;
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
    background: #00e5ff;
    transition: opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
    transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s;
    transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
  }
  div.liked div.dot:after {
    display: block;
  }
  div.liked div.dot.dot-2 {
    -webkit-transform: rotate(45deg) translateY(-100px);
            transform: rotate(45deg) translateY(-100px);
  }
  div.liked div.dot.dot-3 {
    -webkit-transform: rotate(90deg) translateY(-100px);
            transform: rotate(90deg) translateY(-100px);
  }
  div.liked div.dot.dot-4 {
    -webkit-transform: rotate(135deg) translateY(-100px);
            transform: rotate(135deg) translateY(-100px);
  }
  div.liked div.dot.dot-5 {
    -webkit-transform: rotate(180deg) translateY(-100px);
            transform: rotate(180deg) translateY(-100px);
  }
  div.liked div.dot.dot-6 {
    -webkit-transform: rotate(225deg) translateY(-100px);
            transform: rotate(225deg) translateY(-100px);
  }
  div.liked div.dot.dot-7 {
    -webkit-transform: rotate(270deg) translateY(-100px);
            transform: rotate(270deg) translateY(-100px);
  }
  div.liked div.dot.dot-8 {
    -webkit-transform: rotate(305deg) translateY(-100px);
            transform: rotate(305deg) translateY(-100px);
  }
  
  @-webkit-keyframes blink {
    10% {
      -webkit-transform: scale(0.42);
              transform: scale(0.42);
      background: #8815b7;
    }
    100% {
      background: #e01f4f;
    }
  }
  
  @keyframes blink {
    10% {
      -webkit-transform: scale(0.42);
              transform: scale(0.42);
      background: #8815b7;
    }
    100% {
      background: #e01f4f;
    }
  }
  @-webkit-keyframes fly-1 {
    25% {
      margin: -100px 0 0 100px;
    }
    75% {
      margin: 100px 0 0 -100px;
      z-index: 5;
    }
    100% {
      z-index: 11;
    }
  }
  @keyframes fly-1 {
    25% {
      margin: -100px 0 0 100px;
    }
    75% {
      margin: 100px 0 0 -100px;
      z-index: 5;
    }
    100% {
      z-index: 11;
    }
  }
  @-webkit-keyframes fly-2 {
    25% {
      margin: -100px 0 0 -100px;
    }
    75% {
      margin: 100px 0 0 100px;
      z-index: 5;
    }
    100% {
      z-index: 11;
    }
  }
  @keyframes fly-2 {
    25% {
      margin: -100px 0 0 -100px;
    }
    75% {
      margin: 100px 0 0 100px;
      z-index: 5;
    }
    100% {
      z-index: 11;
    }
  }