/* Keyframes for the rotating cube animation */
@keyframes cubeRotate {
  25% {
    transform: rotateX(180deg) rotateY(0);
  }

  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }

  75% {
    transform: rotateX(0) rotateY(180deg);
  }

  100% {
    transform: rotateX(0) rotateY(0);
  }
}

.loading-cube {
  width: 150px;
  height: 150px;
  background-color: #3b4261;
  margin: auto;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(51% - 100px);
  animation: cubeRotate 3s infinite linear;

  @media screen and (max-width: 1024px) {
    top: 40%;
    left: 42.5%;
  }

  @media screen and (max-width: 820px) {
    top: 37.5%;
    left: 40%;
  }

  @media screen and (max-width: 600px) {
    left: 30%;
  }
}

.loading-text {
  position: absolute;
  bottom: 5rem;
  left: 42%
}

.loading-text p {
  color: #1f2335 !important;
}

/* Hide the cube when React is injected */
body.react-injected .loading-cube {
  display: none;
}

body.react-injected .loading-text {
  display: none;
}

#animation-wrapper {
  opacity: 0;
  transition: all 300ms ease-out;
}

#animation-wrapper.react-injected {
  opacity: 1;
  transition: all 300ms ease-out;
}