@import url('https://fonts.googleapis.com/css?family=Raleway|Lola');

:root {
	--textcolor: #ccbdb9;
	--bodycolor: #2c1227;
	--backgroundcolor: #062F4F;
	--tabcolor: #B82601;
	--tabtextcolor: #E7DFDD;
	--tabhovercolor: #7c1d05;
}
@media all and (orientation:portrait) {
	.mainbody{
		font-size: 4vw;
		padding:1.042vw 3.125vw;
		padding-bottom: 10vw;
	}
	li a {
		font-size: 3vw;
		height: 83%;
	}
	.nameheader{
		font-size: 6vw;
	}
	.halfimage{
		width: 90%;
	}
	iframe{
		margin: 0.833vw 0px;
		width: 72vw;
		height: 40.5vw;
	}
}
@media all and (orientation:landscape){
	.mainbody{
		font-size: 1.2vw;
		padding:1.042vw 3.125vw;
	}
	li a {
		font-size: 1.2vw;
	}
	.nameheader{
		font-size: 3vw;
	}
	iframe{
		margin: 0.833vw 0px;
		width: 48vw;
		height: 27vw;
	}
}
.nameheader{
	width: 90%;
	margin-left: 5%;
	margin-top:0px;
	padding-top: 1.042vw;
	margin-bottom: 0.521vw;
	font-family: monospace;
	text-align: center;
	color: var(--textcolor);
}
body{
    background-color: var(--backgroundcolor);
	box-shadow: 0 0 0 100vmax var(--backgroundcolor);
    font-family: 'Raleway', sans-serif;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Lola', sans-serif;
}
h1{
	line-height:0.8;
}
nav{
    display:table;
    width:90%;
    margin: 0 5%;
    font-family: 'Raleway', sans-serif;
}
.mainbody{
    background-color: var(--bodycolor);
    color:var(--textcolor);
    margin: 0 5% -15px 5%;
    font-family: 'Slabo 27px', serif;
    text-align:center;
}
nav ul {
    list-style-type: none;
    display:flex;
    flex-direction:row;
    justify-content: center;
    font-family: 'Slabo 27px', serif;
    padding-left:0;
    margin-bottom: 0;
	margin-top: 0.833vw;
}
.mainbody p{
	margin: 0 4.688vw;
}
.mainbody ul{
    padding: 0;
    overflow: hidden;
    margin: 0px;
    font-family: 'Slabo 27px', serif;
}
img{
    max-width:100%;
    max-height:100%;
}
.currentPage a, .currentPage a:visited{
    background-color: var(--bodycolor);
    color: var(--textcolor);
    font-style: italic;
    border: none;
    border-top: 1px solid var(--bodycolor);
}
nav li {
    float: left;
    margin: 0px 0px;
    flex:1 1 auto;
}

li a {
    display: block;
    text-align: center;
    padding: 0.729vw 0.833vw;
    text-decoration: none;
    background-color: var(--tabcolor);
}
li a:link{
    color:var(--tabtextcolor);
}
li a:visited{
    color:var(--tabtextcolor);
}
li a:hover {
    background-color: var(--tabhovercolor);
}