/* CSS Reset */

html, body, h1, h2, h3 nav, ul, li, header, p, div {
	padding: 0;
	margin: 0;
}

html {
	width: 100%;
	min-width: 100%;
	background-color: rgb(245,245,245);
	/* background-color: #D5E1DD; */
	font-size: 1em;
	font-family: "Fira Sans Condensed", sans-serif;
	overflow-x: hidden;
}

body {
	/* background-color: inherit; */
	width: 97%;
	min-width: 97%;
	margin-right: auto;
	margin-left: auto;
}


h1, h2, h3 {
	font-family: Pangolin, cursive;
	color: #F2583E;
}
h1 {
	font-size: 3em;
}

h2 {
	font-size: 2.2em;
	text-align: center;
}

h3 {
	text-align: center;
	font-size: 1.4em;
	font-style: italic;
}

p {
	color: #2B3E42;
}

nav {
	position: fixed; 
	top: 0;
	left: 1%;
	right: 1%;
	background-color: #F7F3E8;
	padding: 10px;
	margin: 10px; 
	overflow: hidden;

}


nav ul {
	list-style-type: none;
	display: inline-block;
	text-align: center;
	width: 99%;
	

}

nav ul li {
	display: inline-block;
	text-align: center;	
}

nav ul li p {
	display: inline;
	text-align: center;
	position: static;
}

nav ul li::first-letter {
font-size: 1.6rem;	

}

header {
	padding-top: 15%; 
	background-color: #D5E1DD;
	width: 100%;
}

header h1, header h2, header h3 {
	text-align: center; /* Placeholder center until I know I need it on other h1 tags */
}


header p {
	font-size: 1.5em;
	margin-top: 5%;
}

.center {
	text-align: center;
}

#main {
		background-color: #D5E1DD;
		height: 1200px;
}

.slide1 {
	width: 100%;
	height: 1200px;
	background-color: #2B3E42; 	
	background-attachment: scroll;
	text-align: center;
	padding-top: 2.5%; 
	overflow: hidden;
}

.slide1 img {
	width: 2rem;
}

.slide1 h2 {
	text-align: center;
}

.aside1 {
	float: left;
	width: 50%;
	background-color: #2B3E42; 	
}

.aside1 h3 {
	font-size: 1.6em;
	margin-left: 10px;
	text-align: center;
}

.aside1 p {
	color: #F2583E;
	margin-left: 10px;
	padding: 5px 0;
	font-size: 1.5rem;
}

.aside2 {
	width: 50%;
	float: right;
	background-color: #2B3E42; 
}

.aside2 h3 {
	font-size: 1.6em;
	margin-left: 10px;
	text-align: center;
}

.aside2 p {
	color: #F2583E;
	margin-left: 10px;
	padding: 5px 0;
	font-size: 1.5rem;
}

.interests {
	clear: both;
	width: 100%;
	margin-top: 80px;
}

.interests p {
	color: #F2583E;
	font-size: 1.5rem;
	margin-top: 5px;
}

.interests img {
	width: 2rem;
}


.projects {
	width: 100%;
	height: 3500px;
	background-color: #F7F3E8;
	padding-bottom: 500px;
}

.projects h2 {
	padding-top: 30px;
}

.project1 img {
	margin-top: 28px;
	margin-left: 15px;
	width: 100%;
}

.projects p {
	margin-left: 15px;
	margin-top: 10px;
	padding-right: 30px;
}

.project1 {
	width: 49%;
	float: left;
}

.project2 {
	width: 49%;
	float: right;
}

.project2 img {
	margin-top: 28px;
	margin-left: 15px;
	width: 100%;
}

.project1 a:hover, .project2 a:hover {
	opacity: 0.7; 
}

.border {
	border: 0.5px solid black;
}

.footer {
	clear: both;
	width: 100%;
	height: 600px;
	background-color: #747E80
}

.footer h2 {
	text-shadow: 2.5px 2.5px 2.5px black;
	padding-top: 50px;
}

.footer p {
	color: #77BED2;
	text-shadow: 2.5px 2.5px 2.5px black;
	font-size: 1.6rem;
	text-align: center;
	margin-top: 100px;
}

#note {
	font-size: 1rem;
}