@media screen and (min-width: 1500px) {
	body {
		width: 1000px;
		margin-left: 400px;
	}

	.sidenav {
		position: absolute;
		left: 400px;
		width: 180px;
		height: 600px;
	}

	main {
		margin-left: 210px;
	}

	footer {
		margin-left: 200px;
	}
}

@media screen and (min-width: 1020px) and (max-width: 1499px) {
	body {
		width: 1000px;
		margin-left: none;
	}

	.sidenav {
		position: absolute;
		left: 8px;
		width: 180px;
		height: 600px;
	}

	main {
		margin-left: 210px;
	}

	footer {
		margin-left: 200px;
	}
}

@media screen and (max-width: 1019px) {
	body {
		width: 100%;
		margin-left: none;
	}

	nav a {
		line-height: 50px;
	}

	#logo {
		width: 20%;
	}

	#banner {
		width: 80%;
	}

	main {
		margin-left: none;
	}

	footer {
		margin-left: none;
	}
}

body {
	color: white;
	background: black;
	font-family: monospace;
}

a {
	color: #f00;
}

nav {
	background: white;
	padding: 10px;
}

nav a {
	font-size: 15pt;
	color: white;
	background: #800;
	padding: 5px;
}

nav a:hover {
	color: #800;
	background: white;
	box-shadow: #800 0 0 0 5px;
}

.sidenav {
	background-image: linear-gradient(-45deg, #000, #fff);
	padding: 10px;
	font-weight: bold;
	text-shadow: -1px 0 #444, 1px 0 #aaa, 0 -1px #444, 0 1px #aaa, -1px -1px black, -1px 1px #888, 1px -1px #888, 1px 1px white;
}

.sidenav a {
	font-size: 15pt;
	color: #800;
}

.sidenav a:hover {
	color: #f00;
}



footer {
	padding: 10px;
	background: #444;
}