:root {
  --basis: linear-gradient(
      160deg,
      rgba(69, 74, 117, 0.473) 0%,
      rgba(98, 104, 143, 0.445) 100%
    ),
    linear-gradient(
      45deg,
      rgba(153, 69, 255, 0.411) 0%,
      rgba(0, 209, 139, 0.404) 100%
    );
  /* --gradient1: rgb(26, 212, 150); */
  /* --gradient2: rgb(176, 139, 221); */
  --gradient1: rgb(117, 228, 187);
  --gradient2: rgb(193, 164, 230);
}

#loaderContainer {
  display: flex;
  width: max-content;
  height: max-content;
  justify-content: center;
  align-items: center;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes switch {
  0% {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 200px;
    height: 200px;
    box-shadow: 0 -130px 0 -75px var(--gradient1);
  }
  25% {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 200px;
    height: 200px;
    box-shadow: 0 -130px 0 -75px var(--gradient1);
  }
  50% {
    top: calc(100% - 55px);
    width: 50px;
    height: 50px;
    box-shadow: 0 -130px 0 75px var(--gradient1);
    transform: translateX(-50%) translateY(0);
  }
  75% {
    top: calc(100% - 55px);
    width: 50px;
    height: 50px;
    box-shadow: 0 -130px 0 75px var(--gradient1);
    transform: translateX(-50%) translateY(0);
  }
  100% {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 200px;
    height: 200px;
    box-shadow: 0 -130px 0 -75px var(--gradient1);
  }
}
#circle {
  width: 325px;
  height: 325px;
  display: block;
  background: var(--basis);
  border-radius: 500%;
  position: relative;
  animation: rotation 2s linear infinite;
}
#inner {
  width: 200px;
  height: 200px;
  background: var(--gradient2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 100%;
  box-shadow: 0 -130px 0 -75px #222;
  animation: switch 8s ease-in-out infinite;
}
