body {
    background-color:white;
}

.circle1 {
  height: 200px;
  width: 200px;
  background-color:#8f7ff1;
  border-radius: 50%;
  display:block;
    /*position:absolute;
    top:50;
    z-index:-2;*/
}

.circle2 {
  height: 400px;
  width: 400px;
   border-radius: 50%;
  display:block;
   position:relative;
   left:350px;
   background-color:#4cff00;
    z-index:-2;
}

.circle3 {
  height:200px;
  width: 200px;
 
  border-radius: 50%;
  display:block;
   position:relative;
   left:600px;
  background-color:#fff200;
    z-index:-2;
}


.circle4 {
  height: 200px;
  width: 200px;
 
  border-radius: 50%;
  display:block;
   position:relative;
   left:1000px;
  background-color:orange;
    z-index:-2;
}
.circle5 {
  height: 200px;
  width: 200px;
 
  border-radius: 50%;
  display:block;
   position:relative;
   left:400px;
  background-color:deepskyblue;
    z-index:-2;
}

.circle11 {
  height: 50px;
  width: 50px;
  background-color:#8f7ff1;
  border-radius: 50%;
  display:block;
    position:relative;
    /*position:absolute;
    top:50;
    z-index:-2;*/
}

.circle12 {
  height:100px;
  width:100px;
   border-radius:50%;
  display:block;
   position:absolute;
   
   left:350px;
   background-color:#4cff00;
    z-index:-2;
}

.circle13 {
  height:70px;
  width: 70px;
 
  border-radius: 50%;
  display:block;
   position:relative;
   left:900px;
  background-color:#fff200;
    z-index:-2;
}


.circle14 {
  height: 100px;
  width: 100px;
 
  border-radius: 50%;
  display:block;
   position:relative;
   left:1200px;
   top:-200px;
  background-color:orange;
    z-index:-2;
}
.circle15 {
  height: 20px;
  width: 20px;
 
  border-radius: 50%;
  display:block;
   position:relative;
   left:400px;
  background-color:deepskyblue;
    z-index:-2;
}