body {
  height: 100vh;
  margin: 0;
  background: lightsteelblue;
  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 tongue-panting {
  0%{height:2.5vmax;}
  50%{height:50vmax;}
  100%{height:2.5vmax;}
  }
@-webkit-keyframes tailwag{
  0%{ clip-path: polygon(0 0, 100% 30%, 100% 50%, 0 100%);}
  50%{ clip-path: polygon( 0 0, 100% 60%, 100% 80%, 0 100%);}
 100%{  clip-path:polygon(0 0, 100% 30%, 100% 50%, 0 100%);}
}
#content {
  width: 40vmax;
  height: 40vmax;
  background: white;
  position: relative;
  border-radius: 50%;}

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

#patch {
	width: 3.7vmax;
  height: 5vmax;
  background: #e6b89d;
	border-radius: 0 0 2vmax 0; }

.eye {
  width: 2vmax;
  height: 2vmax;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 23%;
}
.eye-left{ left: 13%; }
.eye-right{ right: 13%; }

.pupil {
  width: .7vmax;
  height: .7vmax;
  background: lightgreen;
  border-radius: 50%;
  position: absolute;
  right: 20%;
 	top: 15%;
}

#nose {
	width:	2.5vmax;
  height: 2vmax;
  background: #252525;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1vmax 1vmax 0 0;}

#tongue {
	width: 2.5vmax;
  height: 2.5vmax;
  background: pink;
  position: absolute;
  top:100%;
  left: 55%;
  border-radius: 0 0 1vmax 1vmax;
  -webkit-animation:tongue-panting .1s linear infinite;
}

.brow{
	width: 2.2vmax;
  height: .8vmax;
  background: #efd6ba;
  position: absolute;
  top: 12%;
  border-radius: .4vmax;}
    
.ear{
  width: 2vmax;
  height: 4vmax;
  background: #a35709;
  position: absolute;
  top: 0;}

.ear-left { right: 100%; }
.ear-right { left: 100%; }

#body {
  width: 16vmax;
  height: 20vmax;
  background: #a35709;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  border-radius:0 0 3vmax 3vmax;
}

.leg{
  width:3.3vmax;
  height:13vmax;
  background:#af691a;
  position:absolute;
  bottom:0;
  }
.leg-left{
  left:27%;
}
.leg-right{
  right:27%;
}
.paw {
  width:4.5vmax;
  height:2.5vmax;
  background:#efd6ba;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  border-radius: 1.5vmax 1.5vmax 0 0;
}
#tail { 
  width:5vmax;
  height:1.5vmax;
  background:#af691a;
  position:absolute;
  bottom:0;
  left:calc(50% + 5.5vmax);
  clip-path:polygon(0 0, 100% 30%, 100% 50%, 0 100%);
  -webkit-animation:tailwag .001s linear infinite;
}