body {background-color: #404040;}

header {background-color: #ffcc99;
		text-align: center;
		font-size: 150%;}

header a {text-decoration: none;}

header a:link {color: #000000;}

header a:visited {color: #000000;}

header a:hover {color: #009999;}

h1 {margin-bottom: .5em;
	margin-top: .5em;
	font-family: Georgia, Times-New-Roman;
	letter-spacing: .2em;}

nav {background-color: #ffe6cc;
		text-align: center;
		font-size: 150%;
		font-weight: bold;}

nav a {text-decoration: none;}

nav ul {list-style-type: none;
		padding-left: 0;
		margin-top: 0;}

nav a:link {color: #603f20;}

nav a:visited {color: #603f20;}

nav a:hover {color: #e65c00;}

nav li {border-bottom: 2px solid #ffcc99;}

main {padding: 1em;}

h2 {font-style: italic;
	font-size: 200%;
	margin-top: .2em}

.heading {font-size: 120%}

.quote {font-style: italic;}

footer {margin-bottom: .5em;
		text-align: center;}

#sts {height: 200px;
		width: 300px;
		background-image: url(sts.jpg);
		background-repeat: no-repeat;
		float: right;}
		
#characters {height: 200px;
				width: 300px;
				background-image: url(characters.jpg);
				background-repeat: no-repeat;
				float: left;
				padding-right: 1em;}

table {border: 2px solid #000000;
		border-collapse: collapse;}

td, th {padding: .5em;
		border: 2px solid #000000;}

td {text-align: center;}

#ironclad {height: 250px;
			width: 500px;
			background-image: url(ironclad.jpg);
			background-repeat: no-repeat;
			float: right;}

#barricade {height: 200px;
			width: 20%;
			background-image: url(barricade.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}

#fiendfire {height: 200px;
			width: 20%;
			background-image: url(fiendfire.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}
				
#silent {height: 250px;
			width: 500px;
			background-image: url(silent.jpg);
			background-repeat: no-repeat;
			float: right;
			margin: .5em;}

#catalyst {height: 200px;
			width: 20%;
			background-image: url(catalyst.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}
			
#calculatedgamble {height: 200px;
					width: 20%;
					background-image: url(calculatedgamble.jpg);
					background-repeat: no-repeat;
					background-size: contain;
					float: right;}

#defect {height: 250px;
			width: 500px;
			background-image: url(defect.jpg);
			background-repeat: no-repeat;
			float: right;}

#electro {height: 200px;
			width: 20%;
			background-image: url(electro.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}

#darkness {height: 200px;
			width: 20%;
			background-image: url(darkness.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}
					
#watcher {height: 250px;
			width: 500px;
			background-image: url(watcher.jpg);
			background-repeat: no-repeat;
			float: right;}
			
#eruption {height: 200px;
			width: 20%;
			background-image: url(eruption.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}
			
#hymn {height: 200px;
			width: 20%;
			background-image: url(hymn.jpg);
			background-repeat: no-repeat;
			background-size: contain;
			float: right;}

#wrapper {margin: auto;
				width: 80%;
				background-color: #fff3e6;
				border: 3px solid #000000;
				box-shadow: 2px 2px 2px #000000;
				display: grid;
				grid-template-rows: auto;
				grid-template-columns: 150px auto;}
				
	header {grid-row: 1/2; grid-column: 1/4;}
	nav {grid-row: 2/5; grid-column: 1/2;}
	main {grid-row: 2/3; grid-column: 2/4;}
	footer {grid-row: 4/5; grid-column: 2/4;}

@media (max-width: 1030px) {
	
	header {grid-row: 1/2; grid-column: 1/4}
	nav {grid-row: 2/3; grid-column:1/4}
	main {grid-row: 3/4; grid-column: 1/4}
	footer {grid-row: 4/5; grid-column: 1/4}
	
	nav ul {display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-around;}
	
		nav li {border-bottom: none;
				margin-top: .5em;}
}

@media (max-width: 700px) {
	
	header {grid-row: 1/2; grid-column: 1/4}
	nav {grid-row: 2/3; grid-column:1/4}
	main {grid-row: 3/4; grid-column: 1/4}
	footer {grid-row: 4/5; grid-column: 1/4}
	
	nav li {border-bottom: 2px solid #ffcc99;}
	
	nav ul {display: flex;
			flex-direction: column;
			margin: 0px;}
	
	#ironclad {width: 100%;
				height: 250px;
				background-size: contain;}
	
	#silent {width: 100%;
				height: 250px;
				background-size: contain;
				margin: 0px}
	
	#defect {width: 100%;
				height: 250px;
				background-size: contain;}
	
	#watcher {width: 100%;
				height: 250px;
				background-size: contain;}
}