@font-face {
    font-family: 'optima';
    src: url('fonts/optima-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'optima';
    src: url('fonts/optima-bold-italic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'optima';
    src: url('fonts/optima.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'optima';
    src: url('fonts/optima-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
}

html, body {
	margin: 0px;
	font-family: "optima", Monaco, monospace;
	color: #ffcb00;
	font-size: 20px;
}

a:link {
	color: #ffcb00;
	text-decoration: none;
}

a:visited {
	color: #ffcb00;
}

a:hover {
	color: #ff0000;
}

a:active {
}

header {
	padding: 10px;
	
}

.image {
	margin-bottom: 20px;
}

#menu {
	padding: 0 20px;
	z-index: 10;
	max-width: 50vw;
}

.menuItemContainer {
	text-indent: -20px;
    padding-left: 20px;
}

#menu, 
#object {
	/*background-color: #000;*/
}

#object:empty {
	display: none;
}
#title {
	font-size: 24px;
}

#title, 
#body, 
#notes {
	margin-bottom: 10px;
}

#player, #page {
	width: 100%;
	height: 100%;
}

header, 
#menu,
#page {
	z-index: 2;
}

header {
	position: fixed;
}

#page {
	position: relative;
	top: 20vh;
}
#player-cover {
	position: fixed;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0px;
}

#player {
	position: fixed;
	z-index: -99;
	top: 0px;
}

#object {
	max-width: 50vw;
	position: absolute;
	right: 0px;
	padding: 20px;
	padding-top: 20px;
}

#splash {
	width: 70vw;
	padding: 10vw;
}

.post {
	width: 500px;
    margin: 20px auto 20px auto;
}

@media screen and (max-width: 568px) {
	header {
		top: inherit;
	}
	#menu {
		max-width: 100vw;
	}
	#object {
		max-width: 100vw;
		padding: 0;
	}
	#splash {
		width: inherit;
		padding: 0;
	}
	#title,
	#body,
	#notes {
		padding: 0 20px 20px 20px;
	}


}

@media screen and (max-device-width: 568px) {
	html, body {
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	header {
		position: relative;
	}
	#player {
		display: none;
	}
	
	body {
		background-image: url("bg.png");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		background-color: #000;
    }
	#page {
		height: initial;
		width: initial;
	}
}