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: 3vmax; }
  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: translateX(-50%, -50%);
	z-index: 1;
  -webkit-animation: panting .75s 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: 10%;
 	top: 50%;
  transform: translateY(-50%);
}

#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 .75s 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: 98%; }
.ear-right { left: 98%; }

#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 .5s linear infinite; 
}