@charset "UTF-8";

@font-face {
	font-family: "aviano-flare-medium-medium";
	src: url("fonts/AvianoFlareMedium.otf") format("opentype");
}

@font-face {
	font-family: "aviano-flare-regular-regular";
	src: url("fonts/AvianoFlareRegular.otf") format("opentype");
}

* {
	box-sizing: border-box;
}

body {
	background-color: black;
	color: white;
}

#wrapper {
}

nav, footer {
	width: 100%;	/*height: 150px;*/
}

footer {
	padding-top: 50px;
}

nav ul, footer ul, .copyright {
	font-family: 'aviano-flare-medium-medium', sans-serif;
	list-style-type: none;
	font-size: 1.25em;
	text-align: center;
	padding-right: 10px;
	padding-top: 5px;
	color: lightgray;
}

footer ul, .copyright {
	font-size: .75em;
}

.copyright {
	padding-bottom: 5px;
}

nav img {
	float: left;
}

nav ul li, footer ul li {
	display: inline;
	padding-right: 25px;
}

nav a:link, footer a:link {
	color: lightgray;
	text-decoration: none;
}

nav a:visited, footer a:visited {
	color: lightgray;
}

nav a:hover, footer a:hover {
	color: red;
}

main {
	clear: left;
}

main img {
	width: 150px;
}

.youtube-video {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.youtube-video-narrow {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.simmer-game {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video-container {
	width: 60%;
	margin: auto;
}

.game-container {
	width: 65%;
	margin: auto;
}

.banner-container {
	font-family: 'aviano-flare-regular-regular', sans-serif;
	text-align: center;
	width: 60%;
	margin: auto;
}

.banner-title {
	font-family: 'Times New Roman', serif;
	font-size: 3em;
}

.banner-subtitle {
	font-size: 1.25em;
	color: gray;
}

form {
	padding: 10px;
}

label {
	display: inline-block;
	float: left;
	width: 250px;
	clear: left;
	text-align: right;
	padding-right: 10px;
	margin-top: 10px;
}

input {
	margin-top: 10px;
	width: 250px;
}

textarea {
	margin-top: 10px;
	width: 500px;
}

@media screen and (max-width:768px) {
	.copyright {
		display: none;
		padding: 0px;
	}

	nav ul li {
		display: block;
	}

	footer {
		padding-top: 10px;
	}

	footer ul li {
		padding-right: 5px;
	}

	nav img {
		float: none;
		width: 150px;
	}

	nav ul {
		font-size: .75em;
	}

	main img {
		width: 100px;
	}

	.banner-container {
		width: 90%;
	}

	.banner-title {
		font-family: 'Times New Roman', serif;
		font-size: 1.5em;
	}

	.banner-subtitle {
		font-size: .75em;
		color: gray;
	}

	label {
		width: 150px;
		padding-right: 5px;
		margin-top: 5px;
		font-size: .75em;
	}

	input {
		margin-top: 5px;
		width: 150px;
	}

	textarea {
		margin-top: 5px;
		width: 200px;
	}
}