@font-face {
	font-family: "Orbitron";
	font-display: auto;
	src: url("../fonts/Orbitron-Bold.woff2") format("woff2");
}

html {
	visibility: hidden;
}

body {

	font-family: "Orbitron";
	color: white;
	text-shadow: 1px 1px 5px black;
	background-color: navy;
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}

#mainBanner {
	margin-top: 5vmin;
	margin-left: 7.5vmin;
	text-align: left;
	font-size: 9vmin;
}

.subBanner {
	font-size: 5vmin;
}

#stripes {
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: right;
}

#bandYellow {
	align-content: center;
	padding-right: 7.5vmin;
	height: 8vmin;
	font-size: 5vmin;
	background-color: gold;
}

#bandOrange {
	align-content: center;
	padding-right: 7.5vmin;
	height: 8vmin;
	font-size: 5vmin;
	background-color: DarkOrange;
}

#bandRed {
	align-content: center;
	padding-right: 7.5vmin;
	height: 8vmin;
	font-size: 5vmin;
	background-color: red;
}

#bandNavy {
	align-content: center;
	padding-right: 7.5vmin;
	height: 8vmin;
	font-size: 5vmin;
	background-color: navy;
}

#bandRed .link {
	display: none;
}

#bandRed:hover .initial {
	display: inline;
}

#bandRed:hover .link {
	display: inline;
}

a {
	color: white;
}



/* ========== Responsive web design ========== */

@media only screen and (orientation: portrait) 
	{
	#portait		{display: block;}
	#landscape		{display: none;}
	body			{	margin: 0;
						padding: 0; 
						height: 80vh;
				}
	}

@media only screen and (orientation: landscape) 
	{
	#portait		{display: none;}
	#landscape		{display: block;}
	body			{	
						
				}
	}

#landscape {
	/* empty placeholder for show/hide */
}

#portait {
	/* empty placeholder for show/hide */
}