body {
  background-color: black;
  }
  /*#ec5e24*/
.circle {
  height: 2.4vw;
  width: 2.4vw;
  background-color: #ec4524;
  border-radius: 50%;
  box-shadow: 0 0 12px 0px #ec4524;
  
}

.whitecircle {
  height: 2.4vw;
  width: 2.4vw;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 6px 0px white;
}

.blackcircle {
  height: 2.4vw;
  width: 2.4vw;
  background-color: black;
  border-radius: 50%;
}


.container {
  width: 85%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  padding-bottom: 17px;
  flex-direction: row;
}

.container:nth-child(1) {
  animation: roboticBlink 2.5s steps(1) infinite;
}
.container:nth-child(2) {
  animation: roboticBlink 2.5s steps(1) 0.2s infinite;
}
.container:nth-child(3) {
  animation: roboticBlink 2.5s steps(1) 0.4s infinite;
}
.container:nth-child(4) {
  animation: roboticBlink 2.5s steps(1) 0.6s infinite;
}
.container:nth-child(5) {
  animation: roboticBlink 2.5s steps(1) 0.8s infinite;
}
.container:nth-child(6) {
  animation: roboticBlink 2.5s steps(1) 1s infinite;
}

@keyframes roboticBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}