<div id="deer">
  <div class="ears"></div>
  <div class="ears"></div>
  <div class="horn"></div>
  <div class="horn"></div>
  <div id="head">
    <div class="eyes"></div>
    <div class="eyes"></div>
    <div id="muzzle">
      <div class="nostrill"></div>
      <div class="nostrill"></div>
    </div>
  </div>
</div>

*{
  margin:0;
}

:root{
  --bg : #535b3f;
  --ears: #9e5522;
  --face: #ba6628;
  --nose: #884a1b;
  --muzzle:#ffd69e;
  --eyes:#653716;
  --horn:#ffd5a2;
}

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

#head{
  width:30vw;
  height:40vw;
  background:var(--face);
  border-radius:30vw;
  position:relative;
  display:flex;
  justify-content:center;
  margin-bottom:-18vw;
}

#muzzle{
  background:var(--muzzle);
  width:33vw;
  position:absolute;
  height:18vw;
  border-radius:20vw;
  bottom:0;
  display:flex;
  justify-content:center;
}

.nostrill{
  background:#683613;
  width:8vw;
  height:8vw;
  border-radius:50%;
  margin:0 2.5vw;  
  margin-top:2.5vw;
}


.eyes{
  position:absolute;
  width:5vw;
  height:5vw;
  background:var(--eyes);
  border-radius:50%;
  top:12vw;
  left:5vw;
  display:flex;
  align-items:center;
  justify-content:center;
}

.eyes:nth-child(2){
  left:auto;
  right:5vw;
}

.ears{
  position:absolute;
  width:15vw;
  height:8vw;
  background:var(--ears);
  border-radius:0 0 0 8vw;
  margin-left:-8.5vw;
  margin-top:3.5vw;
}

.ears:nth-child(2){
  margin-left:23.5vw;
  border-left:none;
  border-radius:0 0 8vw 0;
  
}

.horn{
  background:transparent;
  position:absolute;
  width:30vw;
  height:30vw;
  border-radius:0 0 0 50vw;
  clip-path:polygon(0 0, 80% 0, 80% 100%, 0 100%);
  border-left:5vw solid var(--horn);
  border-bottom:5vw solid var(--horn);
  margin-top:-25vw;
  margin-left:-15vw;
  transform:rotate(-15deg);
  
}

.horn:nth-child(3){
  transform:rotate(15deg);
  border-radius:0 0 50vw 0;
  border-left:none;
  border-right:5vw solid var(--horn);
  border-bottom:5vw solid var(--horn);
  clip-path:polygon(20% 0, 100% 0, 100% 100%, 20% 100%);
  
  margin-left:10vw;
}

.horn::after{
  content:'';
  width:5vw;
  height:10vw;
  background:var(--horn);
  position:absolute;
  top:10vw;
  left:3vw;
  transform:rotate(15deg);
}

.horn::before{
  content:'';
  width:5vw;
  height:10vw;
  background:var(--horn);
  position:absolute;
  top:16vw;
  left:10vw;
  transform:rotate(15deg);
}

.horn:nth-child(3)::after{
  top:10vw;
  left:auto;
  right:3vw;
  transform:rotate(-15deg);
}

.horn:nth-child(3)::before{
  top:16vw;
  left:auto;
  right:10vw;
  transform:rotate(-15deg);
}