.app-loading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 10em;
}
.app-loading p {
  display: block;
  font-size: 2em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: normal;
}

.solar_system {
  margin: 50px auto;
  position: relative;
  width: 80px;
}

.orbit1 {
  width: 75px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid #6a86a3;
  position: absolute;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.planet_holder {
  width: 50px;
  height: 50px;
  position: relative;
  -webkit-animation: planet_holder 3s linear infinite;
  animation: planet_holder 3s linear infinite;
}

.planet {
  width: 10px;
  height: 10px;
  background: #6a86a3;
  border-radius: 50%;
  -webkit-animation: planet 3s linear infinite;
  animation: planet 3s linear infinite;
  position: relative;
  top: 45px;
  left: 32px;
}

@-webkit-keyframes planet_holder {
  0% {
    left: -10px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: -10px;
  }
}

@keyframes planet_holder {
  0% {
    left: -10px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: -10px;
  }
}

@-webkit-keyframes planet {
  from {
    -webkit-transform: rotate(0deg) translate(50px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translate(50px) rotate(-360deg);
  }
}

@keyframes planet {
  from {
    transform: rotate(0deg) translate(50px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(50px) rotate(-360deg);
  }
}

.orbit2 {
  width: 55px;
  height: 80px;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  border: 1px solid #6189ed;
  position: absolute;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.planet_holder2 {
  width: 45px;
  height: 80px;
  position: relative;
  -webkit-animation: planet_holder2 2s linear infinite;
  animation: planet_holder2 2s linear infinite;
}

.planet2 {
  width: 10px;
  height: 10px;
  background: #6189ed;
  border-radius: 50%;
  -webkit-animation: planet2 2s linear infinite;
  animation: planet2 2s linear infinite;
  position: relative;
  top: 35px;
  left: 25px;
}

@-webkit-keyframes planet_holder2 {
  0% {
    left: -15px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: -15px;
  }
}

@keyframes planet_holder2 {
  0% {
    left: -15px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: -15px;
  }
}

@-webkit-keyframes planet2 {
  from {
    -webkit-transform: rotate(0deg) translate(40px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translate(40px) rotate(-360deg);
  }
}

@keyframes planet2 {
  from {
    transform: rotate(0deg) translate(40px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(40px) rotate(-360deg);
  }
}

.orbit3 {
  width: 35px;
  height: 60px;
  left: 20px;
  top: 20px;
  border-radius: 50%;
  border: 1px solid #6a86a3;
  position: absolute;
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.planet_holder3 {
  width: 45px;
  height: 80px;
  position: relative;
  -webkit-animation: planet_holder3 1s linear infinite;
  animation: planet_holder3 1s linear infinite;
}

.planet3 {
  width: 10px;
  height: 10px;
  background: #6a86a3;
  border-radius: 50%;
  -webkit-animation: planet3 1s linear infinite;
  animation: planet3 1s linear infinite;
  position: relative;
  top: 25px;
  left: 15px;
}

@-webkit-keyframes planet_holder3 {
  0% {
    left: -15px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: -15px;
  }
}

@keyframes planet_holder3 {
  0% {
    left: -15px;
  }
  50% {
    left: 10px;
  }
  100% {
    left: -15px;
  }
}

@-webkit-keyframes planet3 {
  from {
    -webkit-transform: rotate(0deg) translate(30px) rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg) translate(30px) rotate(-360deg);
  }
}

@keyframes planet3 {
  from {
    transform: rotate(0deg) translate(30px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(30px) rotate(-360deg);
  }
}

.sun {
  position: relative;
  left: 28px;
  top: 40px;
  background: #f7e700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}