* {
  margin: 0px;
  padding: 0px;
}

body {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100vh;
  background-color: rgb(42, 20, 71);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

.earth {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: 100vh;
  position: relative;
}

.earth span {
  position: absolute;
}

.earth span:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25vw;
  height: 50vh;
  border: 1px solid black;
  border-radius: 50%;
  background: linear-gradient(
    to bottom,
    rgb(80, 149, 240),
    rgb(41, 132, 252),
    rgb(8, 115, 255)
  );
}

.earth span:nth-child(1)::before {
  content: "";
  position: absolute;
  width: 15vw;
  height: 20vh;
  bottom: 3vw;
  background-color: rgb(10, 241, 10);
  margin-top: 100px;
  clip-path: shape(
    from 20px 70px,
    arc to 10px 30px of 1% cw,
    arc to 180px 33px of 1% cw,
    curve to 20px 190px with 00px 130px,
    curve to 30px 70px with 110px 130px,
    close,
    move to 220px 150px,
    hline by 45px,
    vline by 211px,
    hline by -424px,
    close
  );
}

.earth span:nth-child(1)::after {
  content: "";
  position: absolute;
  width: 15vw;
  height: 20vh;
  bottom: 11vw;
  left: 11vw;
  background-color: rgb(10, 241, 10);
  margin-top: 100px;
  clip-path: shape(
    from -5% 110px,
    arc to 160px 15px of 2% cw,
    arc to 125px 225px of 1% cw,
    curve to 10px 210px with -30px 44px,
    curve to 200px 120px with 5px 32px
  );
}