.solar-system {
  position: relative;
  width: 100%;
  height: calc(100vh - 96px);
  margin: auto;
  overflow: hidden;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: end;
}
.info .solar-system {
  rotate: 180deg;
}
.orbit {
  border: 1px dashed #0000d0;
}
.orbit, .orbit + div, .orbit + div > div {
  position: absolute;
}
.orbit, .orbit + div {
  top: 95%;
  left: 50%;
}
.orbit + div > div {
  top: 0;
  left: 50%;
}
.orbit, .orbit + div div, #earth {
  border-radius: 50%;
}
.earth {
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  width: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  background-color: #0000d0;
}
.earth-orbit, .earth-spin {
  width: 54vw;
  height: 54vw;
  margin-left: -27vw;
  margin-top: -27vw;
}

.moon {
  margin-top: -6px;
  margin-left: -6px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #E2E4E3;
  border: 1px solid #0000d0;
}
.moon-orbit,
.moon-spin {
  height: 50px;
  width: 50px;
  margin-top: -25px;
  margin-left: -25px;
  border-color: #0000d0;

}

.venus {
  margin-top: -5px;
  margin-left: -5px;
  height: 10px;
  width: 10px;
  background-color: #E2E4E3;
  border: 1px solid #0000d0;
}
.venus-orbit,
.venus-spin {
  margin-top: -38vw;
  margin-left: -38vw;
  width: 76vw;
  height: 76vw;
}

.mercury {
  margin-top: -8px;
  margin-left: -8px;
  height: 16px;
  width: 16px;
  background-color: #E2E4E3;
  border: 1px solid #0000d0;
}

.mercury-orbit,
.mercury-spin {
  width: 30vw;
  height: 30vw;
  margin-left: -15vw;
  margin-top: -15vw;
}
.mars {
  margin-top: -10px;
  margin-left: -10px;
  height: 20px;
  width: 20px;
  background-color: #0000d0;
}
.mars-orbit, .mars-spin {
  width: 38vw;
  height: 38vw;
  margin-left: -19vw;
  margin-top: -19vw;
}
@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}
.earth-spin {
  animation: spin-right 16s linear infinite;
}
.moon-spin {
  animation: spin-right 2s linear infinite;
}
.venus-spin {
  animation: spin-right 14s linear infinite;
}
.mercury-spin {
  animation: spin-right 6s linear infinite;
}
.mars-spin {
  animation: spin-right 20s linear infinite;
}
@media only screen and (max-width: 1024px){
  .orbit, .orbit + div {
    top: 100%;
    left: 50%;
  }

  .earth-orbit, .earth-spin {
    width: 84vw;
    height: 84vw;
    margin-left: -42vw;
    margin-top: -42vw;
  }
  .moon-orbit, .moon-spin {
    height: 40px;
    width: 40px;
    margin-top: -20px;
    margin-left: -20px;
    border-color: #0000d0;
  }
  .venus-orbit, .venus-spin {
    margin-top: -47vw;
    margin-left: -47vw;
    width: 94vw;
    height: 94vw;
  }
  .mercury-orbit, .mercury-spin {
    width: 50vw;
    height: 50vw;
    margin-left: -25vw;
    margin-top: -25vw;
  }
  .mars-orbit, .mars-spin {
    width: 28vw;
    height: 28vw;
    margin-left: -14vw;
    margin-top: -14vw;
  }
}
@media only screen and (max-width: 550px){
  .earth-orbit, .earth-spin {
    width: 104vw;
    height: 104vw;
    margin-left: -52vw;
    margin-top: -52vw;
  }
  .moon-orbit, .moon-spin {
    height: 34px;
    width: 34px;
    margin-top: -17px;
    margin-left: -17px;
    border-color: #0000d0;
  }
  .venus-orbit, .venus-spin {
    margin-top: -67vw;
    margin-left: -67vw;
    width: 134vw;
    height: 134vw;
  }
  .mercury-orbit, .mercury-spin {
    width: 60vw;
    height: 60vw;
    margin-left: -30vw;
    margin-top: -30vw;
  }
  .mars-orbit, .mars-spin {
    width: 40vw;
    height: 40vw;
    margin-left: -20vw;
    margin-top: -20vw;
  }
  .earth {
    height: 16px;
    width: 16px;
    margin-left: -8px;
    margin-top: -8px;
  }
  .moon {
    height: 10px;
    width: 10px;
    margin-left: -5px;
    margin-top: -5px;
  }
  .venus {
    margin-top: -4px;
    margin-left: -4px;
    height: 8px;
    width: 8px;
  }
  .mercury {
    margin-top: -6px;
    margin-left: -6px;
    height: 12px;
    width: 12px;
  }
  .mars {
    margin-top: -7px;
    margin-left: -7px;
    height: 14px;
    width: 14px;
    background-color: #0000d0;
  }
  .earth-spin {
    animation: spin-right 14s linear infinite;
  }
  .moon-spin {
    animation: spin-right 2s linear infinite;
  }
  .venus-spin {
    animation: spin-right 10s linear infinite;
  }
  .mercury-spin {
    animation: spin-right 6s linear infinite;
  }
  .mars-spin {
    animation: spin-right 8s linear infinite;
  }

}