1-10. Cloaked Spirits

<div id='container1' class='container'>
  <div class='bigCircle'>
  	<div class='smallCircle'></div>
  </div>
</div>
<div id='container2' class='container'>
	<div class='bigCircle'>
  		<div class='smallCircle'></div>
  	</div> 	
</div>
<div id='container3' class='container'>
  	<div class='bigCircle'>
  		<div class='smallCircle'></div>
  	</div>	
</div>


<style>
*{
    margin: 0;
    padding:0;
 	background:#62306D;
  }
  
body{
    width:400px;
    height:300px;
    position:relative;
  padding: 0 50px
  }

  div{
    position:absolute;
    background:#F7EC7D;
  }
  
  .container{
    position:absolute;
    bottom:0;
    width:100px;
    height:100px
  }
  
  #container2{
    left:150px;
    height:200px;
  }
  
   #container2>.bigCircle{
      background:#E38F66;
    }
   #container2>.bigCircle>.smallCircle{
      background:#AA445F;
    }
  
  #container3{
    left:250px;
  }
  
  .bigCircle{
    position:absolute;
    width:100px;
    height:100px;
    border-radius:50%;
    background:#AA445F;
    top:-50px
  }
  
  .smallCircle{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:60px;
    height:60px;
    border-radius:50%;
   background:#E38F66;
    
  }
  
  
  
  
  

</style>