#container {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#cookie {
  width: 500px;
  height: 500px;
  background: SandyBrown;
  border-radius: 50%;
}

.chocolate-chip {
  width: 40px;
  height: 40px;
  background: black;
  border-radius: 50%;
}

#one {
  position: absolute;
  left: 10%;
  top: 40%;
}

#two {
  position: absolute;
  left: 60%;
  top: 85%;
}

#three {
  position: absolute;
  left: 70%;
  top: 20%;
}

#four {
  position: absolute;
  left: 45%;
  top: 55%;
}

#five {
  position: absolute;
  left: 30%;
  top: 80%;
}

#six {
  position: absolute;
  left: 30%;
  top: 20%;
}

#seven {
  position: absolute;
  left: 80%;
  top: 65%;
}

#eight {
  position: absolute;
  left: 65%;
  top: 40%;
}

#bite {
  cursor: pointer;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 30%;
  top: 30%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0);
  border-radius: 50%;
}

#bite:active {
  cursor: pointer;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 30%;
  top: 30%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 50%;
}