.snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 1000; 
  pointer-events: none;

  background: none;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake1.png"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake2.png"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake3.png");
  background-repeat: repeat;
  background-size:600px 600px;

  animation: snow 10s linear infinite;
}


@keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }
  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }
  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}






body {
  margin: 0;
  padding: 0;
  height: 100vh;

  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      circle at 80% 0%,
      rgba(0, 140, 255, 0.25) 0%,
      rgba(0, 0, 0, 0) 50%
    ),
    radial-gradient(
      circle at 20% -10%,
      rgba(255, 200, 255, 0.25) 0%,
      rgba(0, 0, 0, 0) 45%
    ),
    linear-gradient(
      to bottom,
      #0a0f1e 0%,
      #0b1224 30%,
      #08101f 60%,
      #050b16 100%
    );

  background-attachment: fixed;
  color: white;
  overflow-x: hidden;
}


/* CODE BELONGS TO MARK SCOTTEK ON CODEPEN
THIS IS ADDED IN BY HAMZA CODE ORIGINALLY FROM  https://codepen.io/mark_sottek/pen/NPNeyEE