*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* border: 1px solid; */
}

body {
  height: 100vh;     
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.space {
  width: 200px;
  height: 200px;
  margin: auto;
  position: relative;
  background-color: black;
}

.earth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 150, 255, 0.6);
}

.orbit {
  width: 300px;
  height: 200px;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: orbit 10s linear infinite;
}

.moon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  100%{
    transform: rotate(360deg) translate(-50%, -50%);
    
  }
}