<body>

<div class="container">

  <div class="g2">
    <div class="nuvem4_4"></div>
    <div class="nuvem4_3"></div>
    <div class="nuvem4_2"></div>
    <div class="nuvem4_1"></div>

    <div class="nuvem3_1"></div>
    <div class="nuvem3_border"></div>
  </div>
  
  <div class="lua"></div>
  <div class="lua__contorno"></div>
  
  <div class="g1">
    <div class="nuvem2_1"></div>
    <div class="nuvem2_2"></div>
    <div class="nuvem2_border"></div>
  
    <div class="nuvem1_1"></div>
    <div class="nuvem1_2"></div>
  </div>
</div>
  
<h3 class="">based on: <a href="https://www.instagram.com/p/BakZqeeg2X2/" alt="Moon" target="_blank">Moon by @k.ulv</a></h3>
  
</body>
body {
  margin: 0;
  padding: 0;
  background: #0a1b25;
}

h3, a {
  text-align: center;
  color: white;
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 1px;
}

.container {
  margin: 0 auto;
}

.lua {
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  width: 175px;
  height: 175px;
  box-shadow: #ffe44b -45px 45px 0 10px;
  boder-radius: 10px;
  background: transparent;
  z-index: 0;
}

.lua__contorno {
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  width: 175px;
  height: 175px;
  box-shadow: #fec200 -55px 55px 0 15px;
  boder-radius: 10px;
  background: transparent;
  bottom: 175px;
  z-index: -1;
}

.nuvem1_1 {
  width: 70px;
  height: 25px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 40px;
  position: relative;
  bottom: 220px;
  left: 30px;
  animation: nbaixo 2s ease-in-out alternate infinite running;
}

.nuvem1_2 {
  width: 70px;
  height: 25px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 40px;
  position: relative;
  bottom: 260px;
  left: 60px;
  animation: nbaixo 2s ease-in-out alternate infinite running;
}

.nuvem2_1 {
  width: 80px;
  height: 45px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 40px;
  position: relative;
  top: -155px;
  right: 140px;
  z-index: 4;
  box-shadow: #8af3e5 -20px 0 0 0;
  animation: nmeio 2s ease-in-out alternate infinite running;
}

.nuvem2_2 {
  width: 80px;
  height: 45px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 40px;
  position: relative;
  bottom: 235px;
  right: 110px;
  box-shadow: #8af3e5 -20px 0 0 0;
  z-index: 3;
  animation: nmeio 2s ease-in-out alternate infinite running;
}

.nuvem2_border {
  width: 120px;
  height: 65px;
  margin: 0 auto;
  background: #0a1b25;
  border-radius: 40px;
  position: relative;
  bottom: 290px;
  right: 120px;
  opacity: 0.05;
  z-index: 2;
  animation: nbaixo 2s ease-in-out alternate infinite running;
}

.nuvem3_1 {
  width: 80px;
  height: 25px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 40px;
  position: relative;
  top: 175px;
  right: 38px;
  box-shadow: #8af3e5 -35px 0 0 0;
  z-index: 3;
  animation: nmeio 2s ease-in-out alternate infinite running;
}

.nuvem3_border {
  width: 135px;
  height: 45px;
  margin: 0 auto;
  background: #0a1b25;
  border-radius: 40px;
  position: relative;
  top: 140px;
  right: 55px;
  opacity: 0.05;
  z-index: 2;
  animation: nmeio 2s ease-in-out alternate infinite running;
}

.nuvem4_1 {
  width: 70px;
  height: 35px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 40px;
  box-shadow: #8af3e5 -30px 0 0 0;
  position: relative;
  top: 160px;
  left: 80px;
  z-index: 1;
}

.nuvem4_2 {
  width: 40px;
  height: 35px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 20px;
  box-shadow: #8af3e5 -15px 0 0 0;
  position: relative;
  top: 165px;
  left: 40px;
  z-index: 3;
}

.nuvem4_3 {
  width: 50px;
  height: 35px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 20px;
  box-shadow: #8af3e5 -25px 0 0 0;
  position: relative;
  top: 175px;
  left: 70px;
  z-index: 2;
}

.nuvem4_4 {
  width: 120px;
  height: 35px;
  margin: 0 auto;
  background: #c2fff8;
  border-radius: 20px;
  box-shadow: #8af3e5 -30px 0 0 0;
  position: relative;
  top: 185px;
  left: 20px;
  z-index: 4;
}

.g1 {
  width: 300px;
  margin: 0 auto;
  position: relative;
  right: 0;
  animation: g1 2s linear alternate infinite running;
}

.g2 {
  width: 300px;
  margin: 0 auto;
  position: relative;
  right: 0;
  animation: g2 2s linear alternate infinite running;
}

@keyframes g1 {
  from { right: 0; }
  to   { right: 20px; }
}

@keyframes g2 {
  from { right: 0; }
  to   { right: -30px; }
}
/* based on: https://www.instagram.com/p/BakZqeeg2X2/
*/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.