<div id="text-spot">
      <div id="inner-text">
        <div id="circle-wrap">
          <div class="circle circle-one">

          </div>
          <div class="circle circle-two">

          </div>
          <div class="circle circle-three">

          </div>
          <div class="circle circle-four">

          </div>

          <svg id="moon" class="moon" height="50px" viewBox="-12 0 448 448.04455" width="50px" xmlns="http://www.w3.org/2000/svg">
            <path
              d="m224.023438 448.03125c85.714843.902344 164.011718-48.488281 200.117187-126.230469-22.722656 9.914063-47.332031 14.769531-72.117187 14.230469-97.15625-.109375-175.890626-78.84375-176-176 .972656-65.71875 37.234374-125.832031 94.910156-157.351562-15.554688-1.980469-31.230469-2.867188-46.910156-2.648438-123.714844 0-224.0000005 100.289062-224.0000005 224 0 123.714844 100.2851565 224 224.0000005 224zm0 0" />
          </svg>

          <div id="stars" class="stars">
          </div>

          <div id="landscape" class="landscape landscape-one">

          </div>

          <div id="landscape" class="landscape landscape-two">

          </div>

          <div id="landscape" class="landscape landscape-three">

          </div>

          <div id="landscape" class="landscape landscape-four">

          </div>
          <div class="mountain-range mountain-range-one">
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
          </div>

          <div class="mountain-range mountain-range-two">
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
          </div>

          <div class="mountain-range mountain-range-three">
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
          </div>

          <div class="mountain-range mountain-range-four">
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
            <div class="mountain"></div>
          </div>
        </div>

        <div class="sun"></div>
      </div>
    </div>

 @keyframes fadeIn {
        from {
          opacity: 0;
        }

        to {
          opacity: 1;
        }
      }

      @keyframes sunset {
        from {
          transform: translateY(0);
        }

        to {
          transform: translateY(100px);
        }
      }

      @keyframes moonRise {
        from {
          transform: translateY(150px);
          opacity: 1;
        }

        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes shootingStar {
        0% {
          opacity: 0;
          transform: translate3d(60px, -60px, 0);
        }

        60% {
          opacity: .6;
        }

        100% {
          opacity: 0;
          transform: translate3d(0, 0, 0);
        }
      }

      body {
        background: white;
      }

      #inner-text {
        position: relative;
        z-index: 1;
        transform: scale(.5);
      }

      #text-spot {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      #circle-wrap {
        width: 400px;
        height: 400px;
        position: relative;
        overflow: hidden;
      }

      .circle-one {
        background: linear-gradient(to bottom, #03c7ff, #00adff 25%, #ffa90d 45%, #ff720d 60%, #ff720d);
        z-index: 1;
      }

      .circle-two {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 800ms;
        background: linear-gradient(to bottom, #ff0354, #ff720d);
        z-index: 2;
        opacity: 0;
      }

      .circle-three {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 6000ms;
        background: linear-gradient(to bottom, #980371, #3100a7);
        z-index: 3;
        opacity: 0;
      }

      .circle-four {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 9000ms;
        background: linear-gradient(to bottom, #140348, #08011b);
        z-index: 4;
        opacity: 0;
      }

      .circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
        border-radius: 200px;
      }

      .landscape {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        width: 400px;
        height: 195px;
        border-bottom-right-radius: 200px;
        border-bottom-left-radius: 200px;
      }

      .landscape-one {
        background: linear-gradient(to bottom, #66c197 0%, #66c197 5%, #1c9075);
      }

      .mountain-range-one > .mountain {
        background: #66c197;
      }

      .landscape-two {
        animation: fadeIn 3000ms linear forwards;
        z-index: 11;
        background: linear-gradient(to bottom, #2a755d 0%,  #2a755d 5%, #094c36);
        opacity: 0;
      }

      .mountain-range-two > .mountain {
        animation: fadeIn 3000ms linear forwards;
        z-index: 9;
        background: #2a755d;
        opacity: 0;
      }

      .landscape-three {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 6000ms;
        z-index: 12;
        background: linear-gradient(to bottom, #2a755d 0%,  #2a755d 5%, #094c36);
        opacity: 0;
      }

      .mountain-range-three > .mountain {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 6000ms;
        z-index: 10;
        background: #2a755d;
        opacity: 0;
      }

      .landscape-four {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 9000ms;
        z-index: 13;
        background: linear-gradient(to bottom, #18505d 0%, #18505d 5%, #022638);
        opacity: 0;
      }

      .mountain-range-four > .mountain {
        animation: fadeIn 3000ms linear forwards;
        animation-delay: 9000ms;
        z-index: 11;
        background: #18505d;
        opacity: 0;
      }

      .moon {
        animation: moonRise 3000ms linear forwards;
        animation-delay: 7000ms;
        position: absolute;
        z-index: 5;
        top: 75px;
        left: 75px;
        fill: #fff0cf;
        opacity: 0;
      }

      .stars {
        position: absolute;
        z-index: 5;
        top: 60px;
        left: 50px;
        right: 50px;
        height: 200px;
      }

      .star {
        animation: fadeIn 6000ms linear forwards;
        display: block;
        position: absolute;
        width: 2px;
        height: 2px;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px white;
        background: #ffe428;
        opacity: 0;
      }

      .star:nth-child(1) {
        left: 80px;
        top: 90px;
        animation-delay: 1500ms;
      }

      .star:nth-child(2) {
        left: 110px;
        top: 20px;
        animation-delay: 2000ms;
      }

      .star:nth-child(3) {
        left: 140px;
        top: 60px;
        animation-delay: 3500ms;
      }

      .star:nth-child(4) {
        left: 150px;
        top: -20px;
        animation-delay: 3000ms;
      }

      .star:nth-child(5) {
        left: 200px;
        top: 30px;
        animation-delay: 2500ms;
      }

      .star:nth-child(6) {
        left: 280px;
        top: 50px;
        animation-delay: 4000ms;
      }

      .star:nth-child(7) {
        left: 15px;
        top: 10px;
        animation-delay: 4500ms;
      }

      .star:nth-child(8) {
        left: 70px;
        top: -10px;
        animation-delay: 5000ms;
      }

      .star:nth-child(9) {
        left: 225px;
        top: 0;
        animation-delay: 5500ms;
      }

      .star:nth-child(10) {
        left: 210px;
        top: 85px;
        animation-delay: 6000ms;
      }

      .star:nth-child(11) {
        left: -10px;
        top: 70px;
        animation-delay: 6500ms;
      }

      .star.shooting-star {
        animation: shootingStar 400ms linear forwards;
        animation-delay: 10000ms;
        opacity: 0;
        left: 150px;
        top: 30px;
      }

      .star.shooting-star::after {
        animation: shooting-star 400ms ease-in forwards;
        animation-delay: 7000ms;
        display: block;
        content: "";
        width: 20px;
        height: 1px;
        background: rgba(255, 255, 255, 0.63);
        box-shadow: 0 0 3px 1px rgba(255, 228, 40, 0.47), 0 0 4px 1px rgba(250,250,250.47);
        transform: rotate(-45deg);
        margin-top: -6px;
        margin-left: -2px;
      }

      .mountain {
        position: absolute;
        width: 100px;
        height: 100px;
        transform: rotate(45deg);
        bottom: 120px;
        left: 23px;
        z-index: 8;
        border-radius: 3px;
      }

      .mountain:nth-child(2) {
        left: 97px;
        width: 75px;
        height: 75px;
        bottom: 119px;
      }

      .mountain:nth-child(3) {
        left: 155px;
        bottom: 130px;
      }

      .mountain:nth-child(4) {
        left: 265px;
        bottom: 127px;
      }

      .mountain:nth-child(5) {
        left: 370px;
        bottom: 183px;
        width: 30px;
        height: 30px;
      }

      .mountain:nth-child(6) {
        left: 0;
        bottom: 179px;
        width: 23px;
        height: 30px;
      }

      .sun {
        animation: sunset 8000ms linear forwards;
        animation-delay: 1000ms;
        position: absolute;
        z-index: 7;
        bottom: 180px;
        left: 120px;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background: linear-gradient(to bottom, #ff6003, #ffa90d);
        box-shadow: 0 0 20px 0px #ff6003, 0 0 20px 0px #ffa90d
      }

 document.addEventListener('DOMContentLoaded', function () {
        var moonElement = document.getElementById('moon');
        var starParentElement = document.getElementById('stars');
        moonElement.addEventListener('animationend', function () {
          var numberOfStars = 11;
          for (var i = 0; i < numberOfStars; i++) {
            var star = document.createElement('span');
            star.className='star';
            starParentElement.appendChild(star);
          }

          var shootingStar = document.createElement('span');
          shootingStar.className = 'star shooting-star';
          starParentElement.appendChild(shootingStar);
        });
      });