body {margin: 0; padding: 0; background: #E0E0E0; background: url(images/bg.jpg); font-family: 'Montserrat', sans-serif;/**/}
form {margin: 0; padding: 0;}
hr {margin: 0; height: 1px; border: none; background-color: #000000; color: #000000;}
a {outline: none;}
img {border: none;}
.hidden {display: none;}

/*------  Header  ------------------------------------------------------------------------------*/
.header {background: url(images/cover-bg.png); padding: 10px 20px; margin-bottom: 10px; display: flex; justify-content: space-between; box-shadow: inset 0 -2px 12px #081c1b; border-bottom: 1px solid #e8dda9;}
	@media screen and (max-width: 650px) {header {position: fixed; top: 0; width: 100%; box-sizing: border-box; /* prevents padding from oversizing div */}}
.logo a {font-size: 25px; color: #e8dda9; text-decoration: none;}
.menu_icon {display: none; font-weight: bold; color: #3f3f3f; cursor: pointer; font-size: 28px;}
	@media screen and (max-width: 650px) {.menu_icon {display: block;}}



/*------  Layout  ------------------------------------------------------------------------------*/
.layout {display: flex;} 
	@media screen and (max-width: 650px) {.layout {flex-direction: column; /* height of header */ }}
.sidebar {
	display: block;
	min-width: 180px;
	background-color: #2d2d2d;
	background: url(images/index-card.png);
	padding: 10px 20px 20px 20px;
}
	.sidebar a {display: block;}
	@media screen and (max-width: 650px) {.sidebar {display: none; position: fixed; overflow-y: scroll; height: 400px; width: 100%; box-sizing: border-box; border-radius: 0 0 10px 10px;}}
	
.main {
	flex-grow: 1;	/* stretch */
}

/*------  Menu  ------------------------------------------------------------------------------*/
.menu {}
	.menu a {
		display: block;
		margin: 10px 0;
		color: #042c47;
		font-family: 'Architects Daughter', cursive;
		margin: 20px 0; 
		font-size: 20px;
		text-decoration: none;
	}
	.menu a:hover {color: #0777c1;}
	.menu-button {display: none; font-size: 32px; color: #ffffff; opacity: .8; cursor: pointer;}
	
	@media screen and (max-width: 650px) {
		.menu a {font-size: 22px;}
		.menu-button {display: inline-block;}
	}



/*------  Content  ------------------------------------------------------------------------------*/
.content {
	margin: 0 40px 20px 40px;
	padding: 20px 40px;
	background: url(images/paper.jpg);
	border-radius: 10px;
	box-shadow: 0 0 5px #2d2d2d;
	color: #302e2d;
}
	.content h1 {margin-top: 0;}
	
	@media screen and (max-width: 650px) {.content {margin-left: 0px; margin-right: 0px; padding: 20px 20px; animation-name: none;}}
	h1 {margin-top: 0;}



/*------  Book Cover  ------------------------------------------------------------------------------*/
.book {width: 1000px; margin: 50px auto; padding: 40px 0; background: url(images/cover-bg.png); box-shadow: inset -10px -10px 40px 20px #081c1b, 20px 30px 40px 20px #111111; border-radius: 8px; font-family: 'Montserrat', sans-serif;}
	.book h1 {text-align: center; color: #eac879; font-weight: normal; font-size: 64px; text-shadow: 0 0 6px #081c1b;}
	.book h2 {font-size: 24px; color: #edddb8; font-weight: normal; text-align: center;}
	.book-image {text-align: center;} .book-image img {border: 4px solid #c68c03; border-radius: 5px;}
	.publisher {text-align: right; padding-right: 50px;} .publisher img {opacity: .60;}
	.book-accent {background: url(images/cover-accent.png); padding: 20px 0 10px 0; box-shadow: inset 0 -0px 40px #f7e27b;}
	
	@media screen and (max-width: 650px) {
		.book {width: 100%; margin-top: 0;}
		.book h2 {padding: 0 20px;}
		.book-image img {max-width: 100%; border: none;}
		.publisher {text-align: center; padding-right: 0;}
	}


.table-of-contents {display: flex; justify-content: center; align-content: space-between; flex-wrap: wrap; padding: 20px 40px;}
	.table-of-contents div {margin: 10px 0; padding: 0 10px; width: 300px;}
	.chapter-link {font-size: 22px; font-weight: bold; color: #edddb8;}
	.chapter-description {margin-top: 5px; font-size: 18px; color: #eae3d3;}

/*------  Quiz  ---------------------------------------------------------------------------*/
#quiz li {margin-bottom: 25px;}
.question {font-size: 20px;}
.multiple_choice {margin-bottom: 10px; font-size: 18px;}
	.multiple_choice label {cursor: pointer;}
	.multiple_choice input {cursor: pointer; width: 20px; height: 20px;}
.right-answer {padding: 10px; border-radius: 5px; box-shadow: inset 0 0 20px 4px green;}
.wrong-answer {padding: 5px; border-radius: 5px; border: 5px solid #CC0000;}
#all-correct {display: none; margin: 0 10px; font-size: 48px;}

/*------  Buttons  ---------------------------------------------------------------------------*/
.quiz-button {
	display: inline-block;
	background-color: #3162b7;
	border: none;
	padding: 10px 40px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
	.quiz-button:hover {background-color: #2b56a0;}
	
.check-answers-button {
	display: inline-block;
	background-color: #0c9e52;
	border: none;
	padding: 10px 40px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 16px;
	border-radius: 5px;
	text-decoration: none;
	cursor: pointer;
}
	.check-answers-button:hover {background-color: #227f4f;}
	
	



/*------  Footer  ----------------------------------------------------------------------------*/
footer {
	background-color: #98799e;
	color: #ffffff;
	text-align: center;
}