/* (c) Sebastian Pauli, 2019 */

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: white;
	font-family: Impact, Charcoal, "Arial Black", sans-serif;
}

body
{
	background-image: url( "../images/back.jpg" );
	background-size: cover;
	background-position: center
}

#wrapper
{
	text-align: center;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

#container
{
	/*position: absolute;
	top: 0px;*/
	width: 100%;
	max-width: 800px;
	/*height: 100%;*/
	display: inline-block;
	background-color: black;
	box-shadow: 0px 0px 0px 2px white;
	/*padding: 1em;*/
	/*padding-top: 6em;*/
	cursor: url( "../images/cursor.png" ), auto;
}

.speaker
{
	/*position: fixed;*/
	position: absolute;
	top: 0px;
	/*width: 12em;
	height: 16em;*/
	width: 180px;
	height: 216px;
	background-image: url( "../images/Speaker.png" );
	background-size: 100% 100%;
	transition: transform ease 600ms;
	z-index: 1;
}

.speaker.left
{
	left: 0px;
	/*transform: translateX( -12em );*/
}

.speaker.right
{
	right: 0px;
	/*transform: translateX( 12em ) scaleX( -1 );*/
	transform: scaleX( -1 );
}

.left.anim
{
	transform: translateX( 0em );
}

.right.anim
{
	transform: translateX( 0em ) scaleX( -1 );
}

#title
{
	/*position: relative;
	top: 0em;*/
	font-size: 56px;
	/*font-family: Impact, Verdana, sans-serif;*/
	font-weight: bold;
	/*text-align: center;
	width: 100%;*/
	text-shadow: 0px 2px 14px #000000;
	transform: translateY( -5em );
	transition: transform ease 600ms;
}

#header
{
	position: absolute;
	top: 1em;
	width: 100%;
	z-index: 10;
}

#header-back
{
	position: absolute;
	top: 1em;
	width: 100%;
	height: 142px;
	background-image: url( "../images/header.jpg" );
	background-size: 100% 100%;
	z-index: -1;
}

#title.anim
{
	transform: translateY( 0em );
}

#content
{
	margin-top: 7em;
	width: 100%;
	font-size: 2em;
	opacity: 0.0;
	transition: opacity ease 2000ms;
	/*font-weight: bold;*/
}

#content.anim
{
	opacity: 1.0;
}

#content .small
{
	font-size: 0.8em;
	color: lightgray;
}

#content .orange
{
	color: orange;
}

#content .blue
{
	color: cornflowerblue;
}

#content .icon
{
	margin-right: 1em;
}

a
{
	color: white;
	text-decoration: none;
	/*cursor: url( "../images/cursor.png" ), pointer;*/
}

a:hover, a:active
{
	color: orange;
}

#content .copy
{
	font-family: Verdana, sans-serif;
	font-size: 0.5em;
	color: gray;
}