/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	line-height: 1.5;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* end reset*/

body {
	font-size: 18px;
	font-family: comfortaa, monospace;
	background-color: #D1F6D6;
	/*Light green almost teal */
	color: #678A6C;
}

body a:link,
body a:visited {
	text-decoration: none;
}

body a:hover {
	font-weight: bold;
}

#wrapper {
	max-width: 900px;
	margin: 2% auto;
	padding: 2%;
}

header {
	margin: auto;
	display: grid;
	grid-template-rows: 5fr 1fr;
	text-align: center
}

header h1 {
	font-size: 35px;
	padding: 1%;
	font-family: fjalla one, monospace;
	line-height: 2em;
	font-weight: bold;
}

header a {
	text-decoration: none;
	color: #A86D7D;;
}

nav {
	font-size: 20px;
	padding: 2%;
	background-color: #F2FFF4;
	border-radius: 15px;
}

nav ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2px;
}

nav li a {
	display: block;
	text-align: center;
	text-decoration: none;
	color: #A86D7D;
}

#grid-container {
	display: grid;
	grid-template-rows: 1.2fr 0.8fr 0.65fr;
}

#main {
	padding: 5%;
	text-align: center;
}

	#me-cover {
		width: 85%;
		max-width: 550px;
		border-radius: 15px;
	}

#second {
	padding: 5%;
	margin: 5%;
	text-align: left;
	text-indent: 1.5em;
	font-size: 1.2em;
	background-color: #F2FFF4;
	border-radius: 15px;
}

#third {
	padding: 5%;
	text-align: center;
	display: grid;
	grid-template-columns: 1.1fr 1fr 1.1fr;
}

	#projects {
		padding: 7%;
	}

		#videogameworks {
			width: 100%;
			margin: auto;
			max-width: 250px;
			border-radius: 15px;
		}

			#projects a {
				color: #A86D7D;
			}

	#contactme {
		margin: auto;
		padding: 8%;
		background-color: #F2FFF4;
		border-radius: 15px
	}

		#contactme a {
			color: #678A6C;
		}

	#art {
		padding: 7%;
	}

		#websiteworks {
			width: 100%;
			padding: 2%;
			max-width: 250px;
			border-radius: 15px;
		}

			#art a {
				color: #A86D7D;
			}


/* Home page code ends */

#main-w {
	margin: 5% auto;
	padding: 2%;
	text-align: center;
	background-color: #F2FFF4;
	border-radius: 15px;
}

	#main-w p {
		padding: 3%;
		font-size: 1.4em;
	}

	#games {
		padding-top: 2%;
		padding-bottom: 2%;
		display: grid;
		grid-template-rows: 1fr 1fr 1fr 1.8fr;
		grid-template-columns: 1fr 1fr;
		grid-gap: 2%;
	}

		#atari {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#atari-pic {
				width: 85%;
				max-width: 250px;
			}

		#nes {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#nes-pic {
				width: 85%;
				max-width: 250px;
			}

		#saturn {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#saturn-pic {
				width: 85%;
				max-width: 250px;
			}

		#ps1 {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#ps1-pic {
				width: 85%;
				max-width: 250px;
			}

		#xbox {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#xbox-pic {
				width: 85%;
				max-width: 250px;
			}

		#gamecube {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#gamecube-pic {
				width: 85%;
				max-width: 250px;
			}

		#ps2 {
			margin: auto;
			max-width: 250px;
		}

			#ps2-pic {
				width: 45%;
				max-width: 250px;
			}

		#tv {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#tv-pic {
				width: 65%;
				max-width: 250px;
				border-radius: 15px;
			}

#second-w {
	margin: 8%;
	padding: 2%;
	text-align: center;
	background-color: #F2FFF4;
	border-radius: 15px;
}

	#second-w p {
		margin: 2% auto;
		padding: 3%;
		font-size: 1.4em;
	}

	#otherworks {
		margin: auto;
		padding-top: 2%;
		display: grid;
		grid-template-rows: 0.8fr 0.8fr 1.5fr;
		grid-gap: 2%;
	}

		#hs {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#hs-pic {
				width: 65%;
				max-width: 250px;
				border-radius: 15px;
			}

		#aura {
			margin: auto;
			padding: 2%;
			max-width: 250px;
		}

			#aura-pic {
				width: 95%;
				max-width: 250px;
			}

		#infogr {
			margin: auto;
			padding: 8%;
			max-width: 250px;
		}

			#infogr-pic {
				width: 85%;
				max-width: 250px;
			}
/* Work page code ends */

#main-l {
	margin: 5% auto;
	padding: 8%;
	text-align: center;
	background-color: #F2FFF4;
	border-radius: 15px;
	display: grid;
	grid-template-rows: 1fr 0.8fr 1.8fr 1fr;
}
	#main-l a {
		color: #678A6C;
	}

		#bb {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

		#rec {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

		#nar {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

		#luigi-pic {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}


/*Link page code ends */

#main-c {
	margin: 5%;
	padding: 8%;
	text-align: center;
	background-color: #F2FFF4;
	border-radius: 15px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
}
	#main-c a {
		color: #678A6C;
	}

		#twitter {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

		#instagram {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

		#linkedin {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

		#xbox {
			width: 95%;
			margin: 2% auto;
			padding: 3%;
			max-width: 250px;
		}

footer {
	padding: 10%;
	text-align: center;
	font-size: 0.7em;
}

/* desktop styles*/

@media only screen and (min-width: 600px) {
	
	header {
		grid-template-rows: 3.5fr 0.5fr;
	}

	header h1 {
		font-size: 300%;
	}

	nav {
		font-size: 140%;
	}

	#second {
		font-size: 180%;
	}

	#third {
		font-size: 120%;
	}

	#main-w {
		font-size: 160%;
	}

	#second-w {
		font-size: 160%;
	}

	#aura {
		max-width: 400px;
	}

	#aura-pic {
		width: 110%;
		max-width: 400px;
	}

	#infogr {
		max-width: 500px;
	}

	#infogr-pic {
		width: 110%;
		max-width: 400px;
	}

	#main-l {
		font-size: 150%;
		grid-template-rows: 1fr 1fr 2.1fr 1fr;
	}

	#bb {
		max-width: 500px;
	}

	#rec {
		max-width: 500px;
	}

	#nar {
		max-width: 500px;
	}

	#luigi-pic {
		max-width: 500px;
	}

}


/*Closes desktop styles*/