.b-bg {
    background: #120f15;
    font-size: 15vw;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    z-index: -2;
    position: absolute;
  }
  .b-bg *,
  .b-bg *::before,
  .b-bg *::after {
    /* Resets */
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  
  .bg {
    z-index: -1;
    height: 100vh;
    width: 100vw;
  }
  /**
  ***     Comet
  **/
  .bg .comet {
    width: 2em;
    height: 0.2em;
    background: #6738f9;
    background: linear-gradient(to right, rgba(103, 56, 249, 0) 0%, #6738f9 95%);
    border-radius: 0 4em 4em 0;
    animation: comet 5s infinite;
    animation-timing-function: linear;
    top: 50%;
  }
  .bg .comet:nth-child(3n) {
    animation-duration: 6s;
    margin-top: -0.9em;
    font-size: 0.5em;
    animation-delay: -2s;
  }
  .bg .comet:nth-child(3n + 1) {
    animation-duration: 4s;
    opacity: 0.5;
    animation-delay: -1s;
  }
  .bg .comet:nth-child(3n + 2) {
    animation-duration: 4s;
    margin-top: 0.9em;
    opacity: 0.5;
    animation-delay: -1.7s;
  }
  @keyframes comet {
    0% {
      transform: translate(-100vw, 0);
    }
    50% {
      transform: translate(100vw, 0);
    }
    100% {
      transform: translate(100vw, 0);
    }
  }
  /**
  ***     Star
  **/
  .bg .star {
    animation: star 3s infinite;
    animation-timing-function: linear;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
  }
  .bg .star::before, .bg .star::after {
    font-size: 0.5em;
    content: "";
    width: 0.1em;
    height: 0.4em;
    background: #fff;
    border-radius: 4em;
    margin-top: -0.2em;
    margin-left: -0.05em;
  }
  .bg .star::after {
    transform: rotate(90deg);
  }
  .bg .star.pink::before, .bg .star.pink::after {
    background: #bc2bff;
  }
  .bg .star.blue::before, .bg .star.blue::after {
    background: #7249fb;
  }
  .bg .star:nth-child(4) {
    margin-top: 16vh;
    font-size: 0.6em;
    animation-delay: -14s;
    animation-duration: 6s;
  }
  .bg .star:nth-child(5) {
    margin-top: 12vh;
    font-size: 0.7em;
    animation-delay: -17s;
    animation-duration: 16s;
  }
  .bg .star:nth-child(6) {
    margin-top: 2vh;
    font-size: 0.7em;
    animation-delay: -24s;
    animation-duration: 4s;
  }
  .bg .star:nth-child(7) {
    margin-top: 9vh;
    font-size: 0.6em;
    animation-delay: -18s;
    animation-duration: 13s;
  }
  .bg .star:nth-child(8) {
    margin-top: 8vh;
    font-size: 0.5em;
    animation-delay: -5s;
    animation-duration: 18s;
  }
  .bg .star:nth-child(9) {
    margin-top: 22vh;
    font-size: 0.6em;
    animation-delay: -12s;
    animation-duration: 8s;
  }
  .bg .star:nth-child(10) {
    margin-top: 20vh;
    font-size: 0.4em;
    animation-delay: -24s;
    animation-duration: 8s;
  }
  .bg .star:nth-child(11) {
    margin-top: -18vh;
    font-size: 0.7em;
    animation-delay: -1s;
    animation-duration: 15s;
  }
  .bg .star:nth-child(12) {
    margin-top: -29vh;
    font-size: 0.5em;
    animation-delay: -9s;
    animation-duration: 4s;
  }
  .bg .star:nth-child(13) {
    margin-top: -1vh;
    font-size: 0.6em;
    animation-delay: -23s;
    animation-duration: 16s;
  }

  @keyframes star {
    0% {
      transform: translate(110vw, 0) rotate(0deg);
    }
    100% {
      transform: translate(-10vw, 0) rotate(360deg);
    }
  }