* {box-sizing: border-box;}

header {text-align: center;
		letter-spacing: .25em;
		color: #ffffff;
		padding: .8em;
		background-color: #006600;}

h1 {font-family: Garamond;}
		
nav {float: left;
		color: #006600;
		font-weight: bold;
		background-color: #ffffff;
		margin: 0;
		height: 100%;
		font-family: Garamond;}

nav a {text-decoration: none;}
nav a:link {color: #006600;}
nav a:visited {color: #009900;}
nav a:hover {color: #a52a2a;}
		
nav ul {list-style-type: none;
		margin: 0;
		display: flex;
		flex-flow: column;
		padding: 1em;
		font-size: 1.4em;}
		
main {text-align: center;
		padding: 0;
		float: none;
		display: block;
		overflow: auto;
		background-position: center;}
h2 {background-color: #ffffff;
	color: #007000;
	padding: .8em;
	margin: auto;
	font-family: Garamond;}
		
p {font-size: 1.3em;
		color: #009900;
		background-color: #ffffff;
		width: 100%;
		margin: auto;
		padding-bottom: 1em;
		font-family: Garamond;}
		
p a:link {color: #006600;}
p a:visited {color: #009900;}
p a:hover {color: #a52a2a;}
		
footer {background-color: #ffffff;
		font-size: 75%;
		font-style: italic;
		text-align: center;
		padding: 2em;
		background-image: linear-gradient(to bottom, #515155, #313133);
		background-repeat: no-repeat;
		text-shadow: 1px 1px 2px #ffffff;
		}
		
footer a:link {color: #006600;}
footer a:visited {color: #009900;}
footer a:hover {color: #a52a2a;}
		
#wrapper {background-color: #313133;
		margin: auto;
		border-style:dashed;
		border-width: 3px;
		border-color: #006600;}
	
#books {height: 300px;
		background-image: url(books.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;}
		
#fantasy {height: 300px;
		background-image: url(fantasy.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;}
		
#scifi {height: 300px;
		background-image: url(scifi.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;}
		
#horror {height: 300px;
		background-image: url(horror.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;}
		
#favorites {height: 300px;
		background-image: url(favorites.jpg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;}
		
#space {margin: auto;
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #ffffff, #515155);
		background-repeat: no-repeat;
		padding: 5em;
		width: 100%;}

#video {margin: auto;
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #ffffff, #b1b1bb);
		background-repeat: no-repeat;}
		
#extra {background-image: linear-gradient(to bottom, #b1b1bb, #919199);
		background-repeat: no-repeat;}
		
.ul {text-decoration: underline;}
		
table {margin: auto;
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #ffffff, #515155);
		background-repeat: no-repeat;
		padding: 1em;
		width: 100%;
		color: #009900;
		text-shadow: 1px 1px 2px #ffffff;
		border: 2px solid #313133;
		border-collapse: collapse;}	
		
td, th {padding: .5em;
		border: 2px solid #313133;}

tr:nth-of-type(odd) {Background-color: #efffef;}

tr:nth-of-type(even) {Background-color: #cfddcf;}

tr {padding-bottom: 1em;}		
		
div {padding: 1em;}

form {display: flex;
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #919199, #515155);
		background-repeat: no-repeat;
		color: #009900;
		text-shadow: 1px 1px 2px #ffffff;
		flex-flow: column nowrap;
		display: grid;
		grid-gap: 1em;
		grid-template-columns: 6em 1fr;
		grid-template-rows: auto;
		width: 60%;
		margin: auto;
		padding: .5em;
		padding-left: 10em;
		padding-right: 10em;
		width: 100%;
		text-align: center;}
input, textarea {margin-bottom: .5em;}

@media (max-width: 600px) {
	
	body {display: flex;
	flex-flow: row no-wrap;
	justify-content: space-around;
	}
}

@media (max-width: 1024px) {

	body {display: flex;
			flex-flow: column;
	}

}