@charset "utf-8";

@font-face {
	font-family: NeatPixels;
	src: url('NeatPixels.ttf') format('truetype');
}

/* Base Styles */

html {
	background: url("r8_overworld_background_02_1080p.png") center center no-repeat;
	background-size: cover;
}

body {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 960px;
	min-width: 640px;
	width: 60%;
	line-height: 2.2em;
	padding: 10px;
	font-family: NeatPixels, Impact, sans-serif;
	color: green;
}



h1 {
	text-align: center;
	padding-top: 10px;
}

p {
	
	padding-left: 10px;
}

h2 {
	padding-left: 25px;
}

article{
	background-color: rgb(143, 222, 93);
	margin: 60px 0px 30px 0px;
}

/* Nav Styles */

nav.horizontal {
	display: block;
	background-color: rgb(61, 110, 112);
	height: auto;
	width: 100%;
}

nav.horizontal ul {
	text-align: center;
	width: 100%;	
}


nav.horizontal li {
	display: block;
	float: left;
	background-color: rgb(207, 255, 112);
	font-family: NeatPixels, Impact, sans-serif;
	font-size: 1.4em;
	line-height: 2em;
	list-style-type: none;	
	width: 25%;
}

nav.horizontal li a {
	color: green;
	display: block;
	width: 100%;
}

nav.horizontal li a:hover, nav.horizontal li a:active {
	color: white;
	background-color: green;
}
 
ul#skills {
	list-style-image: url(RightArrow.png);
	padding-left: 70px;
}

a:hover, a:active {
	color: green;
	text-decoration: underline;
}

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

footer {
	background-color: rgb(207, 255, 112);
	display: block;
	float: left;
	padding: 10px;
	width: 100%
}

body > footer > nav.vertical {
	float: left;
	width: 100%;
	background-size: cover;
}


footer nav a {
	text-decoration: underline;
}

footer a:visited, footer a:link {
	color: green;
}

footer a:hover, footer a:active {
	color: white;
}

footer::after {
   clear: both;	
   content: "";
   display: table;
}