body {
  height: 100vh;
  margin: 0;
  background: lightsteelblue;
  display: flex;
  justify-content: center;
  align-items: center;}

#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;
}

#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;}

.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;
}