*,::before, ::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

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

.space{
  height:200px;
  width:200px;
  position:relative;
  border-radius:50%;
}

.earth{
  height:100px;
  width:100px;
  position:absolute;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background-color:purple;
}
.orbit{
  width:200px;
  height:200px;
  position:absolute;
  transform:translate(-50%,-50%);
  animation:orbit 5s linear infinite;
}

.moon{
width:30px;
height:30px;
position:absolute;
top:0;
left:50%;
border-radius:50%;
background-color:gold;
transform:translate(-50%);
}

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


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