@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik+Mono+One&display=swap');

nav, header, footer, div, article{
	box-sizing: border-box;
}

body {
  margin: auto 10%;
  height: 100%;
  background-color: tan;
}

#wrapper {
  display: flex;
  flex-direction: column;
}

#content-wrapper {
  display: flex;
  flex: 1; 
}

#main-content {
  flex: 80; 
  background-color: white;
  padding:1%;
}

#sidebar {
	flex: 20; 
	background-color: #8A9A86;
	padding: 1%;
}

#header-nav{
	display: flex;
	align-items: center;
	flex-direction: column;
	background-image: url('banner.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom:1%;
	margin-top: 1%;
	padding: 0 5% 2% 0;
	/*https://pixabay.com/images/download/x-5704083_1920.jpg*/
}

nav ul{
	display: flex;
	flex-direction: row;
	gap: 2em;
	padding: 0;
	margin: 4% 0;
}

header{
	color: ivory;
}

#sidebar ol{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2em;
}

li{
	list-style: none; 
}

li a{
	color: #F5EAD4;
	font-weight: bolder;
	font-size: 1.3em;
}

li.nav-item a:link{
	color: white;
}

li.nav-item a:visited{
	color: orange;
}

li.nav-item a:hover{
	color: white;
	background-color: skyblue;
}

li.nav-item a:active{
	color: orange;
}

#sidebar h3{
	margin: 0;
}

figure{
	float: left;
	width: 35%;
	margin: 1% 2% 0 0;
}

figure>img{
	width: 100%;
}

blockquote{
	font-size: 1.5em;
	font-family: serif;
	line-height: 1.5em;
	margin: 4% 0 4% 6%;
}

blockquote:before{
	vertical-align: -.35em;
	line-height: 0;
	font-size: 4em;
	content: "\201C";
}

#main-content p{
	line-height: 1.3em;
}

table{
font-family: 'Roboto', sans-serif;
}

table, caption{
	background-color: navy;
}

thead, tfoot{
	background-color: silver;
}

tbody{
	background-color: skyblue;
}

caption{
	color: ivory;
}

table, th, td {
	border: 1px solid black;
}
	
h1{
	font-family: "Playfair", serif;
	font-weight: bold;
	font-style: italic;
	color: #F5EAD4;
	font-size: 5em;
	padding: 0;
	margin: 2% 0 0 0;
}
header h2{
	padding: 0 0 0 9%;
	margin: -0.5em 0 0 0;
	color: #F5EAD4;
}

.citations{
	display: flex;
	flex-direction: column;
	padding: 0;
	background-color: #8A9A86;
	gap: 1em;
}