* {
  cursor: none;
}

@keyframes float {
  0% {
    margin-top: 0px;
  }
  25% {
    margin-top: -20px;
  }
  50% {
    margin-top: 0;
  }
  75% {
    margin-top: 20px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes jump {
  0% {
    margin-top: 0px;
  }
  25% {
    margin-top: -100px;
  }
  50% {
    margin-top: 0;
  }
  75% {
    margin-top: -100px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes flutterleft {
  0% {
    transform: rotate(0deg) scale(-1, 1);
  }
  12.5% {
    transform: rotate(-45deg) scale(-1, 1);
  }
  25% {
    transform: rotate(0deg) scale(-1, 1);
  }
  37.5% {
    transform: rotate(-45deg) scale(-1, 1);
  }
  50% {
    transform: rotate(0deg) scale(-1, 1);
  }
  65.5% {
    transform: rotate(-45deg) scale(-1, 1);
  }
  75% {
    transform: rotate(0deg) scale(-1, 1);
  }
  87.5% {
    transform: rotate(-45deg) scale(-1, 1);
  }
  100% {
    transform: rotate(0deg) scale(-1, 1);
  }
}
.moveleft .wing.left {
  animation: flutterleft 0.5s linear 0s infinite forwards;
  transform-origin: 100%;
  right: -10;
  left: auto;
}

@keyframes flutterright {
  0% {
    transform: rotate(0deg) scale(-1, 1);
  }
  12.5% {
    transform: rotate(45deg) scale(-1, 1);
  }
  25% {
    transform: rotate(0deg) scale(-1, 1);
  }
  37.5% {
    transform: rotate(45deg) scale(-1, 1);
  }
  50% {
    transform: rotate(0deg) scale(-1, 1);
  }
  65.5% {
    transform: rotate(45deg) scale(-1, 1);
  }
  75% {
    transform: rotate(0deg) scale(-1, 1);
  }
  87.5% {
    transform: rotate(45deg) scale(-1, 1);
  }
  100% {
    transform: rotate(0deg) scale(-1, 1);
  }
}
.moveright .wing.right {
  animation: flutterright 0.5s linear 0s infinite forwards;
  transform-origin: 0%;
  left: 20;
  right: auto;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0);
}

#hey-listen {
  display: block;
  background: #113423;
  border: 3px solid #55b487;
  color: #69bd95;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5em;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.listening {
  animation: jump 0.5s linear 0s 1 forwards !important;
}

#navi {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0;
  animation: float 1.25s linear 0s infinite forwards;
}
#navi #body {
  width: 30px;
  height: 30px;
  background: #FFF;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid #FFF;
}
#navi #body:before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  border-radius: 50%;
  background: radial-gradient(#FFF 0%, rgba(110, 205, 228, 0.8) 80%, #6ecde4 100%);
  box-shadow: 0 0 50px #2eb7d8;
}
#navi #body:after {
  content: " ";
  display: block;
  position: absolute;
  width: 170%;
  height: 170%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(transparent 0%, transparent 40%, rgba(110, 205, 228, 0.15) 80%, rgba(110, 205, 228, 0.8) 100%);
  box-shadow: 0 0 10px rgba(110, 205, 228, 0.25);
}
#navi .wing {
  position: absolute;
}
#navi .wing.top {
  width: 50px;
  height: auto;
  top: -15px;
}
#navi .wing.top.left {
  left: -35px;
}
#navi .wing.top.right {
  right: -70px;
}
#navi .wing.bottom {
  width: 30px;
  height: auto;
  bottom: -55px;
}
#navi .wing.bottom.left {
  left: -15px;
}
#navi .wing.bottom.right {
  right: -55px;
}

.glow {
  background: #FFF;
  background: radial-gradient(#FFF 0%, #FFF 40%, rgba(110, 205, 228, 0.5) 80%, rgba(110, 205, 228, 0.8) 100%);
  box-shadow: 0 0 10px rgba(110, 205, 228, 0.75);
  border-radius: 50%;
  position: absolute;
  z-index: 1;
}