<div id="rabbit">
  <div class="ears"></div>
  <div class="ears"></div>
  <div id="face">
    <div class="eye"></div>
    <div class="eye"></div>
    <div id="nose"></div>
    <div id="teeth"></div>
  </div>
  
  
</div>

*{
  margin:0;
}

:root{
  --bg : #9D784F;
  --face: #eeeeec;
  --teeth:#e2e2e2;
  --eyes:#69361b;
  --nose:#8b4b1b;
}

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

#face{
  margin-top:10vw;
  width:30vw;
  height:30vw;
  background:var(--face);
  border-radius:10vw;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

#face::before, #face::after{
  content:'';
  z-index:2;
  background:var(--face);
  width:19vw;
  border-radius:50%;
  height:19vw;
  position:absolute;
  bottom:-4vw;
  left:-2vw;
}

#face::after{
  right:-2vw;
  left:auto;
}

#teeth{
  background:var(--teeth);
  width:12vw;
  height:12vw;
  position:absolute;
  bottom:-6vw;
  border-radius:50%;
}

#nose{
  background:var(--nose);
  width:5vw;
  height:2.5vw;
  border-radius:0 0 2.5vw 2.5vw;
  margin-top:15vw;
  z-index:3;
  position:absolute;
}

.eye{
  background:var(--eyes);
  width:4.5vw;
  height:4.5vw;
  border-radius:50%;
  position:absolute;
  top:10vw;
  left:6vw;
}

.eye:nth-child(2){
  left:auto;
  right:6vw;
}

.ears{
  width:10vw;
  height:45vw;
  border-radius:10vw;
  background:var(--teeth);
  position:absolute;
  margin-top:-10vw;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ears:nth-child(2){
  margin-left:20vw;
}

.ears::after{
  content:'';
  background:pink;
  width:7vw;
  position:absolute;
  border-radius:10vw;
  height:40vw;
}