body {
  background: radial-gradient(at bottom right, orange, indigo);
  min-height: 100vh;
  margin: 0;
  background-repeat: no-repeat;
}

/*Ellipsis Animation*/
.loading-header {
  text-shadow: 1px 2px 3px gray, 2px 3px 3px black;
  position: fixed;
  bottom: 2vh;
  right: 5vw;
  z-index: 1000;
}
.loading span {
  color: red;
  animation: fade 3s infinite both;
  opacity: 0;
}
.loading span:nth-child(2) {
  color: green;
  animation-delay: .2s;
}
.loading span:nth-child(3) {
  color: blue;
  animation-delay: .4s;
}
@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/*Main Animation*/
#box {
  width: 5em;
  height: 5em;
  border-radius: 99px;
  position: fixed;
  bottom: 8.5vh;
  right: 5.5vw;
  border: inset black;
  box-shadow: inset 4px 3px 3px black, 4px 3px 3px black;
  animation-name: movements;
  animation-duration: 7s;
  animation-iteration-count: infinite;
}
@keyframes movements {
  0% {
    background-color: red;
    transform: translate(0);
  }
  25% {
    background-color: yellow;
    transform: translate(0,-10vh) rotate(90deg) scale(0.5);
  }
  50% {
    background-color: blue;
    transform: translate(-12.5vw,-10vh) rotate(180deg);
  }
  75% {
    background-color: violet;
    transform: translate(-15vh,0) rotate(270deg) scale(0.25);
  }
  100% {
    background-color: red;
    transform: translate(0) rotate(360deg);
  }
}