header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 8%;
	width: 100%;
}

main {
	background-color: white;
	width: 100%;
	z-index: 0;
}

nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	position: fixed;
	top: 35vh;
	right: 20px;
	height: 200px;
	width: 20px;
	z-index: 1;
}

.navItem {
	border-radius: 50%;
	background-color: #e8e8e8;
	height: 10px;
	width: 10px;
}

.navItem.active {
	background-color: gold;
}

h2 {
	font-size: 3rem;
	font-weight: 900;
}

h3 {
	font-size: 2.5rem;
	font-weight: 300;
}

section h3 {
	margin-top: 20px;
}

img {
	margin: 15px auto;
}

figcaption {
	font-size: 0.8rem;
	margin: -12px auto 10px auto;
}

section {
	padding: 2rem 8%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.section-header {
	max-width: 800px;
	position: relative;
	width: 100%;
}

.section-header::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: -2.5rem;
	background-color: gold;
	width: 25px;
	height: 100%;
	transform: rotate(-3deg);
	z-index: -1;
}

section h2 {
	position: relative;
}

hr {
	/* reset */
	border : 0;
	height : 15px;
	background : url(hr.gif) 50% 0 no-repeat;
	margin : 1em 0;
}

section h1 {
	margin: 15px 0;
	padding: 0;
}

section p {
	margin: 10px 0;
	max-width: 800px;
	text-align: left;
}

ol {
	padding-left: 50px;
	font-size: 1.2rem;
	max-width: 750px;
}

ol li {
	margin-bottom: 10px;
}

ol li:last-child {
	margin-bottom: 0;
}

blockquote {
	border-left: 3px solid #ccc;
	margin: 10px 30px;
	padding-left: 10px;
	max-width: 700px;
}

.tags {
	font-size: 0.8rem;
	text-transform: uppercase;
}

section .section-header,
section p,
section h3,
section blockquote,
section ol {
	width: 80%;
	max-width: 800px;
}

@media screen and (min-width: 900px) {
	/* helps with scroll cutoffs while images are rendering*/
	img {
		min-height: 400px;
	}
}

@media screen and (max-width: 900px) {
	section .section-header,
	section p,
	section h3,
	section blockquote,
	section ol {
		width: 100%;
	}

	nav {
		display: none;
	}
}