body {
  background-color: #fffdfd;
}

.dot {
  height: 200px;
  width: 200px;
  background-color: #f0cc87;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left:60%;
  top: 60%;
}
.littledot {
  height: 100px;
  width: 100px;
  background-color: #fffdfd;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left: 63.5%;
  top: 66%;
}

.dot1 {
  height: 200px;
  width: 200px;
  background-color: #f0cc87;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left: 20%;
  top: 20%;
}
.littledot1 {
  height: 100px;
  width: 100px;
  background-color: #fffdfd;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left: 23.5%;
  top: 26%;
}

.dot2 {
  height: 200px;
  width: 200px;
  background-color: #f0cc87;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 10%;
}
.littledot2 {
  height: 100px;
  width: 100px;
  background-color: #fffdfd;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  left: 53.5%;
  top: 16%;
}