body {
  height: 100vh;
  margin: 0;
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;}
h1{
  font-family:verdana;
  margin-right:10px;}
@-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:#d6cc11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 1;
  -webkit-animation: panting 2s linear infinite;
}

#patch {
	width: 3.7vmax;
  height: 5vmax;
  background: #d6cc11;
	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: 1vmax;
  height: 1vmax;
  background: black;
  border-radius: 50%;
  position: absolute;
  right: 20%;
 	top: 15%;
}

#nose {
	width:	2.5vmax;
  height: 2vmax;
  background: black;
  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:#fff303;
  position: absolute;
  top: 12%;
  border-radius: .4vmax;}
    
.ear{
  width: 2vmax;
  height: 4vmax;
  background: #e6dc27;
  position: absolute;
  top: 0;}

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

#body {
  width: 16vmax;
  height: 20vmax;
  background:#e6dc27;
  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:#d6cc11;
  position: absolute;
  bottom:0;}
.leg-left{
  left:27%;}
.leg-right{
  right:27%;}
.paw{
  width:4.5vmax;
  height:2.5vmax;
  background:#fff303;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  border-radius:1.5vmax 1.5vmax 0 0;}
#tail{
  width:5vmax;
  height:1.5vmax;
  background:#fff303;
  position: absolute;
  bottom:0;
  left:calc(50% + 5.5vmax);
  clip-path:polygon(0 0, 100% 30%, 100% 50%, 0 100%);
  -webkit-animation:tailwag 1s linear infinite;}