.app-loading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 23em;
}

@media screen and (min-height: 500px) and (max-height: 820px) {
  .app-loading {
    top: 12em;
  }
}

.rotate {
  animation: rotation 0.7s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.app-loading p {
  display: block;
  font-size: 1.17em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: normal;
}

.moveLoopLeft {
  top: 10em;
  position: absolute;
  left: 0;
  animation: moveLeft 1s linear infinite;
  transition-delay: 90s;
}

@keyframes moveLeft {
  from {
    left: 0;
  }

  to {
    left: 100%;
  }
}

.moveLoopRight {
  position: absolute;
  right: -600px;
  animation: moveRight 1s linear infinite;
  transition-delay: 90s;
}

@keyframes moveRight {
  from {
    right: -600px;
  }
  to {
    right: 200px;
  }
}

.moveComponent {
  position: relative;
  animation: moveComponent 2s linear infinite;
  transition-delay: 90s;
  right: -40%;
}

@keyframes moveComponent {
  from {
    right: -40%;
  }
  to {
    right: 60%;
  }
}

@media screen and (max-width: 480px) {
  .moveLoopRight {
    position: absolute;
    right: 0;
    animation: moveRight 1s linear infinite;
    transition-delay: 90s;
  }

  @keyframes moveRight {
    from {
      right: -400px;
    }

    to {
      right: 500px;
    }
  }
}