body{
	background:pink;
  	width:100vw;
  	height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.solar-system{
	position:relative;
   display:flex;
  justify-content:center;
  align-items:center;
}

.earth-circle{
	position:absolute;
  	height:250px;
  	width:250px;
  border:1px solid red;
  border-radius:50%;
}

.sun {
  position:absolute;
	background:red;
  	width:100px;
  	height:100px;
  border-radius:50px;
  box-shadow:0 0 50px red;
}

.earth{
	position:absolute;
  top:-150px;
  width:50px;
  height:50px;
  background:green;
  border-radius:50%;
  animation: 20s rotate linear infinite;
  transform-origin: 30px 150px;
}

.moon-circle{
  position:absolute;
  top: -15px;
  left: -15px;
  	height:80px;
  	width:80px;
  border:1px solid red;
  border-radius:50%;
}

.moon{
	position:absolute;
	top:-25px;
  left:15px;
  width:20px;
  height:20px;
  background:yellow;
  border-radius:50%;
  animation: 2s rotate linear infinite;
  transform-origin: 10px 50px;
}

@keyframes rotate{
  to{
  	transform:rotate(360deg);
  }
}