* {
    margin: 0;
    padding: 0;

}

.head {
  font-family: 'Play', sans-serif;
	position: absolute;
	left: 10px;
	top: 10px;
}

.head {
	background: rgba(0,0,0,0.8);
	padding: 12px 10px;
	margin-bottom: 1px;
	color: #fff;
}

.head h1 {
	line-height: 22px;
	font-weight: 300;
	font-size: 18px;
	margin: 0;
}


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

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkle {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
  z-index: -10;
}

.stars {
  background:#000 url(http://sylvaingarnot.fr/media/stars.png) repeat top center;
  z-index:-1;
}

.twinkle{
  background:transparent url(http://sylvaingarnot.fr/media/twinkling.png) repeat top center;
  z-index:-1;

  -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;
}