CSS Battle #66

Battle: #66

<div class="container">
  <div class="tl"></div>
  <div class="tr"></div>
  <div class="bl"></div>
  <div class="br"></div>
  <div class="topbar"></div>
  <div class="ear1"></div>
  <div class="ear2"></div>
  <div class="head"></div>
</div>
<style>
  div {
    position: absolute;
    background: #191919;
  }
  body {
    background: #191919;
    margin: 0;
  }
  .topbar {
    transform: translateX(-50%);
    left: 50%;
    width: 80px;
    height: 30px;
    border-radius: 0 0 10px 10px;
  }
  .head {
    transform: translateX(-50%);
    left: 50%;
    width: 20px;
    height: 20px;
    background: #f2ad43;
    top: 10px;
  }
  .ear1 {
    width: 10px;
    height: 10px;
    background: #f2ad43;
    border-radius: 100%;
    left: 105px;
    top: 5px;
  }
  .ear2 {
    width: 10px;
    height: 10px;
    background: #f2ad43;
    border-radius: 100%;
    right: 105px;
    top: 5px;
  }
  .tl {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    left: -55px;
  }
  .tr {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    right: -55px;
  }
  .br {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    bottom: -180px;
    left: -40px;
  }
  .bl {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    bottom: -180px;
    right: -40px;
  }
  .container {
    transform: translateX(-50%);
    background: #f2ad43;
    width: 240px;
    height: 80px;
    top: 100px;
    left: 50%;
  }
</style>