@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
   background: radial-gradient(circle,rgba(3, 0, 18, 1), rgba(0, 0, 0, 1), rgba(10, 0, 10, 1), rgba(0, 0, 0, 1), rgba(2, 2, 8, 1) );
}

.space {
  position: relative;
  width: 200px;
  height: 200px;
   background: radial-gradient(circle,rgba(12, 0, 12, 1), rgba(0, 0, 0, 1), rgba(4, 0, 10, 1), rgba(8, 0, 10, 0), rgba(2, 2, 8, 1));
    border-radius: 50%;
  z-index: 1;
}

.earth {
  position: absolute;
  width: 100px;
  height: 100px;
background: radial-gradient(ellipse farthest-corner at top right,rgba(45, 80, 237, 1), rgba(66, 80, 237, 1), rgba(45, 80, 237, .9), rgba(66, 129, 237, 1) );
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(2px 0 3px rgba(100, 100, 255, 1));
}

.orbit {
  width: 300px;
  height: 350px;
  border-radius: 50%;
  position: absolute;
  top: -25%;
  left: -25%;
  animation: orbit 8s linear infinite;
}

.moon {
  position: absolute;
  background: whitesmoke;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0px 0 5px 5px white;
}

footer {
    position: absolute;
    bottom: 20px;
}

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