body {
margin: 0;
padding: 0;
background-image: url(bluegreen.webp);
background-size: cover;
background-repeat: no-repeat;
}

 #container {
width: 500px;
height: 500px;
padding-top: 80px;
margin: 0 auto;
}

 .dot {
width: 500px;
height: 40px;
margin: 30px auto;
border-radius: 50px;
}

 .dot:nth-child(1) {
	background-color: #00ff99;
	animation: left .2s infinite ease-in-out;
}
 
 .dot:nth-child(2) {
	 background-color: #00ccff;
	 animation: right .3s infinite ease-in-out;
 }
 
 .dot:nth-child(3) {
	 background-color: #00ff99;
	 animation: left .2s infinite ease-in-out;
 }
 
 .dot:nth-child(4) {
	 background-color: #00ccff;
	 animation: right .3s infinite ease-in-out;
 }
 
 .dot:nth-child(5) {
	 background-color: #00ff99;
	 animation: left .2s infinite ease-in-out;
 }
 
  .dot:nth-child(6) {
	 background-color: #00ccff;
	 animation: right .3s infinite ease-in-out;
  }
  
    .dot:nth-child(7) {
	 background-color: #00ff99;
	 animation: left .2s infinite ease-in-out;
	}
	 
 
 @keyframes right {
	 0% { transform: translate(-25px); }
	 50% { transform: translate(25px); }
	 100% { transform: translate(-25px); }
 }
 
  @keyframes left {
	 0% { transform: translate(25px); }
	 50% { transform: translate(-25px); }
	 100% { transform: translate(25px); }
 }