.circle{
  width: 100px;
  height:100px;
  border-radius: 50%;
  background-color: #e1d3b8;
  position: absolute;
  z-index: -2;
}
#circle1{
  left:5%;
  top:10%;
}
#circle2{
  top:60%;
  left:35%;
  width: 150px;
  height:150px;
}
#circle3{
  top:80%;
  left:10%;
}
.text_index{
  z-index: 2;
  position: relative;
}
#circle44{
  width: 100px;
  height:100px;
  left:50%;
  top:25%;
  background-color: #d9e0c9;
}
#circle55{
  width: 250px;
  height:250px;
  left:80%;
  top:100%;
  background-color: #cdd3bf;
}
#circle66{
  width: 600px;
  height:600px;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}
#circle444{
  width: 100px;
  height:100px;
  left:50%;
  top:25%;
  background-color: #d9e0c9;
}
#circle555{
  width: 250px;
  height:250px;
  left:80%;
  top:100%;
  background-color: #cdd3bf;
}
#circle666{
  width: 600px;
  height:600px;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}
#circle4{
  width: 100px;
  height:100px;
  left:50%;
  top:25%;
  background-color: #d9e0c9;
}
#circle5{
  width: 250px;
  height:250px;
  left:80%;
  top:100%;
  background-color: #cdd3bf;
}
#circle6{
  width: 600px;
  height:600px;
  left:0%;
  top:25%;
  background-color: #e0e6cf;
}

#circle7{
  width: 150px;
  height:150px;
  left:85%;
  background-color: #a0aa86;
}
#circle8{
  width: 300px;
  height:300px;
  left:70%;
  margin-top: 10%;
  background-color: #a0aa86;
}
#circle9{
  width: 200px;
  height:200px;
  left:87%;
  margin-top: 25%;
  background-color: #e3e8d7;
}

#circle10{
  width: 250px;
  height:250px;
  left:5%;
  margin-top: 30%;
}

#circle11{
  width: 100px;
  height:100px;
  left:0%;
  margin-top: 45%;
  background-color: #d0d5c4;
}
#circle12{
  width: 300px;
  height:300px;
  left:6%;
  margin-top: 56%;
  background-color: #eef3e0;
}

#circle13{
  width: 200px;
  height:200px;
  left:70%;
  margin-top: 70%;
  background-color: #cad0bb;
}
#circle14{
  width: 300px;
  height:300px;
  left:80%;
  margin-top: 80%;
  background-color: #c0d293;
}
#circle122{
  width: 300px;
  height:300px;
  left:6%;
  margin-top: -5%;
  background-color: #eef3e0;
}

#circle133{
  width: 200px;
  height:200px;
  left:70%;
  margin-top: 5%;
  background-color: #cad0bb;
}
#circle144{
  width: 300px;
  height:300px;
  left:80%;
  margin-top: 10%;
  background-color: #d4dbc0;
}



@media (max-width: 500px) {

  #circle6{
    width: 250px;
    height:250px;
    left:0%;
    top:25%;
    background-color: #e0e6cf;
  }
}