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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.