/*Imports a font style*/
@font-face {
	font-family: "Metal";
	src: url(fonts/MetalMania-Regular.ttf);
}

/*Imports a font style*/
@font-face {
	font-family: "Cyber";
	src: url(fonts/cyber.ttf);
}

/*Imports a font style*/
@font-face {
	font-family: "pressStart";
	src: url(fonts/pressStart.ttf);
}

/*Imports a font style*/
@font-face {
	font-family: "pixel";
	src: url(fonts/pixel.ttf);
}

/*Imports a font style*/
@font-face {
	font-family: "mbros";
	src: url(fonts/mbros.ttf);
}

/*Imports a font style*/
@font-face {
	font-family: "metroid";
	src: url(fonts/metroid.ttf);
}

/*Controls box sizing*/
* { 
	
	box-sizing: border-box; 

}

/*Controls the background area behind the main area, where you see the digital rain*/
body {

	color: #FFFFFF;
	background-image: url(images/matrix-code.gif);
	background-size: 100% 100%;
	font-family: mbros, "Times New Roman", serif;
	margin: 0;

}

/*Controls wrapper background color and linear gradient color and pattern*/
#wrapper {
	/*margin: auto;*/
	background-color: #7202FA;
	background-image: linear-gradient(to bottom, #000000, #B504d9);
	background-repeat: no-repeat;

}

/*Controls header alignment and color, and background color behind picture*/
header {
	
	/*Organizing by text only*/
	color: #FFFFFF;
	text-align: center;
	
	/*Organizing by background only*/
	background-color: #000000;

	
}

	/*Controls header link color*/
	header a {
		text-decoration: none;
		color: #5C7FA3;
	}

/*Controls header link color*/
header a:link{
	
	color: #5C7FA3;
	
}

		/*Controls header color after visited*/
		header a:visited {

			color: #344873;

		}

/*Controls color of the header when hovered over*/
header a:hover{
	
	color: #90C7E3;
	
}

/*Controls the h1 tag*/
h1 {
	text-align: center;
	margin-bottom: 0;
	font-family: mbros, "Times New Roman", serif;
	margin-top: 0;
	letter-spacing: 0.25em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-image: url(images/header2.png);
	/*background-image: linear-gradient(to right, #000000, #b504d9);*/
	font-size: 600%;
}

/*Controls the text formatting of the navigation menu*/
nav {
	font-size: 120%;
	font-weight: bold;
	padding: 0;
	text-align: center;
	/*Keeps the navigation bar scrolling down as you move down the page, does not work well for mobile*/
	/*position: sticky;
	top: 11em;
	width: 9.2%;*/
	/*Places border around the entire nav area*/
	/*border: solid 2px #666666;*/
	
}

/*Controls the fade in and fade out animation on the nav links*/
nav a {
	
	text-decoration: none;
	transition: color 3s ease-out;

}

/*Controls the font size and spacing of the navigation menu*/
nav ul {
	
	list-style-type: none;
	margin: 0;
	padding-left: 0;
	font-size: 1.2em;
	
}
	
	/*Controls the border around the menu*/
	nav li {

		border-left: 1px solid #666666;
		border-right: 1px solid #666666;
		border-top: 1px solid #666666;
		border-bottom: 1px solid #666666;
		text-align: center;
		/*Controls spacing of menu items*/
		padding: 5px;
	}

/*Controls the color of the navigation links*/
nav a:link{
	
	color: #5C7FA3;
	
}

/*Controls color of the navigation links once visited*/
nav a:visited{
	
	color: #344873;
	
}

/*Controls what the hover animation looks like on the navigation menu*/
nav a:hover{
	
	display: block;
	background-color: #000000;
	color: #FFFFFF;
	
}

/*Controls main background color and spacing*/
main{
	
	padding: 1px 20px 20px 30px;
	display: block;
	background-color: #000000;
	overflow: auto;
	
}

