.face {
position: absolute;
width: 60%;
height: 84%;
left: 20%;
top: 8%;
border-radius: 50%;
}

.inner-face {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
background: #000;
border-radius: 50%;
}

.gola-1 {
position: absolute;
width: 80%;
height: 60%;
top: 3%;
left: 10%;
z-index: 2;
background: linear-gradient(rgba(255, 255, 255, 0.85), black);
border-radius: 50%;
}

.eye-1 {
position: absolute;
background: #D3D3D3;
height: 53%;
width: 41%;
top: 15%;
left: 12%;
border-radius: 50%;
}

.inner-eye is write for both .eye-1 & .eye-2, so there's no need to write two times

.inner-eye {
position: absolute;
background: #EBEBEB;
height: 93%;
width: 95%;
top: 8%;
left: 2%;
border-radius: 50%;
}

.pupil-1 {
position: absolute;
height: 35%;
width: 33%;
bottom: 20%;
right: 12%;
border-radius: 50%;
background: linear-gradient(#7c7c7c, black);
}

.eye-2 {
position: absolute;
background: #D3D3D3;
height: 36%;
width: 28%;
top: 30%;
right: 12%;
border-radius: 50%;
}

.pupil-2 {
position: absolute;
height: 40%;
width: 38%;
bottom: 20%;
left: 12%;
border-radius: 50%;
background: linear-gradient(#7c7c7c, black);
}

.gola-2 {
position: absolute;
width: 60%;
height: 30%;
bottom: 1.5%;
left: 20%;
z-index: 3;
background: linear-gradient(white, #B1B1B1);
border-radius: 50%;
}

.wing-1 {
position: absolute;
background: #000;
height: 30%;
width: 50%;
z-index: 1;
left: -16%;
top: 30%;
transform: rotate(26deg);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.wing-2 {
position: absolute;
height: 30%;
width: 50%;
z-index: 1;
right: -10%;
top: 10%;
background: #000;
transform: rotate(-30deg);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.leg-1 {
position: absolute;
width: 23%;
height: 40%;
bottom: -15%;
left: 3%;
z-index: 1;
border-radius: 50%;
border: 10px solid #F69C00;
background: linear-gradient(#F5C87A, #EE9E16);
transform: rotate(-90deg);
}

.leg-2 {
position: absolute;
width: 23%;
height: 40%;
bottom: -15%;
right: 3%;
z-index: 1;
background: yellow;
border: 10px solid #F69C00;
background: linear-gradient(#F5C87A, #EE9E16);
transform: rotate(90deg);
border-radius: 50%;
}

.nose {
position: absolute;
height: 30%;
width: 19%;
z-index: 3;
left: 45%;
top: 40%;
background: #F69C00;
transform: rotate(55deg);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.inner-nose {
position: absolute;
height: 90%;
width: 90%;
top: 10%;
right: 5%;
background: linear-gradient(#fff, #EE9E16);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* media query for the responsive view */

@media screen and (max-width:615px) {
.box {
width: 400px;
height: 270px;
  }
}

@media screen and (max-width:415px) {
.box {
width: 250px;
height: 170px;
  }
.leg-1 {
border: 6px solid #F69C00;
  }
.leg-2 {
border: 6px solid #F69C00;
  }
}