body {
    display: flex;
    align-items: center;
    justify-content: center;
}

:root {
    --cube-size: clamp(32px, 30vw, 200px);
    --cube-depth: calc(var(--cube-size) / 2);
}


#centeredDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 40%;
}

#loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   height: 100%;
}

#textDisplay {
  font-size: 2rem;
  text-align: center;
  transition: opacity 0.5s ease;
}

.spinner {
    width: var(--cube-size);
    height: var(--cube-size);

    animation: spinner-y0fdc1 2s infinite ease;
    transform-style: preserve-3d;
}


.spinner > div {
   background-color: rgba(111, 13, 141, 0.2);
   height: 100%;
   position: absolute;
   width: 100%;
   border: 2.2px solid #381d91;
}

.spinner div {
   background-image: url("../assets/images/loadingAnimation_jss_cube.png");
   background-size: cover;
}

.spinner div:nth-of-type(1) {
    transform: translateZ(calc(-1 * var(--cube-depth))) rotateY(180deg);
}

.spinner div:nth-of-type(2) {
    transform: rotateY(-270deg) translateX(50%);
    transform-origin: top right;
}

.spinner div:nth-of-type(3) {
    transform: rotateY(270deg) translateX(-50%);
    transform-origin: center left;
}

.spinner div:nth-of-type(4) {
    transform: rotateX(90deg) translateY(-50%);
    transform-origin: top center;
}

.spinner div:nth-of-type(5) {
    transform: rotateX(-90deg) translateY(50%);
    transform-origin: bottom center;
}

.spinner div:nth-of-type(6) {
    transform: translateZ(var(--cube-depth));
}


@keyframes spinner-y0fdc1 {
   0% {
      transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
   }

   50% {
      transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
   }

   100% {
      transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
   }
}

.progress {
   height: 4.5px;
   width: 145.6px;
   border-radius: 20%;
   background: linear-gradient(#9747ff 0 0),
       linear-gradient(#9747ff 0 0),
       #8285bb3b;
   background-size: 60% 100%;
   background-repeat: no-repeat;
   animation: progress-7x9cg2 3s infinite;
   zoom: 200%;
}

@keyframes progress-7x9cg2 {
   0% {
      background-position: -150% 0,-150% 0;
   }

   66% {
      background-position: 250% 0,-150% 0;
   }

   100% {
      background-position: 250% 0, 250% 0;
   }
}