body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
#starmap {
  background-color: #000;
  height: 100%;
  width: 100%;
  position absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.star {
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-timing-function: linear;
}


@keyframes fade {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}

var rand = Math.random();

var map = document.querySelector('#starmap');

function makeStar() {
  var newstar = document.createElement('div');
  newstar.style.backgroundColor = '#fff';
  newstar.style.borderRadius = '50%';
  newstar.style.position = 'absolute';
  newstar.style.top = Math.random()*100 + '%';
  newstar.style.left = Math.random()*100 + '%';
  newstar.style.height = Math.random()*10 + 'px';
  newstar.style.width = newstar.style.height;
  newstar.classList.add('star');
  var glow = Math.random()*10;
  newstar.style.boxShadow = '0 0 ' + glow + 'px' + " " + glow/2 + 'px #fff';
  newstar.style.animationDuration = Math.random()*3+1 + 's';
  map.appendChild(newstar);
  
  var stArr = document.querySelectorAll('.star');
  if (stArr.length >= 100){
    clearInterval(fadeInt);
  }
  }

var fadeInt = setInterval(makeStar, 1000);