@charset "utf-8";

/* Establishing Styles */

*{
	margin: 0;
	padding: 0;
	font-family: "Roboto";
	font-weight: 300;
	font-size: 19px;
	color: #212025;
}

*::selection{
	color: #FFF;
	background-color: #e0c1bf;
}

a{
	text-decoration: none;
	color: currentColor;
}

html{
	width: 100%;
	overflow-x: hidden;
}

@font-face{
	font-family: "Mermaid";
	src: url(../fonts/mermaid/Mermaid.ttf);
}

@font-face{
	font-family: "Linux Libertine Regular Italic";
	src: url("../fonts/linux libertine/Linux Libertine Regular Italic.ttf");
}

/* General Styles */

main{
	max-width: 760px;
	margin: auto;
	overflow: hidden;
}

.mobilehidden{
	display: none;
}

h1{
	font-family: "Mermaid", "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
	text-transform: lowercase;
	font-size: 48px;
}

h2{
	font-family: "Montserrat";
	text-transform: uppercase;
	font-size: 22px;
	letter-spacing: 2px;
}

h3{
	font-family: "Linux Libertine Regular Italic";
	font-size: 24px;
}

h1 ~ h3{
	margin-top: -4px;
}

p{
	margin-top: 8px;
}

.content{
	width: 90%;
	margin: 36px auto;
}

.subcontent{
	margin: 24px auto;
}

.background{
	position: absolute;
	z-index: -999;
	background-color: #F0EFF1;
}

.background img{
	display: none;
}

.blockimage, .mobileimage{
	display: block;
}

.mobileimage{
	width: 85%;
	margin: 6px auto;
}

.blockimage{
	width: 90%;
	margin: 16px auto;
}

input:not(#submit){
	height: 32px;
	margin-top: 6px;
	padding: 20px 18px 4px;
	display: block;
	border: none;
}

input:focus{
	outline: none;
}

iframe{
	width: 288px;
	height: 288px;
	display: block;
	border: none;
	overflow: hidden;
}

.stars{
	text-align: center;
}

.checked{
	margin: 0 6px;
	color: #212025;
}

/* Header and Navigation Styling */

header{
	width: 100%;
	height: 100vh;
	min-height: 400px;
	background: url(../images/hero.jpg) center/cover no-repeat; 
	overflow: hidden;
	position: relative;
}

header img{
	width: 70%;
	min-width: 280px;
	max-width: 400px;
	display: block;
	margin: 35vh auto 0;
	transform: translateY(-50%)
}

nav{
	height: 35vh;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	text-transform: uppercase;
	color: #FFF;
}

nav a, nav span{
	padding: 0 6px 10px;
}

nav a{
	font-family: "Montserrat";
	font-size: 26px;
	letter-spacing: 4px;
}

nav span{
	font-size: 24px;
	flex-shrink: 2;
	color: #FFF;
}

/* Footer Styling */

footer{
	text-align: center;
}

#keune{
	margin: 24px auto;
}

#keune img{
	margin-left: 4px;
	height: 22px;
	display: inline;
}

footer p{
	width: 100%;
	margin: 0;
	background-color: #F0EFF1;
	overflow: hidden;
}

footer > p:first-of-type{
	padding-top: 12px;
}

footer > p:last-of-type{
	padding-bottom: 12px;
}

/* Tablet View */

@media screen and (min-width: 680px){
	.mobilehidden{
		display: initial;
	}
	
	.desktophidden{
		display: none;
	}
	
	header img{
		width: 50%;
		max-width: none;
		min-width: 360px;
		margin: 48vh auto -10vh;
	}
	
	#contentheader{
		height: 30vh;
		min-height: 240px;
	}
	
	#contentheader img{
		max-width: 80px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80px;
		margin-bottom: 0;
	}
	
	#contentheader nav {
		position: absolute;
		bottom: 20px;
	}
	
	nav{
		width: 90%;
		height: auto;
		max-width: 860px;
		font-size: 22px;
		flex-direction: row;
	}

	nav span{
		font-size: 26px;
	}
}

/* Desktop View */

@media screen and (min-width: 1024px){
	*{
		font-size: 19px;
	}
	
	h2, h3{
		font-size: 24px;
	}
	
	.mobileimage{
		display: none;
	}
	
	.background img{
		display: initial;
	}
	
	header:not(#contentheader) nav a{
		font-size: 24px;
	}
}

/* Portrait Mobile View */

@media screen and (max-height: 316px){
	a[href="#mouselink"]{
		display: none;
	}
}