body {
  justify-content: center;
  align-items: center;
  background-color: antiquewhite;
}
.parentsbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 45px;
  position: relative;
}
.pighead {
  position: absolute;
  top: 180px;
  left: 140px;
  width: 220px;
  height: 215px;
  background-color: #f99b28;
  border-radius: 70%;
  transform: rotateZ(10deg);
  border: 6px solid #102770;
  box-shadow: inset 0 5px 0 #fcd7a9, inset 0 1px 0 #b7bed4;
  background-image: linear-gradient(to bottom, #f99b28 50%, #ffffff 35%);
}
.pigear {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 125px;
  width: 50px;
  height: 150px;
  border-radius: 50%;
  border: 6px solid #102770;
  box-shadow: inset -3px 2px 0 #fcd7a9;
  background-color: #f99b28;
  z-index: -80;
}
.pigear::before {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  border: 6pxsolid #102770;
  box-shadow: -0.3vw -0.1vw 0 #b3773d, inset 0.4vw 0.2vw 0 darken(#f02f84, 10);
  background-color: #f02f84;
}
.ear1 {
  left: 160px;
  transform: rotateZ(-10deg);
  animation: ear-1 4000ms linear infinite alternate;
}
@keyframes ear-1 {
  0%,
  30% {
    transform: rotateZ(-10deg);
  }
  37%,
  70% {
    transform: rotateZ(-3deg);
  }
  77%,
  100% {
    transform: rotateZ(-20deg);
  }
}
.ear2 {
  left: 300px;
  transform: rotateZ(25deg);
  animation: ear-2 110ms linear infinite alternate;
}
@keyframes ear-2 {
  to {
    transform: rotateZ(23deg);
  }
}
.pigeye {
  top: 225px;
  position: absolute;
  width: 25px;
  height: 50px;
  border-radius: 50%;
  background-color: #102770;
  transform: rotateZ(20deg);
}
.pigeye::before {
  content: "";
  position: absolute;
  top: 25%;
  right: 3px;
  transform: translateX(-50%);
  width: 1vw;
  height: 3vw;
  border-radius: 50%;
  background-color: white;
}
@keyframes eye {
  0%,
  30%,
  72%,
  100% {
    transform: translateX(-50%);
  }
  32%,
  70% {
    transform: translateX(-35%);
  }
}
.eye1 {
  left: 223px;
  transform: translateX(-50%);
  animation: eye 4000ms linear infinite alternate;
}
.eye2 {
  left: 300px;
  top: 230px;
  animation: eye 4000ms linear infinite alternate;
}
.pignose {
  position: absolute;
  z-index: 9999;
  top: 285px;
  left: 237px;
  width: 45px;
  height: 35px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #102770;
  transform: rotateZ(10deg);
}
.pignose::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 12px;
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
}
.pigsmile {
  position: absolute;
  top: 308px;
  left: 240.5px;
  width: 20px;
  height: 48px;
  transform: rotateZ(10deg);
  z-index: 60;
  border: 0.5vw solid #102770;
  background-color: #f02f84;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  animation: tongue 175ms linear infinite alternate;
}
@keyframes tongue {
  to {
    top: 310px;
  }
}
.pigsmile::before {
  content: "";
  position: absolute;
  left: 8px;
  width: 5px;
  height: 35px;
  border-radius: 50%;
  background-color: #102770;
  z-index: -10;
}