/* NANOUU
https://codepen.io/antoniasymeonidou/pen/gOPwYLy
<div>
  <div class="stars"></div>
  <div class="moon"></div>
    	<div class="twinkl"></div>
</div>
*/

.moon {   
  position: absolute;
	top:-15%;
	left:-10%;

	width:40vh;
	height:40vh;
	border-radius:50%;	
	background:white;
	opacity:0.9;			
	box-shadow: 0px 0px 40px 15px white;
  z-index:1;
}

.stars, .twinkl {
  
  width:100%;
  height:60%;
  display:block;
}

.stars {
  background:#000 url(../img/stars.png) repeat top center;
  z-index:0;
}

.twinkl{
  background:transparent url(../img/twinkling.png) repeat top center;
  z-index:0;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}