* {
    margin: 0;
    padding: 0;
}
header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#ffffff;
    display:block;
    font: 14px/1.3 Arial,sans-serif;
    height:50px;
    position:relative;
    z-index:5;
}
h2{
    margin-top: 30px;
    text-align: center;
}
header h2{
    font-size: 22px;
    margin: 0 auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
}
header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}

@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 rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
}
@keyframes rotation_reverse {
    from {
      transform: rotate(359deg);
    }
    to {
      transform: rotate(0deg);
    }
}
@keyframes fade_in {
    0% {opacity: 0;}
    75% {opacity: 0;}
    100% {opacity: 1;}
}

#eclipse {
    background:transparent url(eclipse.png);
    z-index: 3;
    width: 586px;
    height: 586px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translateY(-50%);
}

#carona {
    background:transparent url(carona.png);

    width: 586px;
    height: 586px;
    position: absolute;
 
    animation: rotation 60s infinite linear;
}

#carona_reverse {
    background:transparent url(carona.png);

    width: 586px;
    height: 586px;
    position: absolute;
 
    animation: rotation_reverse 100s infinite linear;
}

#carona_container {
    z-index: 2;
    width: 586px;
    height: 586px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    -ms-transform: translateY(-50%);
}

#super_secret_face {
    background:transparent url(face.png);
    background-size: cover;
    z-index: 4;
    width: 345px;
    height: 345px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translateY(-50%);

    animation: fade_in 600s infinite alternate;
}

.stars, .twinkling {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

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

.twinkling{
  background:transparent url(twinkling.png) repeat top center;
  z-index:1;

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