CSS Battle #97

Battle: #97

<div class="c bot"></div>
<div class="c divider">
  <div class="c scarf"></div>
</div>
<div class="c head">
  <div class="eye"></div>
  <div class="eye r"></div>
</div>
<div class="c hat">
  <div class="c top"></div>
  <div class="c stripe"></div>
</div>
<style>
  body {
    background: #ac474b;
    margin: 0;
  }
  div {
    position: absolute;
  }
  .stripe {
    width: 40px;
    height: 10px;
    bottom: 15px;
    background: #ffffff;
  }
  .top {
    width: 40px;
    height: 40px;
    background: #0e1f2b;
    bottom: 0;
  }
  .hat {
    border-bottom: 5px solid #0e1f2b;
    width: 60px;
    height: 95px;
  }
  .top {
  }
  .c {
    transform: translateX(-50%);
    left: 50%;
  }
  .eye {
    width: 10px;
    height: 10px;
    background: #0e1f2b;
    border-radius: 100%;
    bottom: 32px;
    left: 15px;
  }
  .r {
    left: 35px;
  }

.head {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 100%;
    bottom: 145px;
  }
  .scarf {
    background: #ffa63f;
    width: 60px;
    height: 10px;
    bottom: 4px;
    border-radius: 10px;
  }
  .divider {
    z-index: 10;
    background: #ac474b;
    bottom: 143px;
    height: 18px;
    width: 200px;
  }
  .bot {
    width: 100px;
    height: 100px;
    background: #ffffff;
    border-radius: 100%;
    bottom: 55px;
  }
</style>