.solar-system {
  position: relative;
  width: 454px;
  height: 620px;
  margin: auto;
  margin-top: -90px;
  overflow: hidden;
}

/* Some positioning rules that are common for all objects */
.orbit {
  /* border: 0.5px dashed rgba(255, 255, 255, 0.514);
  opacity: 1; */
}

#sun,
#sunCore,
#sunInnerCore,
.orbit,
.orbit + div,
.orbit + div > div {
  position: absolute;
}

#sun,
#sunCore,
#sunInnerCore,
.orbit,
.orbit + div {
  top: 50%;
  left: 50%;
}
.orbit + div > div {
  top: 0;
  left: 50%;
}

.orbit,
.orbit + div div,
#earth {
  border-radius: 50%;
}

/* Individual objects rules. They are pretty much the same for 
all objects and basically only vary in orbit size 
and planet size. And colors :) */

#sun {
  /* Positions the top-left corner of the image to be *
  /* in the middle of the box */
  height: 320px;
  width: 320px;
  background-color: #eba83b;
  margin-top: -100px;
  margin-left: -160px;
  border-radius: 50%;
  box-shadow: 0 0 44px #eba83b81;
  z-index: 997;
  animation: color-mix 5s linear infinite alternate;
}
@keyframes color-mix {
  0% {
    box-shadow: 0 0 22px #eba83b81;
  }
  100% {
    box-shadow: 0 0 0px #c4a06686;
  }
}
#sunCore {
  /* Positions the top-left corner of the image to be *
  /* in the middle of the box */
  height: 275px;
  width: 270px;
  background: rgb(46, 41, 32);
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(235, 168, 59, 1) 0%,
    rgba(232, 153, 34, 1) 47%,
    rgba(228, 128, 29, 1) 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(235, 168, 59, 1) 0%,
    rgba(232, 153, 34, 1) 47%,
    rgba(228, 128, 29, 1) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(235, 168, 59, 1) 0%,
    rgba(232, 153, 34, 1) 47%,
    rgba(228, 128, 29, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba83b', endColorstr='#e4801d',GradientType=1 );

  margin-top: -62px;
  margin-left: -134px;
  border-radius: 50%;
  /* box-shadow: 0 0 44px #EBA83B; */
  z-index: 998;
}
#sunInnerCore {
  height: 360px;
  width: 320px;
  margin-top: -148px;
  margin-left: -163px;
  border-radius: 50%;
  z-index: 999;
  object-fit: cover;
}

/* ----------------------- */

.logoY {
  width: 30px;
  border-radius: 100%;
}

#planetY {
  margin-top: -16px;
  margin-left: -16px;
  height: 30px;
  width: 30px;
  background-color: #ffffff;
  position: absolute;
}

#planetYAura2 {
  margin-top: -19px;
  margin-left: -19px;
  height: 36px;
  width: 36px;
  background-color: #e89922;
  position: absolute;
}

#planetYAura3 {
  margin-top: -22px;
  margin-left: -22px;
  height: 42px;
  width: 42px;
  background-color: #e4801d;
  border-radius: 100%;
  position: absolute;
  animation: aura3Scale 3s linear infinite;
}

.planetYOrbit {
  width: 430px;
  height: 550px;
  margin-left: -215px;
  margin-top: -230px;
}
.planetYSpin {
  width: 430px;
  height: 550px;
  margin-left: -210px;
  margin-top: -200px;
}

#YRounds {
  display: flex;
}

@keyframes moving {
  0% {
    transform: scale(1);
    margin-top: -200px;
    z-index: 999;
  }
  25% {
    transform: scale(1.4);
    z-index: 999;
  }
  50% {
    transform: scale(1);
    margin-top: 290px;
    z-index: 999;
  }
  75% {
    transform: scale(0.7);
    z-index: -1;
  }
  100% {
    transform: scale(1);
    margin-top: -200px;
    z-index: 999;
  }
}

@keyframes movingOpp {
  0% {
    transform: scale(1);
    margin-top: 290px;
    z-index: 999;
  }
  25% {
    transform: scale(0.7);
    z-index: -1;
  }
  50% {
    transform: scale(1);
    margin-top: -200px;
    z-index: 999;
  }
  75% {
    transform: scale(1.4);
    z-index: 999;
  }
  100% {
    transform: scale(1);
    margin-top: 290px;
    z-index: 999;
  }
}
.planetY2Spin {
  animation: movingOpp 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.planetYSpin {
  animation: moving 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
/* --------- */

.logoA {
  width: 24px;
  border-radius: 100%;
  margin-top: -11px;
}


#planetA {
  margin-top: -11px;
  margin-left: -11px;
  height: 20px;
  width: 20px;
  background-color: #ffffff;
  position: absolute;
}

#planetAAura2 {
  margin-top: -14px;
  margin-left: -14px;
  height: 26px;
  width: 26px;
  background-color: #e89922;
  position: absolute;
}

#planetAAura3 {
  margin-top: -17px;
  margin-left: -17px;
  height: 32px;
  width: 32px;
  background-color: #e4801d;
  border-radius: 100%;
  position: absolute;
  animation: aura3Scale 3s linear infinite;
}

