CSS Battle #11

Battle: #11

<div class="r center"></div>
<div class="y center"></div>
<div class="side left"></div>
<div class="side right"></div>
<style>
  .left {
    left: 50px;
    top: 150px;
    border-bottom: 20px solid #eca03d;
    border-top: transparent;
    border-radius: 0 0 50px 50px;
  }
  .right {
    left: 250px;
    top: 100px;
    border-top: 20px solid #eca03d;
    border-bottom: transparent;
    border-radius: 50px 50px 0 0;
  }
  .side {
    position: absolute;
    background: #191210;
    width: 60px;
    height: 30px;
    border-left: 20px solid #eca03d;
    border-right: 20px solid #eca03d;
  }
  .y {
    z-index: -20;
    width: 140px;
    height: 140px;
    border-radius: 100%;
    background: #eca03d;
  }
  .center {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
  }
  .r {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #84271c;
    border: 25px solid #191210;
  }
  body {
    background: #191210;
    margin: 0;
  }
</style>