body {
  height: 100vw;
  margin: 0vw;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

@-webkit-keyframes panting {
  0% { transform: translate(-50%, -50%);}
  50% { transform: translate(-50%, -35%);}
  100% { transform: translate(-50%, -50%);}
}

@-webkit-keyframes tounge-panting {
  0% { height: 2.5vw; }
  50% {height: 3vw; }
  100% {height: 2.5vw; }
}

@-webkit-keyframes tail-wagging {
  0% { transform: rotate(30deg)}
  50% { transform: rotate(90deg)}
  100% { transform: rotate(30deg)}
}

@-webkit-keyframes blinking {
  0% {transform: translateX(0px);}
  70% {transform: translateX(0px);}
  90% {transform: translateX(60000vw);}
  92% {transform: translateX(0vw);}
  100% {transform: translateX(0vw);}
}

#content {
  width: 80vw;
  height: 80vw;
  background: white;
  position: relative;
  border-radius: 50%;
  margin-right: auto;
  margin-left: auto;
}

#head {
  width: 7.5vw;
  height: 9.5vw;
  background: #af691a;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  z-index:5;
  -webkit-animation: panting 1s linear infinite;
}

.ear {
  width: 0;
  height: 0;
  background: NA;
  position: absolute;
}

.ear-left {
  bottom: 96%;
  left: -2%;
  width: 0px;
  height: 0px;
  border-top: 0px solid transparent;
  border-left: 2vw solid transparent;
  border-bottom: 5vw solid #af691a;
  border-right: 1vw solid transparent;
}

.ear-right {
  bottom: 96%;
  left: 119%;
  width: 0px;
  height: 0px;
  border-top: 0px solid transparent;
  border-left: 1vw solid transparent;
  border-bottom: 5vw solid #af691a;
  border-right: 2vw solid transparent;
}

.eyelid {
  width: 2.5vw;
  height: 2.5vw;
  background: #b37b3b;
  position: absolute;
  border-radius: 50%;
  top: 23%;
  left: 15%;
}

.eyelid-left {
  left: 13%;
}

.eyelid-right {
  left: 130%;
}

.eye {
  width: 2.5vw;
  height: 2.5vw;
  background:white;
  position: absolute;
  border-radius: 50%;
  top: 23%;
  -webkit-animation: blinking 5s linear infinite;
}

.eye-left {
  left: 13%;
}

.eye-right {
  left: 130%;
}

.pupil {
  width: 1vw;
  height: 1vw;
  background: black;
  position: absolute;
  border-radius: 50%;
  right:20%;
  top:15%;
}

#nose {
  width: 2.5vw;
  height: 2.7vw;
  background: black;
  position: absolute;
  top: 130%;
  left: 100%;
  transform:translate(-50%, -50%);
  border-radius: 1.5vw 1.5vw 0vw 0vw;
}

#tounge {
  width: 2.5vw;
  height: 2.7vw;
  background: pink;
  position: absolute;
  top: 190%;
  left: 150%;
  transform:translate(-50%, -50%);
  border-radius: 0vw 0vw 1.5vw 1.5vw;
  -webkit-animation: tounge-panting 1s linear infinite;
}

#patch {
  width: 3.7vw;
  height: 4.7vw;
  background: #e6b89d;
  position: absolute;
  border-radius: 0 0 2vw 0;
}

.brow {
  width: 5vw;
  height: 5vw;
  background: NA;
  position: absolute;
}

.leftbrow {
  top: 0;
  left: 0;
}

.rightbrow {
  top: 0;
  left: 0;
}

#body {
  width: 5vw;
  height: 5vw;
  background: #834F14;
  position: absolute;
  top: 49vw;
  left: 40vw;
  transform:translate(-50%, -50%);
  border-left: 6vw solid white;
  border-right: 6vw solid white;
  border-bottom: 18vw solid #834F14;
  z-index:4;
  border-radius: 4vw 4vw 4.5vw 5vw;
  clip-path: polygon(46% 0, 56% 0, 100% 100%, 0 100%);
}

#tail {
  width: 3vw;
  height: 14vw;
  background: #af691a;
  position: absolute;
  top: 46vw;
  left: 43vw;
  transform: rotate(60deg);
  border-radius: 0vw 10vw 0vw 0vw;
  z-index: 2;
  -webkit-animation: tail-wagging 2s linear infinite;
}

.leg { 
  width: 2vw;
  height: 12vw;
  background: #af691a;
  position: absolute;
  z-index:5;
}

.leg-left {
  top: 48vw;
  left: 36vw;
}

.leg-right {
  top: 48vw;
  left: 42vw;
}

.paw {
  width: 4vw;
  height: 2vw;
  background: black;
  position: absolute;
  border-radius: 10vw 8vw 0vw 0vw;
}

.paw-left {
  top: 12vw;
  left: -1vw;
}

.paw-right {
  top: 12vw;
  left: -1vw;
}