/* ==============================================================================================
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
* {
  margin: 0;
  padding: 0;
}
body{
  background-color:rgba(33, 33, 33, 1);
  color:#ffffff;
  display:block;
  font: 18px/1.3 Arial,sans-serif;
  caret-color: rgba(255,255,255,0.2);
  overflow: hidden;
}

input[type=text] {
  background-color: rgba(255,255,255, 0.0);
  border: 0;
  border-bottom: 4px solid rgba(255,255,255, 0.2);
  color: white;
  height: 80px;
  width:500px;
  font: 50px/1.3 Arial,sans-serif;
  text-align: center;
}
input::placeholder {
  color: rgba(255,255,255, 0.4);
}

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

#content{
  color:#fff;
  text-align: center;
  position:absolute;

  top:35%;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;

  z-index:2;
}

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

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

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

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