body{
  background-color: #888;
}

.box {
  position: relative;
  height: 500px;
  width: 700px;
  display: block;
  margin: auto;
  background: #444;
  margin-top: 8%;
}

.head {
  position: absolute;
  background: black;
  height: 60%;
  width: 44%;
  top: 28%;
  left: 25%;
  border-radius: 50%;
  box-shadow: 1px -1px 22px #333;
}

.jowl-left{
  position: absolute;
  height: 40%;
  background: #ececec;
  width: 30%;
  top: 63%;
  left: 18%;
  border-radius: 50%;
  box-shadow: 2px 8px 10px black;
  
}

.jowl-right{
  position: absolute;
  height: 40%;
  background: #ececec;
  width: 30%;
  top: 63%;
  left:51%;
  border-radius: 50%;
  box-shadow: -2px 8px 10px black;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}

.whisker{
  background: black;
  height:6px;
  width: 6px;
  position: absolute;
  border-radius: 50%;
}

.one{
  left: 68%;
  top: 16%;
}

.two{
  left: 63%;
  top: 38%;
}

.three{
  left: 45%;
  top: 22%;
}

.four {
  left: 48%;
  top: 55%;
}

.five {
  left: 75%;
  top: 55%;
}
.six{
  left: 58%;
  top: 46%;
}

.seven{
  left: 23%;
  top: 38%;
}

.eight{
  left: 24%;
  top: 18%;
}

.nine{
  left: 48%;
  top: 25%;
}

.ten {
  left: 16%;
  top: 53%;
}



.lips {
  position: absolute;
  height: 18%;
  background: #ffccff;
  width: 30%;
  top: 86%;
  left: 36%;
  border-radius: 50%;
  box-shadow: 0 5px 5px black;
}

.tongue{
  height: 95%;
  background: #848484;
  width: 3px;
  position: absolute;
  left: 45%;
  border-radius:50%;
  
  
}

.nose-bridge{
  position: absolute;
  height: 50%;
  width:16%;
  border-radius: 50%;
  background: #ececec;
  top: 30%;
  left: 43%;
 
  
}

.nose-top{
  position: absolute;
  height: 65%;
  width: 24%;
  background: #ececec;
  border-radius: 50%;
  
  left: 38.5%;
  top: 5%;
}

.nose-line{
  background: #a9a9a9;
  height: 70%;
  width: 1px;
  position: absolute;
  left: 48%;
  top: 10%;
  border-radius: 50%;
}

.nose-tip{
  position: absolute;
  background: black;
  top: 68%;
  left: 39%;
  height: 18%;
  width:22%;
 
  border-bottom-left-radius: 135px;
   border-radius: 50%;
  box-shadow: -3px 5px 10px #888;
}

.nose-hole-right {
  background:#848484;
  height: 8px;
  width: 12px;
  border-radius: 50%;
  position: absolute;
  top: 80%;
  left: 52%;
  box-shadow: 2px 2px 10px white;
  
}
.nose-hole-left {
  background:#848484;
  height: 8px;
  width: 12px;
  border-radius: 50%;
  position: absolute;
  top: 80%;
  left: 30%;
  box-shadow: 2px 2px 10px white;
  
}

.eye {
  position: absolute;
  height: 20%;
  width: 20%;
  background: #a9a9a9;
  border-radius: 50%;
  top: 42%;
}

.left {
  left: 14%;
}

.right{
  left: 66%;
}

.pupil-left{
  background: #4d4d4d;
  position: absolute;
  top: 43%;
  left: 15%;
  height: 18%;
  width: 18%;
  border-radius: 50%;
}

.pupil-right{
  background: #4d4d4d;
  position: absolute;
  top: 43%;
  left: 67%;
  height: 18%;
  width: 18%;
  border-radius: 50%;
}

.cornea-right{
  background: black;
  position: absolute;
  height: 15%;
  width:15%;
  top: 45%;
  left: 68.5%;
  border-radius: 50%;
}

.cornea-left{
  background: black;
  position: absolute;
  height: 15%;
  width:15%;
  top: 45%;
  left: 17%;
  border-radius: 50%;
}


.pupil-light-right {
  background: white;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  box-shadow: -2px -2px 2px #a9a9a9;
  position: absolute;
  left: 74%;
  top: 48%;
}

.pupil-light-left {
  background: white;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  box-shadow: -2px -2px 2px #a9a9a9;
  position: absolute;
  left: 26%;
  top: 48%;
}

.ear-right{
  background: black;
  height: 45%;
  width: 36%;
    clip-path: polygon(25% 55%, 100% 5%, 73% 100%, 0% 100%);
  position: absolute;
  top: 1%;
  left:40%;
  border-radius: 30px 100px;
}

.ear-right-inner{
  background: #333;
  height: 32%;
  width: 24%;
    clip-path: polygon(25% 55%, 100% 5%, 73% 100%, 0% 100%);
  position: absolute;
  top: 13%;
  left:45%;
  border-radius: 30px;
}

.ear-left{
  clip-path: polygon(0 30%, 71% 29%, 100% 100%, 30% 100%);
  position: absolute;
  height: 30%;
  width: 30%;
  background: black;
  top: 10%;
  left: 20%;
}
.ear-left-inner{

  
clip-path: polygon(0 62%, 71% 18%, 100% 100%, 18% 100%);


  position: absolute;
  height: 23%;
  width: 15%;
  background: #333;
  top: 18%;
  left: 29%;
 
}

.ear-left-secondary {
   position: absolute;
  height: 45%;
  width: 15%;
  background: black;
  top: 19%;
  left: 20%;
 clip-path: polygon(2px 2px, 13% 58%, 100% 16%);

  border-bottom: 6px solid #333;
}