* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  width: 100%;
  height: 100vh;
}

.wrapper {
  width: 80rem;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 50%;
  box-shadow: -1rem -1rem 2rem #444, 1rem 1rem 2rem #444,
    inset 10rem 0 5rem #000, inset -1rem 0 2rem #c9c3c3;
}

.earth {
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  border-radius: 50%;
  animation: earthAnim 25s infinite linear;
}

.day {
  background-image: url(images/earth-day.jpg);
}

.night {
  background-image: url(images/earth-night.jpg);
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

@keyframes earthAnim {
  0% {
    background-position: 0 center;
  }

  100% {
    background-position: 192rem center;
  }
}