h1 {font-size: 24px}

.sidenav {
	font-family: sans-serif;
	height:100%;
	width:33%;
	max-width: 150px;
	position: fixed;
	background-color: #111;
	overflow: auto;
}

.sidenav hr {
	width:75%;
}

.sidenav h1 {
	padding: 0px 12px 0px;
	text-decoration:none;
	font-size: 20px;
	color:#818181;
	display:block;
}

.sidenav li {
	text-align: center;
	padding: 6px 12px 6px;
	text-decoration:none;
	font-size: 20px;
}

.sidenav a {color:#818181;}

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

article, nav.blog-toc {
	font-family: sans-serif;
	margin-left: 150px;
	margin-right: 28%;
	padding: 1px 12px;
}


section {
	margin-left: 20px;
	margin-right: 0px;
	padding: 0px 0px;
}

section > h2 {
	font-size: 20px;
	padding-bottom: 0px;
	padding-top: 5px;
}

section > p {
	padding-top: 0px;
	margin-left: 30px;
}

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

nav.blog-toc li {padding: 4px 0px}

a {text-decoration: none;}

article > h1 {font-size: 24px;}

article > h2 {font-size: 20px;}

@media screen and (max-width: 700px) {
	.sidenav {
		width: 100%;
		max-width: 100%;
		height: auto;
		position: relative;
	}
	.sidenav li {float: left;}
	.sidenav h1 {text-align: center;}
	article, nav.blog-toc {
		margin-left: 0;
		margin-right: 0;
	}
}

@media screen and (max-width: 400px) {
	.sidebar li {
		text-align: center;
		float: none;
	}
}