/* Stylesheet */

/*
Blue:	#7F97CD
Yellow:	#D9C36C
Green:	#79883D
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Source+Serif+Pro&display=swap');


* {
	box-sizing:			border-box;
}

body {
	margin:				0;
	padding:			0;
	font-family:		"Open Sans", Arial, Helvetica, sans-serif; /* Georgia, */
	font-size:			16px;
	color:				#383838;
	background-color:	#fff;
	background:			#fff url("images/tandem-icon2.png") no-repeat fixed center center/70%;
}

main {
	max-width:			65em;
	margin: 			0 auto;
}

section {
	margin:				0;
	padding:			3em 1em 0 1em;
	border:				1px solid transparent;
}
	
	section img {
		width:			100%;
		height:			100%;
		max-width:		640px;
		max-height:		480px;
		border:			6px solid #D9C36C;
		box-shadow: 	-3px 3px 8px 2px #c0c0c0;
		margin:			5em 0 0 0;
	}
	
	section p {
		margin:			1.5em 0 0 0;
		font-size:		1.2em;
		line-height:	1.7em;
	}
	
	section h1 + p, section h2 + p {
		text-indent:	0.75em;
	}
	
	section ul {
		list-style-type:none;
		margin:			2.5em 0 2.2em 0.75em;
		padding: 		0;
	}
	
	section ul li {
		margin: 		0 0 0.6em 0;
		padding: 		0;
		font-size:		1.2em;
		font-style:		italic;
	}
	
	section ul li:before {
		content: 		"\2714\0020";
		color:			#79883D;
	}

footer {
	margin:				10em 0 0 0;
	padding:			2em 1em 1em 1em;
	color:				#fff;
	background-color: 	#79883D;
}

	footer address {
		font-size:		1.5em;
		line-height:	2em;
		padding-top:	1em;
		border-top:		15px solid #fff;
	}
	
	footer p {
		padding-top:	3em;
		font-size:		1em;
		line-height:	1.7em;
		margin-top:		3em;
		border-top:		15px dashed #fff;
	}

h1, h2, h3, h4, h5, h6 {
	font-family:		'Source Serif Pro', 'Times New Roman', Georgia, serif;
}

h1 {
	font-size:			3.5em;
	font-weight:		bold;
	color:				#79883D;
}

h2 {
	font-size:			2.2em;
	color:				#000;
	margin:				2em 0 0 0;
}

i {
	margin:				0 0.5em 0 0;
}

a {
	color:				navy;
}

.center {
	text-align:			center;
}

/* Responsify */
@media screen and (max-width: 750px) {
	h1 {
		font-size:		3em;
	}
	
	h2 {
		font-size:		1.8em;
	}
	
	/*section p {
		font-size:		1.3em;
	}*/
} 


/* Style the nav bar */
.topnav {
	background-color: 	#79883D;/* Add a background color to the top navigation */
	overflow: 			hidden;
	position: 			fixed;	/* Set the navbar to fixed position */
	top: 				0;		/* Position the navbar at the top of the page */
	width: 				100%; 	/* Full width */
	border-bottom:		8px solid #7F97CD;
	box-shadow: 		2px 1px 10px rgba(0,0,0,0.6);
}

	/* Style the links inside the nav bar */
	.topnav a {
		float:				left;
		display:			block;
		font-family:		'Source Serif Pro', 'Times New Roman', Georgia, serif;
		color:				#f2f2f2;
		text-align:			center;
		padding:			1em 1.2em;
		text-decoration: 	none;
		font-size:			1.3em;
	}

	.topnav a:hover {
		font-style:			italic;
	}

	.topnav a.active {
		background-color: 	#7F97CD;
		color: 				#fff;
		font-style:			italic;
	}

	/* Hide the link that should open and close the topnav on small screens */
	.topnav .icon {
		display: 			none;
	}
	
	.topnav img.nav-icon {
		width:				100%;
		max-width:			30px;
	}

/* When the screen is less than X pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 750px) {
	.topnav a:not(:first-child) {
		display: 		none;
	}

	.topnav a.icon {
		float: 			right;
		display: 		block;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 750px) {
	.topnav.responsive {
		/*position: 		relative;*/
	}

	.topnav.responsive a.icon {
		position: 		absolute;
		right: 			0;
		top: 			0;
	}

	.topnav.responsive a {
		float: 			none;
		display: 		block;
		text-align: 	left;
	}
} 

/* Shrink menu on small screens with low height to prevent menu items from becoming unreachable */
@media screen and (max-height: 600px) {
	.topnav a {
		font-size:		1em;
	}
}