galaxy.css

body {
  background-color: #111;
  background: radial-gradient(#555, #000);
}

.earth {
  width: 300px;
  height: 300px;
  background-image: url("earth.jpg");
  border-radius: 50%;
  /* overflow: hidden; */
  box-shadow: inset -12px -15px 80px 2px #000;
  animation: rotate 7s linear 2s infinite normal;
  animation-fill-mode: backwards;
  position: absolute;
}

.sun {
  background-color: Orange;
  width: 200px;
  height: 200px;
  top: 46%;
  left: 48%;
  margin-top: -52px;
  margin-left: -36px;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(#FFB300, yellow);
  animation: sun 5s linear 2s infinite alternate;
}

.star {
  width: 100%;
  height: 100%;
  background-image: url("stars.jpg");
  z-index: -1;
  position: relative;
  animation: twinkle 5s linear 2s infinite alternate;
}

.earth-orbit {
    animation: orbit 30s linear infinite;
    height: 450px;
    width: 450px;
    position: absolute;
    top: 55%;
    left: 60%;
    margin-top: -300px;
    margin-left: -300px;
    border-radius:100%;
}

.globe {
  width: 35px;
  height: 35px;
  position: absolute;
  background-image: url("globe.jpg");
  animation: orbit 14s linear infinite;
  border-radius: 100%;
}

.moon {
  height:20px;
  width:20px;
  background: gray;
  background: radial-gradient(#ddd, #888);
  border-radius:100%;
}

.moonOrbit {
  animation: orbit 6s linear infinite reverse;
   height: 100px;
   width: 100px;
   position: absolute;
   top: -2%;
   left: -29px;
   margin-top: -50px;
   border-radius: 100%;
}

@keyframes twinkle{
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes orbit{

    from {transform:rotate(0);}
    to{transform: rotate(360deg); }
}

@keyframes sun {
  from {
    box-shadow: 0px 0px 86px -9px #f5c91a;
  }
  to {
    box-shadow: 0px 0px 86px 15px #f5c91a;
  }
}

@keyframes rotate {
  from {
  background-position: 0px 0px;
  }
  to {
  background-position: 640px 0px;
  }
}