body {
  -webkit-font-smoothing: antialiased;
}

.earth-demo {
  background: #000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.earth-demo:before {
  background: url(../img/space2.jpg) repeat center;
  background-size: cover;
  content: "";
  opacity: .5;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.earth {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}
.earth img {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.moon-container {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}

.moon {
  -webkit-animation: spin 20s linear infinite;
          animation: spin 20s linear infinite;
  background: none;
  width: 50px;
  height: 50px;
  pointer-events: none;
  -webkit-transform-origin: 25px;
          transform-origin: 25px;
}
.moon img {
  -webkit-transform: translateX(-160px) translateY(-160px);
          transform: translateX(-160px) translateY(-160px);
  width: 50px;
}

.earth img, .moon img {
  border-radius: 50%;
  box-shadow: 0 0 12em 1em rgba(110, 140, 200, 0.6);
}

* {
  transition: all 4s cubic-bezier(0, 1.5, 0.3, 1);
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}