* {
  box-sizing: border-box;
}

html {
  background: #4A569D;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

canvas {
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

svg {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  -webkit-transform: translateZ(0px);
          transform: translateZ(0px);
  fill: #444444;
}

.Eye1, .Eye2 {
  -webkit-animation: blink 5s infinite;
          animation: blink 5s infinite;
  -webkit-transform-origin: 0px;
          transform-origin: 0px;
}

.Wing_Left {
  -webkit-animation: shake-left-wing 500ms infinite;
          animation: shake-left-wing 500ms infinite;
  -webkit-transform-origin: 37% 0%;
          transform-origin: 37% 0%;
}

.Wing_Right {
  -webkit-animation: shake-right-wing 500ms infinite;
          animation: shake-right-wing 500ms infinite;
  -webkit-transform-origin: 57% 0%;
          transform-origin: 57% 0%;
}

.Left_Leg {
  -webkit-animation: shake-left-leg 1.5s infinite;
          animation: shake-left-leg 1.5s infinite;
  -webkit-transform-origin: 66% 0%;
          transform-origin: 66% 0%;
}

.Right_Leg {
  -webkit-animation: shake-right-leg 2s infinite;
          animation: shake-right-leg 2s infinite;
  -webkit-transform-origin: 32% 2%;
          transform-origin: 32% 2%;
}

.st0 {
  display: none;
}

.st11 {
  fill: #FE931D;
  stroke: #E4764F;
  stroke-miterlimit: 10;
}

.st4 {
  fill: #D4B2EE;
}

.st5 {
  fill: #BD95DC;
}

.st6 {
  display: none;
  fill: #BD95DC;
}

.st7 {
  fill: #FFFFFF;
}

.st8 {
  stroke: #000000;
  stroke-miterlimit: 10;
}

.st9 {
  fill: #FFFFFF;
  stroke: #000000;
  stroke-miterlimit: 10;
}

.st10 {
  fill: #482D2C;
}

.pupil {
  -webkit-animation: look-aside 10s infinite alternate;
          animation: look-aside 10s infinite alternate;
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.rear {
  -webkit-animation: right-ear 4s infinite;
          animation: right-ear 4s infinite;
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}

.lear {
  -webkit-animation: left-ear 4s infinite;
          animation: left-ear 4s infinite;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.lflitter {
  -webkit-animation: lflitter 0.5s infinite;
          animation: lflitter 0.5s infinite;
  -webkit-transform-origin: 68% 11%;
          transform-origin: 68% 11%;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.rflitter {
  -webkit-animation: rflitter 0.5s infinite;
          animation: rflitter 0.5s infinite;
  -webkit-transform-origin: 34% 9%;
          transform-origin: 34% 9%;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.rleg {
  -webkit-animation: angry-foot 4s infinite;
          animation: angry-foot 4s infinite;
}

.lleg {
  -webkit-animation: angry-foot 4s infinite;
          animation: angry-foot 4s infinite;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.Eye1, .Eye2, .Wing_Left, .Wing_Right, .Left_Leg, .Right_Leg, .pupil, .rear, .lear, .lflitter, .rflitter, .rleg, .lleg {
  transform-box: fill-box;
}

@-webkit-keyframes blink {
  40% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  45% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes blink {
  40% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  45% {
    -webkit-transform: scaleY(0.1);
            transform: scaleY(0.1);
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@-webkit-keyframes shake-left-wing {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes shake-left-wing {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(130deg);
            transform: rotate(130deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes shake-right-wing {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes shake-right-wing {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-130deg);
            transform: rotate(-130deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes shake-left-leg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes shake-left-leg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes shake-right-leg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes shake-right-leg {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes floaty {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
}
@keyframes floaty {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
}
@-webkit-keyframes right-ear {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes right-ear {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes left-ear {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes left-ear {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  30% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes look-aside {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  40% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes look-aside {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  40% {
    -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes lflitter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes lflitter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes rflitter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes rflitter {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-100deg);
            transform: rotate(-100deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes angry-foot {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  5% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  10% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  15% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  20% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes angry-foot {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  5% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  10% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  15% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  20% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}