CSS Battle #56

Battle: #56

<div class="nose"></div>
<div class="eyer"></div>
<div class="eyel"></div>
<div class="head"></div>
<div class="jaw"></div>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<style>
  body {
    margin: 0;
    background: #191919;
  }
  div {
    position: absolute;
  }
  .t1 {
    width: 10px;
    height: 30px;
    background: #191919;
    border-radius: 10px;
    top: 205px;
    left: 180px;
  }
  .t2 {
    width: 10px;
    height: 30px;
    background: #191919;
    border-radius: 10px;
    top: 205px;
    left: 195px;
  }
  .t3 {
    width: 10px;
    height: 30px;
    background: #191919;
    border-radius: 10px;
    top: 205px;
    left: 210px;
  }
  .eyel {
    width: 40px;
    height: 40px;
    background: #191919;
    border-radius: 100%;
    top: 138px;
    left: 155px;
  }
  .eyer {
    width: 40px;
    height: 40px;
    background: #191919;
    border-radius: 100%;
    top: 138px;
    right: 155px;
  }
  .head {
    z-index: -1;
    transform: translateX(-50%);
    left: 50%;
    bottom: 115px;
    width: 120px;
    height: 100px;
    background: #4f77ff;
    border-radius: 110px 110px 20px 20px;
  }
  .jaw {
    z-index: -1;
    transform: translateX(-50%);
    left: 50%;
    background: #4f77ff;
    bottom: 85px;
    width: 80px;
    height: 40px;
    border-radius: 0 0 20px 20px;
  }
  .nose {
    background: #191919;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    top: 176px;
    transform: translateX(-50%);
    left: 50%;
  }
</style>