body {
  background-color: black;
  position: relative;
}
.fas{
  color: white;
  font-size: 2rem;
}
#sun {
  background-image: url(./sun.gif);
  background-size: cover;
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  top: 250px;
  left: 650px;
}
#mercury {
  background-image: url(./mercury.gif);
  background-size: cover;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  position: absolute;
  top: 100px;
  left: -15px;
}
#m-orbit {
  width: 240px;
  height: 200px;
  position: absolute;
  background-color: transparent;
  border: 1px solid silver;
  border-radius: 100%;
  top: 246px;
  left: 620px;
  animation: mercury 3s linear  infinite;
}
@keyframes mercury {
  from{
    transform: rotate(0);
  }
  to{
    transform: rotate(1turn);
  }
}
#venus {
  background-image: url(./venus.gif);
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  top: 258px;
  left: 300px;
}
#v-orbit{
  width: 440px;
  height: 300px;
  position: absolute;
  background-color: transparent;
  border: 1px solid silver;
  border-radius: 100%;
  top: 199px;
  left: 515px;
  animation: venus 6s linear  infinite;
}
@keyframes venus {
  from{
    transform: rotate(0);
  }
  to{
    transform: rotate(1turn);
  }
}
#e-orbit{
  width: 560px;
  height: 460px;
  position: absolute;
  background-color: transparent;
  border: 1px solid silver;
  border-radius: 100%;
  top: 119px;
  left: 467px;
  animation: earth 8s linear  infinite;
}
#earth {
  background-image: url(./earth.gif);
  background-size: cover;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  position: absolute;
  top: 100px;
  left: -15px;
}
@keyframes earth {
  from{
    transform: rotate(0);
  }
  to{
    transform: rotate(1turn);
  }
}