body
{
	background-color: #000000;
	font-family: 'Share Tech', sans-serif;
}

#galaxy > figure
{
	animation: imageAnimation 120s linear infinite 0s;
	backface-visibility: hidden;
	background-size: cover;
	background-position: center center;
	color: transparent;
	height: 100%;
	left: 0px;
	opacity: 0;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 0;
	margin: 0;
}

#galaxy > figure:nth-child(1)
{
	animation-delay: 110s;
	background-image: url('images/galaxy-01.png');
}
#galaxy > figure:nth-child(2)
{
	animation-delay: 100s;
	background-image: url('images/galaxy-02.png');
}
#galaxy > figure:nth-child(3)
{
	animation-delay: 90s;
	background-image: url('images/galaxy-03.png');
}
#galaxy > figure:nth-child(4)
{
	animation-delay: 80s;
	background-image: url('images/galaxy-04.png');
}
#galaxy > figure:nth-child(5)
{
	animation-delay: 70s;
	background-image: url('images/galaxy-05.png');
}
#galaxy > figure:nth-child(6)
{
	animation-delay: 60s;
	background-image: url('images/galaxy-06.png');
}
#galaxy > figure:nth-child(7)
{
	animation-delay: 50s;
	background-image: url('images/galaxy-07.png');
}
#galaxy > figure:nth-child(8)
{
	animation-delay: 40s;
	background-image: url('images/galaxy-08.png');
}
#galaxy > figure:nth-child(9)
{
	animation-delay: 30s;
	background-image: url('images/galaxy-09.png');
}
#galaxy > figure:nth-child(10)
{
	animation-delay: 20s;
	background-image: url('images/galaxy-10.png');
}
#galaxy > figure:nth-child(11)
{
	animation-delay: 10s;
	background-image: url('images/galaxy-11.png');
}
#galaxy > figure:nth-child(12)
{
	background-image: url('images/galaxy-12.png');
}

@keyframes
imageAnimation
{
	0% { animation-timing-function: ease-out; opacity: 1; }
	8% { opacity: 1; }
	17% { opacity: 0; }
	92% { animation-timing-function: ease-in; opacity: 0; }
	100% { opacity: 1; }
}

#cockpit
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url("images/cockpit.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#radio
{
	position: absolute;
	width: 50%;
	padding-top: 33%;
	bottom: 5%;
	left: 50%;
	margin-left: -25%;
	background-image: url("images/radio.png");
	background-size: 100%;
}

#knob
{
	position: absolute;
	width: 33%;
	padding-top: 33%;
	top: 24%;
	left: 52.5%;
	background-image: url("images/knob.png");
	background-size: 100%;
	cursor: pointer;
}

#knob canvas
{
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 0.01;
}

#station
{
	position: absolute;
	top: 26%;
	left: 15%;
	width: 25%;
	font-size: 4vw;
	text-align: center;
	color: #999;
}

#transcript
{
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 90%;
	top: 5%;
	left: 5%;
}

#transcript p
{
	font-size: 200%;
	color: #ddd;
	margin: 2%;
}

#ship
{
	animation: shipAnimation 2s linear infinite 0s;
	position: absolute;
	width: 50%;
	padding-top: 28%;
	top: 50%;
	left: 50%;
	margin-top: -10%;
	margin-left: -25%;
}

@keyframes
shipAnimation
{
	0% { margin-top: -10%; transform: rotate(0deg); }
	25% { transform: rotate(10deg); }
	50% { margin-top: -15%;  transform: rotate(0deg); }
	75% { transform: rotate(-10deg); }
	100% { margin-top: -10%; transform: rotate(0deg); }
}

#birb
{
	position: absolute;
	background-image: url("images/the-birb.png");
	background-size: 100%;
	width: 100%;
	height: 100%;
	top: 0;
}

#flames
{
	animation: flameAnimation 0.75s infinite 0s;
	background-image: url("images/flames-1.png");
	background-size: 100%;
	position: absolute;
	width: 50%;
	padding-top: 33%;
	top: 12%;
    left: -28%;
}

@keyframes
flameAnimation
{
	0% { background-image: url("images/flames-1.png"); }
	24% { background-image: url("images/flames-1.png"); }
	25% { background-image: url("images/flames-2.png"); }
	49% { background-image: url("images/flames-2.png"); }
	50% { background-image: url("images/flames-3.png"); }
	74% { background-image: url("images/flames-3.png"); }
	75% { background-image: url("images/flames-4.png"); }
	100% { background-image: url("images/flames-4.png"); }
}

#titlescreen
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	cursor: pointer;
}

#title
{
	animation: titleAnimation 2s linear infinite 0s;
	position: absolute;
	background-image: url("images/transgalactica.png");
	background-size: 100%;
	width: 40%;
    padding-top: 8%;
    top: 7%;
    left: 6%;
    transform: rotate(-15deg);
}

#subtitle
{
	animation: subtitleAnimation 2s linear infinite 0s;
	position: absolute;
	background-image: url("images/tune-adventure.png");
	background-size: 100%;
	width: 50%;
    padding-top: 6%;
    bottom: 14%;
    right: 8%;
    transform: rotate(5deg);
}

#endcredits
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

#theend
{
	animation: titleAnimation 2s linear infinite 0s;
	position: absolute;
	background-image: url("images/the-end.png");
	background-size: 100%;
	width: 22%;
    padding-top: 8%;
    top: 13%;
    left: 6%;
    transform: rotate(-15deg);
}

#names
{
	animation: subtitleAnimation 2s linear infinite 0s;
	position: absolute;
	background-image: url("images/names.png");
	background-size: 100%;
	width: 50%;
    padding-top: 12%;
    bottom: 14%;
    right: 8%;
    transform: rotate(5deg);
}

@keyframes
titleAnimation
{
	0% { margin-top: 0; transform: rotate(-15deg); }
	25% { margin-top: 1%; }
	50% { margin-top: 0; transform: rotate(0deg); }
	75% { margin-top: -1%; }
	100% { margin-top: 0; transform: rotate(-15deg); }
}

@keyframes
subtitleAnimation
{
	0% { margin-bottom: 0; transform: rotate(5deg); }
	25% { margin-bottom: 1%; }
	50% { margin-bottom: 0; transform: rotate(-2deg); }
	75% { margin-bottom: -1%; }
	100% { margin-bottom: 0; transform: rotate(5deg); }
}