<div class="twinkling"></div>
<div class="video">
  <video id="InformationVideo" class="information__video information__video--visible" preload="auto" autobuffer="" autoload="" autoplay="" loop="">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/astrochimp.mp4" type="video/mp4">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/astrochimp.webm" type="video/webm">
    <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/astrochimp.ogg" type="video/ogg">      
  </video>
</div>
<header>
  <h1>404</h1>
  <h3>error</h3><br>
  <hr />
  <p>
    "Monkey...<br>
    I've got some bad news pal.<br>
    I think we're lost."
  </p>
</header>

$main: #2D3949;

body {
  background: $main;
  background: $main url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/stars.png) repeat top center;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
.twinkling {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130891/twinkling.png) repeat top center;
  z-index:1;
  animation: move-twink-back 200s linear infinite;
}

h1 {
  //color: darken($main, 40);
  font-size: 72px;
  font-family: 'lust-display-didone', serif;
}
h3 {
  //color: darken($main, 40);
  font-size: 48px;
  line-height: 32px;
  text-transform: uppercase;
  font-weight: 300;
  font-family: 'futura-pt', serif;
}
hr {
  width: 100px;
  margin: 0.5em auto 1em;
  border: none;
  height: 2px;
  background: white;
}
p {
  font-size: 24px;
  line-height: 34px;
  font-family: 'futura-pt', sans-serif;
  font-style: italic;
  font-weight: 300; }

.video {
  position: absolute;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  &:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    background-image: linear-gradient(
      rgba(#2D3949, 0),
      #2D3949
      );
    width: 100%; height: 75%;
    top: 25%; left: 0;
  }
}
video {
  width: 100%;
  margin-top: -15%;
  opacity: 0.35;
}
header {
  position: relative;
  z-index: 3;
  text-align: center;
  color: white;
  padding: 12em 0 5em;
}