body {        
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0;
    overflow: hidden;
    background-color:  #063053;
    /* background-image: linear-gradient( #063053, black); */
}

#starField {  
  background-color: transparent;  
   
  perspective: 500px;
  transform-origin: 50% 50%;  
  transform: translate3d(0%,-20%,0px) rotateX(-20deg) rotateZ(0deg);
  
  -webkit-perspective: 500px;
  -webkit-transform-origin: 50% 50%;  
  -webkit-transform: translate3d(0%,-20%,0px) rotateX(-20deg) rotateZ(0deg);
  
  -moz-perspective: 500px;
  -moz-transform-origin: 50% 50%;  
  -moz-transform: translate3d(0%,-20%,0px) rotateX(-20deg) rotateZ(0deg);
}

#foreground {
  position: absolute;
  top: 75%;
  width: 100%;
  height: 50%;
  background-image: linear-gradient( #101010, darkslategrey);   
}

#horizon {
  z-index: 100;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20%;
  background: -webkit-linear-gradient(top, rgba(6,48,83,0.1), rgb(40,30,30) );
  background: linear-gradient(to bottom, rgba(6,48,83,0) 0%,rgba(40,30,30,1) 100%);
  /* background-image: linear-gradient( #063053, black); */
}

.star {
   background-color: white; 
   position: absolute;
	 border-radius: 50%;
}

#nstar {
   background-color: magenta; 
   position: absolute;
	 border-radius: 50%;

   width: 50px;
   height: 50px;
   /*left: 500px;
   top: 500px*/

  /*transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;*/
}

#meteorField {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 50%;
  background-color: transparent;  
}

#meteor {
  background-color: white; 
  position: absolute;  
  width: 5px;
  height: 5px;  
  border-radius: 50%;
}

.rotateR2L {  
          animation: spinZ 100s infinite linear reverse;
  -webkit-animation: spinZ 100s infinite linear reverse;
     -moz-animation: spinZ 100s infinite linear reverse;
}

.rotateSpeed100 {
   -webkit-animation-duration: 500s;
      -moz-animation-duration: 500s;
           animation-duration: 500s;
}

.rotateL2R {
          animation: spinZ 100s infinite linear;
  -webkit-animation: spinZ 100s infinite linear;
     -moz-animation: spinZ 100s infinite linear;
}

@keyframes spinZ {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes spinZ {
  from {
    -webkit-transform: rotateZ(0deg);
  }
  to {
    -webkit-transform: rotateZ(360deg);
  }
}

@-moz-keyframes spinZ {
  from {
    -moz-transform: rotateZ(0deg);
  }
  to {        
    -moz-transform: rotateZ(360deg);
  }
}