body {
  margin: 0;
  height: 100%;
  background: #ffffff;

  background-size: 100% 100%;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.contain {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stretch {
  display: block;
  width: 100%;
  height: 100%;
}

.cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
}

.bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    margin: 0;
    height: 100%;
    background: #ffffff;

    background-size: 100% 100%;
  }
}

.loader-container {
  width: 265px;
  height: 151px;
  margin-top: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.loader-1 {
  position: relative;
  left: 0px;
  top: 0px;
  width: 37px;
  height: 37px;
  background-color: #ffd740;
  border-radius: 50%;
  animation: slide 3.12s ease-in-out infinite;
  /* animation-delay: 200ms; */
}

.loader-2 {
  position: relative;
  width: 37px;
  height: 37px;
  background-color: #0277bd;
  border-radius: 50%;
  animation: swap-1 3.12s ease-in-out infinite,
    rotate-1 3.12s ease-in-out infinite;
}

.loader-3 {
  position: relative;
  width: 37px;
  height: 37px;
  background-color: #0277bd;
  border-radius: 50%;
  animation: swap-2 3.12s ease-in-out infinite,
    rotate-2 3.12s ease-in-out infinite;
}

.loader-4 {
  position: relative;
  width: 37px;
  height: 37px;
  background-color: #0277bd;
  border-radius: 50%;
  animation: swap-3 3.12s ease-in-out infinite,
    rotate-3 3.12s ease-in-out infinite;
}

.loader-5 {
  position: relative;
  width: 37px;
  height: 37px;
  background-color: #0277bd;
  border-radius: 50%;
  animation: swap-4 3.12s ease-in-out infinite,
    rotate-4 3.12s ease-in-out infinite;
}

@keyframes slide {
  0% {
    /* transform: translateX(0); */
    left: 0px;
  }

  50% {
    left: calc(265px - 37px);
  }

  100% {
    /* transform: translateX(100%); */
    left: 0px;
  }
}

@keyframes swap-1 {
  0% {
    /* transform: translateX(0); */
    left: 0px;
  }

  5% {
    left: 10px;
  }

  15%,
  20%,
  50%,
  80% {
    left: -57px;
  }

  85% {
    left: -67px;
  }

  95%,
  100% {
    /* transform: translateX(100%); */
    left: 0px;
  }
}

@keyframes rotate-1 {
  0%,
  2% {
    /* transform: translateX(0); */
    top: 0px;
  }

  10% {
    top: -57px;
  }

  18%,
  50%,
  82% {
    top: 0px;
  }

  90% {
    top: 57px;
  }

  98%,
  100% {
    /* transform: translateX(100%); */
    top: 0px;
  }
}

@keyframes swap-2 {
  0%,
  10% {
    /* transform: translateX(0); */
    left: 0px;
  }

  15% {
    left: 10px;
  }

  25%,
  30%,
  50%,
  70% {
    left: -57px;
  }

  75% {
    left: -67px;
  }

  85%,
  90%,
  100% {
    /* transform: translateX(100%); */
    left: 0px;
  }
}

@keyframes rotate-2 {
  0%,
  12% {
    /* transform: translateX(0); */
    top: 0px;
  }

  20% {
    top: -57px;
  }

  28%,
  50%,
  72% {
    top: 0px;
  }

  80% {
    top: 57px;
  }

  88%,
  100% {
    /* transform: translateX(100%); */
    top: 0px;
  }
}

@keyframes swap-3 {
  0%,
  20% {
    /* transform: translateX(0); */
    left: 0px;
  }

  25% {
    left: 10px;
  }

  35%,
  40%,
  50%,
  60% {
    left: -57px;
  }

  65% {
    left: -67px;
  }

  75%,
  80%,
  100% {
    /* transform: translateX(100%); */
    left: 0px;
  }
}

@keyframes rotate-3 {
  0%,
  22% {
    /* transform: translateX(0); */
    top: 0px;
  }

  30% {
    top: -57px;
  }

  38%,
  50%,
  62% {
    top: 0px;
  }

  70% {
    top: 57px;
  }

  78%,
  100% {
    /* transform: translateX(100%); */
    top: 0px;
  }
}

@keyframes swap-4 {
  0%,
  30% {
    /* transform: translateX(0); */
    left: 0px;
  }

  35% {
    left: 10px;
  }

  45%,
  50% {
    left: -57px;
  }

  55% {
    left: -67px;
  }

  65%,
  70%,
  100% {
    /* transform: translateX(100%); */
    left: 0px;
  }
}

@keyframes rotate-4 {
  0%,
  32% {
    /* transform: translateX(0); */
    top: 0px;
  }

  40% {
    top: -57px;
  }

  48%,
  50%,
  52% {
    top: 0px;
  }

  60% {
    top: 57px;
  }

  68%,
  100% {
    /* transform: translateX(100%); */
    top: 0px;
  }
}