/*CSS document*/
	
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;}
	
	
body {
	color: #333;
	margin: 1em auto;
	line-height: 1.6em;
	background-color: #fafafa;
	font-family:  aktiv-grotesk, Helvetica, serif;
	padding-bottom: 2em;
	}
	
img {
	max-width: 100%;
	display: block;
	}
	
div.container {
	max-width: 60em;
	padding: 0 1.5em;
	margin: auto;
	}
	
a {
	color: #a22;
	text-decoration: none;
	border-bottom: dotted 1px;
	padding-bottom: .2em;
	}

nav a {
	border-bottom: none;
	}	
	
a:hover, a.booklinks:hover {
	color: #e22;
	}

	
a.booklinks {
	color: #737373;
	padding: 0.05em 0;
	border-top: dotted 1px;
	margin-right: .6em;
	font-size: 0.6em; 
	text-transform:uppercase;
	font-weight: bold;
	}

li p {
	margin: .2em 0 2em;
	line-height: 1.4em;
	}

h2 a, h3 a, h4 a {
	font-weight: normal;
	color: #a22;
	}
	
	
h1, h2, h3, h4, h5, h1 a, nav ul li a, h5 a  {
	color: #333;
	border: none;
	}
	
h1, h2, h3, h4, h5 {
	font-weight: bold;
	line-height: 1.2em;
	}
	
p, h2, h3, h4, h5 {
	max-width:36em;
	margin-bottom:1em;
	}
	
ul li {
	list-style-type: none;
	padding: 0;
	}
	
h1 {
	font-size: 1.2em;
	margin-bottom: 1em;
	}
	
h2 {
	font-size: 2em;
	margin: 2em 0 1em;
	}
	
h3 {
	font-size: 1.1em;
	margin: 1em 0 0 0;
	}
	
h4 {
	font-size: 1.1em;
	margin: 2em 0 0 0;
	}
	
h5 {
	font-size: 1em;
	margin: 2em 0 0 0;
	}

strong {	
	font-weight: bold;
	}

em {
	font-style: italic;
	}
	
nav ul li {
	display: inline;
	margin-right: 2em;
	}

nav ul.submenu li {
	display: block;
	}

nav ul.submenu {
	margin-top: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid;	
	}

nav ul li.selected a {
	color: #a22;
	}
	
header {
	margin-top: 2.25em;
	margin-bottom: 3em;	
	padding-bottom: 1em;
	border-bottom: 1px solid;
	}

main {
	max-width: 36em;
	margin: auto;
	}	

li h2 {
	font-size: 1em;
	margin-bottom: 0;
	}
	
.musthave { 
	font-size: 0.7em; 
	background-color: #555; 
	color: #fff; 
	line-height:0.7em; 
	text-transform:uppercase;
	padding: .2em 0 0;
	}


p.btn {
	margin-top: 1.5em;
	}

p.btn a {
	color: #fafafa;
	background: #070;
	padding: 0.5em;
	border-radius: 2px;
	font-weight: bold;
	}

		
@media only screen and (min-width: 60em) {
	
	header {
		display: grid;
		grid-template-columns: 12em auto;
		}

	div.container {
		min-height: 100vh;
		}

}	

@media screen and (prefers-color-scheme: dark) {

html, body {
		background: #222;	
		color: #ccc;
	}
	
	
h1, h2, h3, h4, h5, h1 a, h5 a  {
		color: #eee;
		border: none;
		}

nav ul li a {
		color: #ccc;
		}

nav ul li.selected a, a {
		color: #aa2;
		}
	

body {
		line-height: 1.8em;
		}
 
li p {
	margin: .2em 0 2em;
	line-height: 1.6em;
	}
}