body,
html {
  margin: 0;
  padding: 0;
}
html {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dcdcdc;
}
body {
  position: relative;
  width: 800px;
  height: 600px;
  --animation: 3s linear infinite;
}
body *,
body *::before,
body *::after {
  content: '';
  position: absolute;
}
.pigeon {
  top: 475px;
  left: 400px;
}
.pigeon::before {
  top: -10px;
  left: -100px;
  width: 200px;
  height: 20px;
  background: #c4c4c4;
  border-radius: 50%;
}

.pigeon__legs::before {
  top: 1px;
  left: -15px;
  width: 14px;
  height: 82px;
  background: #e4b10b;
  border-radius: 99em;
  transform-origin: top center;
  transform: rotate(-201deg);
}
.pigeon__legs::after {
  top: 1px;
  left: 3px;
  width: 14px;
  height: 82px;
  background: #edbe27;
  border-radius: 99em;
  transform-origin: top center;
  transform: rotate(-201deg);
  z-index: 1;
}
.pigeon__body {
  top: -139px;
  left: -109px;
  width: 175px;
  height: 87px;
  transform: rotate(25deg);
  animation: body var(--animation);
}
.pigeon__body::before {
  top: 0;
  right: 6px;
  width: 57px;
  height: 57px;
  background: #383049;
  border-radius: 0 7px 50px 0;
  transform-origin: top left;
  transform: rotate(-64deg);
  animation: tail var(--animation);
}
.pigeon__body::after {
  width: 100%;
  height: 100%;
  background: #5d7d82;
  border-radius: 0 10px 50% 50% / 0 10px 90% 100%;
}
.pigeon__head {
  top: -177px;
  left: 0px;
  width: 114px;
  height: 193px;
  background:
    radial-gradient(circle, #5d7d82 71%, transparent 0%) 0px 0px / 55px 55px
      no-repeat,
    linear-gradient(45deg, #5d7d82, #5d7d82) 0px 27px / 55px 170px no-repeat,
    linear-gradient(69deg, #5d7d82 53%, transparent 54%) 54px 24px / 59px 173px
      no-repeat;
  border-radius: 0 0 0 8px;
  transform-origin: 0 177px;
  transform: rotate(-3deg);
  animation: head var(--animation);
}
.pigeon__head::before {
  top: 40px;
  left: 0px;
  width: 59px;
  height: 70px;
  background: radial-gradient(
      ellipse at 50% 50%,
      #372a3b 50%,
      transparent 0%
    ) -14px -5px /
    110% 100% no-repeat;
  transform-origin: top center;
  transform: rotate(0deg);
  animation: faceShadow var(--animation);
}
.pigeon__nose {
  top: 56px;
  left: 8px;
  width: 33px;
  height: 25px;
  background: #edbe27;
  border-radius: 25px 8px 10px 23px / 12px 6px 19px 13px;
  transform: rotate(-45deg);
  animation: nose var(--animation);
}
.pigeon__face {
  animation: face var(--animation);
}
.pigeon__face::before {
  top: 33px;
  left: -12px;
  width: 44px;
  height: 44px;
  background:
    linear-gradient(0deg, transparent 50%, #5d7d82 0%),
    linear-gradient(0deg, #5d7d82 50%, transparent 0%),
    radial-gradient(circle, #372a42 25%, transparent 26%) 3px -3px no-repeat,
    white;
  background-repeat: no-repeat;
  border-radius: 50%;
  transform: rotate(-22deg);
  animation: eyeLeft var(--animation);
}
.pigeon__face::after {
  top: 22px;
  left: 14px;
  width: 44px;
  height: 44px;
  background:
    linear-gradient(0deg, transparent 50%, #5d7d82 0%),
    linear-gradient(0deg, #5d7d82 50%, transparent 0%),
    radial-gradient(circle, #372a42 25%, transparent 26%) 3px -3px no-repeat,
    white;
  background-repeat: no-repeat;
  border-radius: 50%;
  transform: rotate(-22deg);
  z-index: 1;
  animation: eyeRight var(--animation);
}
.knife {
  top: 14px;
  left: -9px;
  width: 156px;
  height: 23px;
  border-radius: 4px 50% 4px 4px / 4px 18px 4px 4px;
  background:
    linear-gradient(
      50deg,
      transparent 72%,
      white 73%,
      white 92%,
      transparent 93%
    ),
    linear-gradient(90deg, #383049 38%, #91c0c6 0%);
  transform-origin: 20px 11px;
  transform: rotate(-129deg);
  animation: knife var(--animation);
}
.knife::before {
  top: -20px;
  left: 44px;
  width: 15px;
  height: 63px;
  background: #383049;
  border-radius: 99em;
}

@keyframes tail {
  0%,
  7%,
  100% {
    transform: rotate(-64deg);
  }
  9% {
    transform: rotate(-34deg);
  }
  11% {
    transform: rotate(-84deg);
  }
  13% {
    transform: rotate(-14deg);
  }
  15% {
    transform: rotate(-74deg);
  }
  18% {
    transform: rotate(-34deg);
  }
  21% {
    transform: rotate(-54deg);
  }
  25% {
    transform: rotate(-39deg);
  }
  30%,
  36% {
    transform: rotate(-84deg);
  }
  37% {
    transform: rotate(-54deg);
  }
}
@keyframes head {
  0%,
  11% {
    transform: translate(0px, 0px) rotate(-3deg);
  }
  13% {
    transform: translate(0px, -5px) rotate(2deg);
  }
  15% {
    transform: translate(1px, 19px) rotate(-17deg);
  }
  20% {
    transform: translate(0px, -2px) rotate(0deg);
  }
  23% {
    transform: translate(0px, -4px) rotate(1deg);
  }
  28%,
  100% {
    transform: translate(0px, 0px) rotate(-3deg);
  }
}
@keyframes knife {
  0%,
  10% {
    transform: rotate(-129deg);
  }
  11% {
    transform: rotate(-116deg);
  }
  13% {
    transform: translate(5px, -1px) rotate(-115deg);
  }
  23%,
  72% {
    transform: translate(25px, -1px) rotate(-819deg);
  }
  73% {
    transform: translate(25px, -1px) rotate(-94deg);
  }
  83% {
    transform: translate(0px, 0px) rotate(579deg);
  }
  87%,
  100% {
    transform: translate(0px, 0px) rotate(593deg);
  }
}
@keyframes body {
  0%,
  13% {
    transform: translate(0px, 0px) rotate(25deg);
  }
  15% {
    transform: translate(4px, 0px) rotate(34deg);
  }
  20%,
  23% {
    transform: translate(-3px, 0px) rotate(18deg);
  }
  29%,
  100% {
    transform: translate(0px, 0px) rotate(25deg);
  }
}
@keyframes eyeLeft {
  0%,
  15% {
    background-position:
      0px -5px,
      0px 22px,
      3px -3px;
  }
  18% {
    background-position:
      0px 0px,
      0px 0px,
      3px -3px;
  }
  20% {
    background-position:
      0px -22px,
      0px 22px,
      2px -3px;
  }
  21%,
  36% {
    background-position:
      0px -22px,
      0px 22px,
      5px -3px;
  }
  37%,
  39% {
    background-position:
      0px -22px,
      0px 22px,
      -12px -2px;
  }
  42%,
  54% {
    background-position:
      0px -22px,
      0px 22px,
      6px -4px;
  }
  57%,
  69% {
    background-position:
      0px -22px,
      0px 22px,
      -12px -2px;
  }
  72% {
    background-position:
      0px 0px,
      0px 0px,
      -12px -2px;
  }
  76%,
  100% {
    background-position:
      0px -5px,
      0px 22px,
      3px -3px;
  }

  11% {
    transform: translate(0px, 0px) rotate(-23deg);
  }
  13% {
    transform: translate(0px, 0px) rotate(-27deg);
  }
  18% {
    transform: translate(0px, 0px) rotate(-15deg);
  }
  19%,
  36% {
    transform: translate(26px, -11px) rotate(-15deg);
  }
  37%,
  72% {
    transform: translate(0px, 0px) rotate(-15deg);
  }
  76%,
  100% {
    transform: translate(0px, 0px) rotate(-23deg);
  }
}
@keyframes eyeRight {
  0%,
  15% {
    background-position:
      0px -5px,
      0px 22px,
      3px -3px;
  }
  18% {
    background-position:
      0px 0px,
      0px 0px,
      3px -3px;
  }
  21%,
  36% {
    background-position:
      0px -22px,
      0px 22px,
      5px -3px;
  }
  37%,
  39% {
    background-position:
      0px -22px,
      0px 22px,
      -12px -2px;
  }
  42%,
  54% {
    background-position:
      0px -22px,
      0px 22px,
      6px -4px;
  }
  57%,
  69% {
    background-position:
      0px -22px,
      0px 22px,
      -12px -2px;
  }
  72% {
    background-position:
      0px 0px,
      0px 0px,
      -12px -2px;
  }
  76%,
  100% {
    background-position:
      0px -5px,
      0px 22px,
      3px -3px;
  }

  0%,
  11% {
    transform: translate(0px, 0px) rotate(-23deg);
  }
  13% {
    transform: translate(0px, 0px) rotate(-27deg);
  }
  18% {
    transform: translate(0px, 0px) rotate(-15deg);
  }
  19%,
  36% {
    transform: translate(-26px, 11px) rotate(-15deg);
  }
  37%,
  72% {
    transform: translate(0px, 0px) rotate(-15deg);
  }
  76%,
  100% {
    transform: translate(0px, 0px) rotate(-22deg);
  }
}
@keyframes faceShadow {
  00%,
  18% {
    transform: rotate(0deg);
    background-position: -14px -5px;
  }
  20%,
  36% {
    transform: rotate(-20deg);
    background-position: 18px -5px;
  }
  37%,
  100% {
    transform: rotate(0deg);
    background-position: -14px -5px;
  }
}
@keyframes face {
  0%,
  18% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(18px, -5px);
  }
  21%,
  36% {
    transform: translate(21px, -9px);
  }
  37%,
  72% {
    transform: translate(-7px, 2px);
  }
  76%,
  100% {
    transform: translate(0px, 0px);
  }
}
@keyframes nose {
  0%,
  18% {
    transform: translate(-6px, 2px) rotate(-45deg) rotateY(0deg);
  }
  19%,
  36% {
    transform: translate(15px, -5px) rotate(-5deg) rotateY(180deg);
  }
  37%,
  100% {
    transform: translate(-6px, 2px) rotate(-45deg) rotateY(0deg);
  }
}