section{
  position:relative;
  width:100%;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items: center;

  flex-direction:column;
  animation: changeColor 5s linear infinite;
}
@keyframes changeColor{
  
  0%{
    filter: hue-rotate(0deg)
  }
   100%{
    filter: hue-rotate(360deg)
  }
  
}
section h2{
    color:#87F3FE;
    letter-spacing: 2px;
}
section h3{
  color:#87F3FE;
  letter-spacing: 1px;
  font-size:30px;
}
section h4{
  color:#87F3FE;
  letter-spacing: 0px;
  font-size:16px;
}

section .glower{
  position:relative;
  display:flex;
}
section .glower .dot{
  position:relative;
  display:block;
  width: 20px;
  height: 20px;
  background:#87F3FE;
  box-shadow: 0 0 10px #87F3FE,
              0 0 20px #87F3FE,
              0 0 40px #87F3FE,
              0 0 60px #87F3FE,
              0 0 80px #87F3FE,
              0 0 100px #87F3FE;
  margin: 20px 10px;
  transform:scale(0.1);
  border-radius:50%;
  animation: animateDot 2s linear infinite;
  animation-delay:calc(0.1s * var(--i));
}
section .glower:last-child .dot{
    animation-delay:calc(-0.1s * var(--i));
}


@keyframes animateDot{

  0%{
    transform:scale(0.1);
  }
  
  10%{
    transform:scale(1);
  }
  50%,100%{
    transform:scale(0.1);
  }

}