<div class="container">
  <div class="moon"></div>
  <div class="cloud">
    <div class="ball">
      <div></div>
    </div>
  </div>
  <div class="cloud cloud-2">
    <div class="ball">
      <div></div>
    </div>
  </div>
  <div class="stars">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

* {
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: rgb(28, 47, 54);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.container{
  position:relative;
  width:50vw;
  height:50vw;
  background:rgb(48,77,91);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.moon{
  background:rgb(253,216,164);
  width:30vw;
  height:30vw;
  border-radius:50%;
  position:relative;
}

.moon::after{
  content:'';
  background:rgb(48,77,91);
  width:20vw;
  height:20vw;
  position:absolute;
  right:0;
  border-radius:50%;
}

.cloud{
  width:23vw;
  height:10vw;
  position:absolute;
  left:7vw;
  bottom:13vw;
  overflow:hidden;
  z-index:2;
}

.ball{
  position:absolute;
  background:rgb(129,171,195);
  width:5vw;
  height:5vw;
  border-radius:50%;
  bottom:-2vw;
  right:0;
}

.ball div{
  position:absolute;
  background:rgb(129,171,195);
  width:5vw;
  height:5vw;
  border-radius:50%;
  bottom:0vw;
  right:18vw;
}

.ball::before{
  content:'';
  position:absolute;
  background:rgb(129,171,195);
  width:8vw;
  height:8vw;
  border-radius:50%;
  right:2.5vw;
  top:-2vw;
}

.ball::after{
  content:'';
  position:absolute;
  background:rgb(129,171,195);
  width:12vw;
  height:12vw;
  border-radius:50%;
  right:8vw;
  top:-6vw;
}

.cloud-2{
  top:15vw;
  transform:scaleX(-1) scale(.6);
  right:8vw;
  left:auto;
}

.stars{
  width:100%;
  height:100%;
  position:absolute;
  border-radius:50%;
}

.stars div{
  background:rgb(245,239,217);
  border-radius:50%;
  position:absolute;
}

/* boring stars */

.stars div:nth-child(1){
  width:3vw;
  height:3vw;
  top:15vw;
  left:6.5vw;
}

.stars div:nth-child(2){
  width:1.5vw;
  height:1.5vw;
  top:20.5vw;
  left:3.5vw;
}

.stars div:nth-child(3){
  width:2vw;
  height:2vw;
  top:30vw;
  left:4.5vw;
}

.stars div:nth-child(4){
  width:1vw;
  height:1vw;
  top:18vw;
  left:22vw;
}

.stars div:nth-child(5){
  width:2.5vw;
  height:2.5vw;
  top:12vw;
  left:27vw;
}
.stars div:nth-child(6){
  width:1vw;
  height:1vw;
  top:14vw;
  left:32vw;
}

.stars div:nth-child(7){
  width:1.5vw;
  height:1.5vw;
  top:18vw;
  left:37vw;
}

.stars div:nth-child(8){
  width:1.5vw;
  height:1.5vw;
  top:15vw;
  left:40vw;
}

.stars div:nth-child(9){
  width:1.5vw;
  height:1.5vw;
  bottom:6vw;
  left:30vw;
}

.stars div:nth-child(10){
  width:1vw;
  height:1vw;
  bottom:5vw;
  left:20vw;
}

.stars div:nth-child(11){
  width:2vw;
  height:2vw;
  bottom:7.5vw;
  left:16vw;
}