@keyframes movingA {
  0% {
    transform: scale(1);
    margin-top: 230px;
    margin-left: 180px;

    z-index: 999;
  }
  25% {
    transform: scale(0.7);
    z-index: -1;
  }
  50% {
    transform: scale(1);
    margin-top: -120px;
    margin-left: -180px;

    z-index: 999;
  }
  75% {
    transform: scale(1.4);
    z-index: 999;
  }
  100% {
    transform: scale(1);
    margin-top: 230px;
    margin-left: 180px;

    z-index: 999;
  }
}

@keyframes movingAOpp {
  0% {
    transform: scale(1);
    margin-top: -120px;
    margin-left: -180px;

    z-index: 999;
  }
  25% {
    transform: scale(1.4);
    z-index: 999;
  }
  50% {
    transform: scale(1);
    margin-top: 230px;
    margin-left: 180px;

    z-index: 999;
  }
  75% {
    transform: scale(0.7);
    z-index: -1;
  }
  100% {
    transform: scale(1);
    margin-top: -120px;
    margin-left: -180px;
    z-index: 999;
  }
}

.planetAOrbit {
  width: 200px;
  height: 200px;
  margin-left: 100px;
  margin-top: 100px;
}
.planetA2Spin {
  animation: movingAOpp 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.planetASpin {
  animation: movingA 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
/* --------- */

@keyframes movingB {
  0% {
    transform: scale(1);
    /* margin-top: 180px; */
    margin-top: 228px;
    margin-left: -180px;

    z-index: 999;
  }
  25% {
    transform: scale(1.4);
    z-index: 999;
  }
  50% {
    transform: scale(1);
    margin-top: -140px;
    /* margin-left: 140px; */
    margin-left: 208px;

    z-index: 999;
  }
  75% {
    transform: scale(0.7);
    z-index: -1;
  }
  100% {
    transform: scale(1);
    /* margin-top: 180px; */
    margin-top: 228px;
    margin-left: -180px;

    z-index: 999;
  }
}

@keyframes movingBOpp {
  0% {
    transform: scale(1);
    margin-top: -140px;
    /* margin-left: 140px; */
    margin-left: 208px;

    z-index: 999;
  }
  25% {
    transform: scale(0.7);
    z-index: -1;
  }
  50% {
    transform: scale(1);
    /* margin-top: 180px; */
    margin-top: 228px;
    margin-left: -180px;

    z-index: 999;
  }
  75% {
    transform: scale(1.4);
    z-index: 999;
  }
  100% {
    transform: scale(1);
    margin-top: -140px;
    /* margin-left: 140px; */
    margin-left: 208px;

    z-index: 999;
  }
}

.planetBOrbit {
  width: 280px;
  height: 280px;
  margin-left: 140px;
  margin-top: -140px;
}
.planetB2Spin {
  animation: movingBOpp 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.planetBSpin {
  animation: movingB 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* ------------ */

/* --------- */
.logoC {
  width: 10px;
  margin-bottom: 21px;
  border-radius: 100%;
}

#planetC {
  margin-top: -6px;
  margin-left: -6px;
  height: 10px;
  width: 10px;
  background-color: #ffffff;
  position: absolute;
}

#planetCAura2 {
  margin-top: -9px;
  margin-left: -9px;
  height: 16px;
  width: 16px;
  background-color: #e89922;
  position: absolute;
}

#planetCAura3 {
  margin-top: -12px;
  margin-left: -12px;
  height: 22px;
  width: 22px;
  background-color: #e4801d;
  border-radius: 100%;
  position: absolute;
  animation: aura3Scale 3s linear infinite;
}

@keyframes movingC {
  0% {
    transform: scale(1);
    margin-top: 60px;
    margin-left: -200px;

    z-index: 999;
  }
  25% {
    transform: scale(2);
    z-index: 999;
  }
  50% {
    transform: scale(1);
    margin-top: 60px;
    margin-left: 200px;

    z-index: 999;
  }
  75% {
    transform: scale(0.7);
    z-index: -1;
  }
  100% {
    transform: scale(1);
    margin-top: 60px;
    margin-left: -200px;

    z-index: 999;
  }
}

@keyframes movingCOpp {
  0% {
    transform: scale(1);
    margin-top: 60px;
    margin-left: 200px;

    z-index: 999;
  }
  25% {
    transform: scale(0.7);
    z-index: -1;
  }
  50% {
    transform: scale(1);
    margin-top: 60px;
    margin-left: -200px;

    z-index: 999;
  }
  75% {
    transform: scale(2);
    z-index: 999;
  }
  100% {
    transform: scale(1);
    margin-top: 60px;
    margin-left: 200px;

    z-index: 999;
  }
}

.planetBOrbit {
  width: 280px;
  height: 280px;
  margin-left: -140px;
  margin-top: 0px;
}
.planetC2Spin {
  animation: movingCOpp 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.planetCSpin {
  animation: movingC 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}