Sphere revolving around another sphere- CSS

Question

I am trying to create a pure CSS design of a sphere revolving(orbiting) around another sphere. Like a moon orbiting the sun to be precise. The image of the earth fits in properly into the sphere of earth. But the image of moon does not fit into the sphere of moon.

The image attached might help to understand my question better

Below is my CSS script

    .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: transparent;
}

        .center .earth {
          position: absolute;
          top: 0;
          width: 200px;
          height: 200px;
          background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
          margin: 3em auto;
          border-radius: 50%;
          background-size: 630px;
          animation: spin 30s linear alternate infinite;
          box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
          color: #000;``
        }

            .center .earth .moon {
          position: absolute;
          top: calc(50% - 1px);
          left: 50%;
          width: 200px;
          height: 2px;
          transform-origin: left;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        .center .earth .moon::before {
          content: url(moon.jpg);
          position: absolute;
          top: -25px;
          right: 0;
          width: 50px;
          height: 50px;
          background: #fff;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

        @keyframes spin {
      100% {
        background-position: 100%;
      }
    }

Answer 1

Make this change content: ""; to background-image: url(moon.jpg); and remove background: #fff from classname .center .earth .moon::before

body {
  background: black;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: transparent;
}

        .center .earth {
          position: absolute;
          top: 0;
          width: 200px;
          height: 200px;
          background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
          margin: 3em auto;
          border-radius: 50%;
          background-size: 630px;
          animation: spin 30s linear alternate infinite;
          box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
          color: #000;``
        }

            .center .earth .moon {
          position: absolute;
          top: calc(50% - 1px);
          left: 50%;
          width: 200px;
          height: 2px;
          transform-origin: left;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        .center .earth .moon::before {
          content: "";
          background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
          position: absolute;
          top: -25px;
          right: 0;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          /*animation: rotate 10s linear infinite;*/
        }

        @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

        @keyframes spin {
      100% {
        background-position: 100%;
      }
    }

<div class="center">
<div class="earth">
<div class="moon">

</div>
</div>
</div>