<div id="owl">
  <div id="eyebrows"></div>
  <div id="head">
    <div id="block"></div>
    <div id="nose"></div>
    <div class="eyes"></div>
    <div class="eyes"></div>
    <div class="pupil"></div>
    <div class="pupil pupil-2"></div>
  </div>
</div>

*{
  margin:0;
}

:root{
  --bg : #c2c5aa;
  --forehead: #bb6528;
  --face: #ffd69e;
  --nose: #eca903;
  --eyes:#ffe6c7;
}

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  background: var(--bg);
}

#head{
  width:30vw;
  height:32vw;
  background:var(--face);
  border-radius:48%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

#block{
  background:var(--forehead);
  width:100%;
  height:16vw;
  position:absolute;
  top:0;
}

#nose{
  width:3.5vw;
  background:var(--nose);
  height:4vw;
  border-radius: 0 0 3.5vw 3.5vw;
  top:16vw;
  position:absolute;
}

.eyes{
  width:14.5vw;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
  height:18vw;
  border-radius:50%;
  background:var(--eyes);
  z-index:2;
  position:absolute;
  left:-1vw;
  top:5.5vw;
  transform:rotate(15deg);
}

.eyes:nth-child(3){
  left:auto;
  right:-1vw;
  transform:rotate(-15deg);
  
}


#eyebrows{
  background:var(--forehead);
  width:34vw;
  height:4vw;
  margin-left:-2vw;
  border-radius:0 0 4vw 4vw;
  position:absolute;
  z-index:2;
  margin-top:4vw;
}

.pupil{
  width:6vw;
  height:6vw;
  background:#673713;
  border-radius:50%;
  z-index:3;
  position:absolute;
  top:11vw;
  left:6vw;
}

.pupil-2{
  left:auto;
  right:6vw;
}