#square_center{
  height: 60vmin;
  width: 60vmin;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

#inner {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: auto;
  animation-duration: 20s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: none, forwards;
  animation-name: rotate;
}

#quit {
  width: 100%;
  height: 100%;
  position: absolute;
  display: none;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.link {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  vertical-align: middle;
  border-radius:50%;
  animation-duration: 20s, 2s;
  animation-iteration-count: infinite, 1;
  animation-direction: reverse, normal;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-fill-mode: none, forwards;
}

.link1 {
  animation-name: rotate, pos1;
  background:
        radial-gradient(circle,
          #DAF7A6aa,
          #DAF7A600 70.71%);
  z-index: 100;
}

.link2 {
  background:
        radial-gradient(circle,
          #FFC300aa,
          #FFC30000 40.71%);
  animation-name: rotate, pos2;
}

.link3 {
  background:
        radial-gradient(circle,
          #FF5733aa,
          #FF573300 40.71%);
  animation-name: rotate, pos3;
}

.link4 {
  background:
        radial-gradient(circle,
          #C70039aa,
          #C7003900 40.71%);
  animation-name: rotate, pos4;
}

.link5 {
  background:
        radial-gradient(circle,
          #900C3Faa,
          #900C3F00 40.71%);
  animation-name: rotate, pos5;
}

@keyframes pos1 {
  to {left: 0%; top: -50%;}
}

@keyframes pos2 {
  to {left: 47%; top: -15%;}
}

@keyframes pos3 {
  to {left: 29%; top: 40%;}
}

@keyframes pos4 {
  to {left: -29%; top: 40%;}
}

@keyframes pos5 {
  to {left: -47%; top: -15%;}
}

@keyframes rotate {
  0%  {transform: rotate(0deg);}
  20%  {transform: rotate(72deg);}
  40% {transform: rotate(144deg);}
  60%  {transform: rotate(216deg);}
  80%  {transform: rotate(288deg);}
  100%  {transform: rotate(360deg);}
}

@keyframes flyaway {
  to  {transform: scale(5, 5);}
}

@keyframes shrink {
  to  {transform: scale(0.01, 0.01);}
}

@keyframes quit_show {
  from {transform: translate(-0%, 0%) scale(0.01, 0.01);}
  to {transform: scale(1, 1) translate(0%, 0%);}
}