/*Controls font, color, size and position of h2 headers*/
h2 {
	color: #5C7FA3;
	font-family: mbros, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #CCCCCC;
	text-align: center;
	font-size: 350%;
}

/*Controls font, color, size and position of h3 headers*/
h3 {
	font-family: mbros, "Times New Roman", serif;
	color: #7202FA;
	font-size: 200%;
}

/*Positions the contact me h2 on the Contact Me page*/
#cmheader {

	text-align: center;
}

/*Positions the question h3 on the Contact Me page*/
#cmquestion {

	text-align: left;

}

/*Controls buy now links*/
a.buyLink {

	text-decoration: none;
	color: #5C7FA3;
	font-size: 150%;
	font-family: pressStart, "Times New Roman", serif;

}

/*Controls font, color, size and position of h4 headers*/
h4 {

	font-family: mbros, "Times New Roman", serif;
	color: #7202FA;
	font-size: 200%;
	text-align: center;

}

/*Changes About me h4 header*/
h4 a {
	
	text-decoration: none;
	color: #5C7FA3;

	
}

/*Controls the paragrpah font and size*/
p {
	font-family: pressStart, "Times New Roman", serif;
	font-size: 150%;
	color: #FFFFFF;
}

/*Controls positioning for the input areas on the contact me page*/
form {

	display: flex;
	flex-flow: column nowrap;

}

/*Controls spacing for the input areas on the contact me page*/
input, textarea {

	margin-bottom: 0.5em;

}

/*Adds the check mark and font for the pro area*/
#pros li {

	list-style-image: url(images/checkmarksmall.png);
	font-size: 150%;
	font-family: pressStart, "Times New Roman", serif;
	color: #FFFFFF;

}

/*Adds the x mark and font for the con area*/
#cons li {

	list-style-image: url(images/xmarksmall.png);
	font-size: 150%;
	font-family: pressStart, "Times New Roman", serif;
	color: #FFFFFF;

}


/*dt {
	
	color: #002171;

}*/

/*Controls the font, font size, and color of the footer area*/
footer {

	background-color: #000000;
	color: #7202fA;
	font-size: 100%;
	font-style: italic;
	text-align: center;
	font-family: pressStart, "Times New Roman", serif;
	padding: 2em;

}

	/*Handles color of link in footer*/
	footer a {

		color: white;

	}


/*Controls the font size of the contact me page*/
#contact {
	
	font-size: 90%;
	
}

/*Controls the size of the banner for this page*/
#homehero {
	height: 300px;
	/*background-image: url(images/darktile.png);*/
	background-image: url(images/start.gif);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#abouthero {
	height: 300px;
	/*background-image: url(images/darktile.png);*/
	background-image: url(images/aboutme.gif);
	background-color: #000000;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#cohhero {
	
	height: 300px;
	background-image: url(images/cohbanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	
}

