* {
  margin:0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --travel-time: 3.5s;
  /* --travel-time: 4s; */
  --color-change-time: 10s;
  /* --color-change-time: 8s; */
  --background-color: hsl(120, 100%, 5%);
  /* --background-color: #042104;; */
  --dot-color: hsl(120, 100%, 40%);
  /* --dot-color: #00ff0a; */
  --proportion-reason: min(1vh, 1vw);
  --shadow-size: 1;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--background-color);
  animation: animateColor var(--color-change-time) linear infinite;
}

@keyframes animateColor {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

section .container {
  display: flex;
}

section .container .circle {
  position: relative;
  width: calc(var(--proportion-reason)*40);
  height: calc(var(--proportion-reason)*40);
  margin: 0 -7.5px;
}

section .container .circle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(calc((360deg / var(--max-i)) * var(--i)));
  /* 360 / 20 = 18 deg */
}

section .container .circle span::before{
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 7.5px);
  width: 15px;
  height: 15px;
  background: var(--dot-color);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--proportion-reason) * var(--shadow-size) * 1) var(--dot-color),
              0 0 calc(var(--proportion-reason) * var(--shadow-size) * 2) var(--dot-color),
              0 0 calc(var(--proportion-reason) * var(--shadow-size) * 4) var(--dot-color),
              0 0 calc(var(--proportion-reason) * var(--shadow-size) * 6) var(--dot-color),
              0 0 calc(var(--proportion-reason) * var(--shadow-size) * 8) var(--dot-color),
              0 0 calc(var(--proportion-reason) * var(--shadow-size) * 10) var(--dot-color);
  transform: scale(0.1);
  animation: animate var(--travel-time) linear infinite;
  animation-delay: calc(var(--travel-time) / (var(--max-i)*2) * var(--i));
}

@keyframes animate {
  0% {
    transform: scale(0.8);
  }
  /* 50%, */
  85%,100% {
    transform: scale(0.1);
  }
}

section .container .circle:nth-child(2) {
  transform: rotate(-180deg);
}

section .container .circle:nth-child(2) span::before {
  animation-delay: calc(var(--travel-time) / (var(--max-i)*2) * var(--i) * (-1))
}