<style>
  css-doodle {
    --rule: (
      :doodle {
        @grid: 1x103 / 85vmin 60vmin; 
        @min-size: 400px 300px;
        overflow: hidden;
        background: 
          @m100(
            radial-gradient(#fff 50%, transparent 0)
            @r(100%) @r(40%) / 1px 1px no-repeat
          ), 
          linear-gradient(#000, #E91E63);
      }
    
      background: #000;
      overflow: hidden;
      position: absolute;
      left: @r(-2%, 98%);
      bottom: 0;
    
      --w: @ri(15, 50);
      --h: @ri(10, 50);

      @random(.2) {
        --w: @ri(15, 20);
        --h: @ri(10, 20);
      }

      @random(.2) {
        --w: @ri(50, 100);
        --h: @ri(50, 100);
      }

      @random(.1) {
        --w: @ri(15, 50);
        --h: @ri(80, 150);
      }

      z-index: calc(99999999 - @var(--w) * @var(--h));
      opacity: calc(1 - 1 / 8000 * @var(--w) * @var(--h));
      @size: calc(@var(--w) * 1px) calc(@var(--h) * .5%);
    
      /* lights */
      @random {
        :after {
          content: '';
          position: absolute;
          top: -3px; left: -2px;
          @size: @p(3px, 4px, 5px) 2px;
          background: #fff;
          box-shadow: @m20(
            calc(@ri(1, 5) * 5px)
            calc(@ri(1, 100) * 2px)
            0 0px #fff@p([0-9a-f])
          );
        }
      }
       
      /* moon */
      @nth(1) {
        @size: 3vmin; 
        box-shadow: inset .5vmin 0 #fff;
        border-radius: 50%;
        background: transparent;
        left: auto;
        top: @r(2%, 8%); 
        right: @r(5%, 10%);
        opacity: .8;
        transform: rotate(@r(-30deg, 30deg));
        filter: drop-shadow(0 0 10px #fff);
      }
    
      /* comet */
      @nth(2, 3) {
        @size: 60% 1px;
        background: linear-gradient(to right, #fffa, transparent);
        transform: rotate(@pn(-145deg, -150deg));
        top: @pn(0%, 10%);
        left: @pn(-20%, 0%);
        opacity: @pn(.2, .5);
        z-index: 1;      
      }
    );
  }  
</style>

<css-doodle use="var(--rule)"></css-doodle>

html, body { 
  height: 100%; 
  margin: 0; 
  background: #000;
}
body { 
  display: flex; 
  align-items: center; 
  justify-content: center 
}

document.addEventListener('click', e => e.target.update && e.target.update());