CSS Battle #51

Battle: #51

<div class="mask"></div>
<div class="strapl"></div>
<div class="strapr"></div>
<div class="line1"></div>
<div class="line2"></div>
<div class="dot"></div>

<style>
  body {
    background: #293462;
    margin: 0;
  }
  div {
    position: absolute;
  }
  .mask {
    background: #fff1c1;
    width: 150px;
    height: 100px;
    border-radius: 0 0 50px 50px;
    top: 100px;
    left: 125px;
  }
  .strapl {
    top: 100px;
    right: 265px;
    width: 60px;
    height: 40px;
    border-radius: 50px 0 0 50px;
    border: 10px solid #fff1c1;
    border-right: none;
  }
  .strapr {
    top: 100px;
    left: 265px;
    width: 60px;
    height: 40px;
    border: 10px solid #fff1c1;
    border-radius: 0 50px 50px 0;
    border-left: none;
  }
  .dot {
    background: #fe5f55;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    top: 140px;
    left: 215px;
  }
  .line1 {
    background: #fe5f55;
    width: 40px;
    height: 10px;
    border-radius: 10px;
    top: 140px;
    left: 145px;
  }
  .line2 {
    background: #fe5f55;
    width: 40px;
    height: 10px;
    border-radius: 10px;
    top: 120px;
    left: 145px;
  }
</style>