/*Controls the size of the banner for this page*/
#manhunthero {
	height: 300px;
	background-image: url(images/manhuntbanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#halomcchero {
	height: 300px;
	background-image: url(images/halomccbanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#sothero {
	height: 300px;
	background-image: url(images/sotbanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#gtaohero {
	height: 300px;
	background-image: url(images/gtaobanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#mkhero {
	height: 300px;
	background-image: url(images/mkbanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#huntdownhero {
	height: 300px;
	background-image: url(images/huntdownbanner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#twwh3hero {
	height: 300px;
	background-image: url(images/twwh3banner.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the size of the banner for this page*/
#contacthero {

	height: 300px;
	/*background-image: url(images/darktile.png);*/
	background-image: url(images/gameover.gif);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*Controls the border on the table*/
table {
	border-spacing: 0;
	border: solid 2px #b504d9;
	border-collapse: collapse;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;

}

/*Controls the boxes with the pictures inside*/
td {
	padding: 0.5em;
	border: 2px solid #b504d9;
	text-align: center;

}

/*controls the table headers, if I have any*/
th {
	padding: 0.5em;
	border: 2px solid #b504d9;
}

/*Controls the text in the table, if I have any*/
.text{

	text-align: left;

}

/*Controls the colors of the odd tiles, but I decided to go a different direction.
	I kept it in just in case.*/
tr:nth-of-type(odd) {
	background-color: #000000;
}

/*Controls the embedded video*/
video, embed {

	float: right;
	padding-left: 20px;
	margin: 1em;
	padding-bottom: 0;
	position: center;

}

/*Helps to resize images based on the window size*/
img {

	width: 100%;
	height: auto;

}

/*Media settings for a small browser, like a cell phone*/
@media (min-width: 600px) {

	nav ul {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-around;
	}

	/*Controls the positioning of the sections*/
	section {

		margin-left: 2em;
		margin-right: 2em;

	}

	/*Controls the positioning of the form*/
	form {
		display: grid;
		width: 60%;
		/*Adjusts spacing of the font letters from the boxes*/
		grid-template-columns: 13em 1fr;
		grid-template-rows: auto;
		grid-gap: 1em;
		font-size: 100%;
		font-family: pressStart, "Times New Roman", serif;
	}


	/*Controls the size and color of the submit button*/
	#submit {
		grid-column: 2 / 3;
		width: 9em;
		background-color: #7202FA;
		color: #FFFFFF;
		font-family: pressStart, "Times New Roman", serif;
	}

		/*Controls the color of the submit button when hovered over*/
		#submit:hover {

			background-color: #300752;
			color: #FFFFFF;
		}

	/*Controls the positioning of items on the main page*/
	.content main {

		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 1fr;

	}

	/*Controls the positioning of items on the main page*/
	h2 {
		grid-row: 1 / 2;
		grid-column: 1 / 5;
	}

	/*Controls the positioning of items on the main page*/
	section {

		grid-row: 2 / 3;
		grid-column: auto;

		
	}

	/*Controls the positioning of items on the main page*/
	#special{
		
		grid-row: auto; 
		grid-column: 1 / 5;
		margin: auto;
		
	}

	/*Controls the positioning of items on the main page*/
	footer{
		
		grid-row: auto; 
		grid-column: 1 / 5;
		
	}

	/*Controls the positioning of items on the main page*/
	table tr {

		display: block;

	}

		/*Controls positioning of the video player that is embedded*/
	.video-container {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		height: 100%;
	}

	/*Controls positioning of the video player that is embedded*/
	.video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
}

/*Media settings for a medium browser, like a tablet*/
@media (min-width: 1024px) {

	/*Controls the display spacing of the nav menu*/
	nav ul {
		
		display: flex;
		flex-direction: column;
		padding-top: 0;

	}

	/*Controls alignment of the nav menu*/
	nav {

		text-align: left;

	}

	/*Controls positioning of everything within the wrapper*/
	#wrapper {
		
		margin: auto;
		width: 80%;
		/*border: 1px solid #FFFFFF;*/
		border: none;
		/*box-shadow: 3px 3px darkblue;*/
		display: grid;
		grid-template-columns: 180px auto;
		grid-template-rows: auto;
		
	}

	/*Controls positioning of the header*/
	header {
		
		grid-row: 1 / 2;
		grid-column: 1 / 3; 
		
	}

	/*Controls positioning of the menu*/
	nav {
		
		grid-row: 2 / 5;
		grid-column: 1 / 2;
		
	}

	/*Controls positioning of the dividers*/
	div {
		
		grid-row: 2 / 3;
		grid-column: 2 / 3;
		
	}

	/*Controls positioning of the main area*/
	main {
		
		grid-row: 3 / 4;
		grid-column: 2 / 3;
		
	}

	/*Controls positioning of the footer*/
	footer {
		
		grid-row: 4 / 5;
		grid-column: 2 / 3;
		
	}

	/*Controls positioning of the video player that is embedded*/
	.video-container {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		height: 100%;
	}

	/*Controls positioning of the video player that is embedded*/
	.video-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
}