/* 2nd copy */

*{box-sizing: border-box;}

#wrapper {background-image: linear-gradient(to bottom, #1d1d1d 85%, #e7cb30 15%);
		background-repeat: no-repeat;
		background-color: #1d1d1d;}
	
	
body{background-color: #1d1d1d;
	color: #f0f0f0;
	font-family: Arial, Helvetica, sans-serif;}
			
header {background-color: #1d1d1d;
		font-size: 120%;
		color: #e7cb30;
		text-align: center;}

header a {text-decoration: none;}

header a:link {color: #e7cb30;}

header a:visited {color: #e7cb30;}
	
header a:hover {color: #f0f0f0;}

h1 {font-family: Georgia, "Times New Roman", serif;
	color: #e7cb30;}


nav {font-weight: bold;
	font-size: 150%;
	text-align: center;}

nav a {text-decoration: none;}

nav a:link {color: #f8f8f8;}

nav a:link.is-active {color: #e7cb30;}

nav a:visited {color: #f8f8f8;}

/*nav a:visited.is-active {color: #e7cb30;}  */
	
nav a:hover {color: #e7cb30;}


nav ul {list-style-type: none;
		margin: 0;
		padding-bottom: .5em;
		word-spacing: .25em;}

	
#theforest {height: 215px;
		background-image: url(theforest.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;}

#forestlogo {height: 215px;
		background-image: url(theforestlogo.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;}
		
#theforestenemies {height: 215px;
		background-image: url(theforestenemies.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;}
		
#theforestmap {height: 215px;
		background-image: url(theforestmap.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;}
		
#endgameboss {height: 215px;
		background-image: url(forestendgameboss.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;}
		

main {background: #1d1d1d;
	display: block;
	overflow: auto;}

h3 {font-family: Georgia, "Times New Roman", serif;
	color: #e7cb30;}
	
section {float: left;
		width: 100%;
		padding-left: 2.5em;
		padding-right: 2.5em;}

.theforest {color: #e7cb30;
		font-weight: bold;}
		
#feedback {
            width: 20%;
			flex-flow: column nowrap;
			display: flex;
            margin-left: auto;
            margin-right: auto;}
	
input[type="submit"] {margin-left: 20%;
					margin-right: 20%;
					padding: 2%;
					width: 5em;}
	

footer {font-family: Georgia, "Times New Roman", serif;
	text-align: center;
	padding-bottom: 25em;
	color: #f0f0f0;
	font-style: italic;}
	
	

@media (min-width: 1024px)
{
	body {background-color: #1d1d1d;}
	
	nav ul {display: flex;
			flex-direction: column;}
	
	nav {text-align: top;}
	
	section {text-align: center;}
	
	footer {text-align: bottom;
			padding-top: 1em;}
		
	#wrapper {margin: auto;
			width: 95%;
			border: 3px solid #1d1d1d;
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: 10% 10% 30% 40% 10%;} 

/* I couldn't get the grid to match how I wanted
	header {grid-row: 1/2; grid-column: 1/3;}
		
	nav {grid-row: 2/3; grid-column: 1/3;}
		
	div {grid-row: 3/4; grid-column: 1/3;}
		
	main {grid-row: 4/5; grid-column: 1/3;}
		
	footer {grid-row: 5/6; grid-column: 1/3;}
*/
}

	
@media (min-width: 600px)
{
	body {background-color: #1d1d1d;}
	
	nav ul {display: flex;
			flex-direction: column;
			flex-direction: row;}
	
	nav {text-align: top;}
	
	section {text-align: center;
			padding-left: 2.5em;
			padding-right: 2.5em;}
	
	footer {text-align: bottom;
			padding-top: 1.5em;}
		
	#wrapper {margin: auto;
			width: 90%;
			border: 2.5px solid #1d1d1d;
			display: grid;
			grid-template-columns: auto;
			grid-template-rows: 15% 15% 20% 35% 15%;} 

}