CSS Battle - #8 Forking Crazy

HTML

<div class="handle"></div>
<div class="base"></div>
<div class="prong first"></div>
<div class="prong second down"></div>
<div class="prong third"></div>
<div class="prong fourth down"></div>
<div class="prong fifth"></div>
<div class="prong sixth down"></div>
<div class="prong seventh"></div>

CSS

  body {
    margin: 0;
    background: #6592CF;
    position: relative;
  }

  .handle {
    position: absolute;
    bottom: 0;
    left: 48%;
    content: '';
    width: 20px;
    height: 55px;
    background: #060F55;
    margin: 0 auto;
  }
  .base {
    position: absolute;
    bottom: 50px;
    left: 33%;
    content: '';
    width: 140px;
    height: 95px;
    background: #060F55;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  .prong {
    position: absolute;
    bottom: 132px;
    content: '';
    width: 20px;
    height: 118px;
    background: #060F55;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }

  .first { left: 33%; }
  .second {left: calc(33% + 20px); }
  .third { left: calc(33% + 40px); }
  .fourth { left: calc(33% + 60px); }
  .fifth { left: calc(33% + 80px); }
  .sixth { left: calc(33% + 100px); }
  .seventh { left: calc(33% + 120px); }

  .down {
    bottom: 140px;
    background: #6592CF; 
    transform: rotate(180deg);
  }