CSS Battle - #10 Cloaked Spirits

<div class="wrapper"> <div class="column-1"></div> <div class="column-2"></div> <div class="column-3"></div> <div class="circle-1"></div> <div class="circle-2"></div> <div class="circle-3"></div> </div> 

 body { margin: 0; background: #62306D; } .wrapper { height: 100%; margin: 50px; position: relative; } .column-1 { position: absolute; left: 0; bottom:0; width: 33.3%; height: 50%; background: #F7EC7D; } .circle-1 { position: absolute; left: 0; bottom:33.5%; width: 100px; height: 100px; background: #AA445F; border-radius: 50%; } .circle-1:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background: #E38F66; border-radius: 50%; } .circle-3 { position: absolute; right: 0; bottom:33.5%; width: 100px; height: 100px; background: #AA445F; border-radius: 50%; } .circle-3:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background: #E38F66; border-radius: 50%; } .circle-2 { position: absolute; left: 33.3%; top: -0.15%; bottom:33.5%; width: 100px; height: 100px; background: #E38F66; border-radius: 50%; } .circle-2:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background: #AA445F; border-radius: 50%; } .column-2 { position: absolute; left: 33.3%; bottom:0; width: 33.4%; height: 82.5%; background: #F7EC7D; } .column-3 { position: absolute; right: 0; bottom:0; width: 33.3%; height: 50%; background: #F7EC7D; }