.three-body {
  --uib-size: 80px;
  --uib-speed: 0.8s;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}

.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}

.three-body__dot:after {
  content: "";
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
}

.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out,
    pastel-colors 6s infinite linear;
  animation-delay: calc(var(--uib-speed) * -0.3), 0s;
}

.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out,
    pastel-colors 6s infinite linear;
  animation-delay: calc(var(--uib-speed) * -0.15), -2s;
}

.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out,
    pastel-colors 6s infinite linear;
  animation-delay: 0s, -4s;
}

@keyframes spin78236 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes wobble1 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes pastel-colors {
  0%,
  100% {
    background-color: #ffadad;
  }
  20% {
    background-color: #ffd6a5;
  }
  40% {
    background-color: #fdffb6;
  }
  60% {
    background-color: #caffbf;
  }
  80% {
    background-color: #9bf6ff;
  }
}

@keyframes animated-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f8f7f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.75s ease;
}

#progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #e5e7eb;
}

#progress-bar {
  width: 0%;
  height: 100%;
  transition: width 0.1s linear;
  background: linear-gradient(
    270deg,
    #ffadad,
    #ffd6a5,
    #fdffb6,
    #caffbf,
    #9bf6ff,
    #a0c4ff,
    #bdb2ff
  );
  background-size: 400% 400%;
  animation: animated-gradient 8s ease infinite;
}

#main-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s ease;
}

#main-content.loaded {
  opacity: 1;
  visibility: visible;
}