* {
    font-family: "Avenir Next Medium", Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    letter-spacing: normal;
}

body {
    background-image: url("media/images/Green Drafting Paper 2 Cropped.jpg");
    background-repeat: no-repeat;
    background-color: #f3e8d2;
    background-size: cover;
}

a:link { color: inherit; }
a:visited { color: #414141; }
a:hover { color: #5A5A5A; }
a:active { color: #414141; }

#sidebar a:link { color: inherit; text-decoration: inherit; }
#sidebar a:visited { color: #414141; }
#sidebar a:hover { color: #5A5A5A; }
#sidebar a:active { color: #414141; }

#home a {
	color: inherit;
	text-decoration: inherit;
}

.project-link {
	text-decoration: inherit;
}

nav {
    text-transform: lowercase;
}

nav ul {
    padding: 1em;
    list-style-type: none;
    text-wrap: normal;
    font-size: 18px;
    text-align: right;
}

nav li { padding-bottom: 0.25em; }

#boxes {
/*	content: "";*/
	width: 100%;
 	display: table;
 	clear: both;
}

#sidebar {
    float: left;
    width: 12%;
}

/* Headers and Paragraphs */

.name-header {
	text-align: center;
	font-size: 6vw;
	padding: 0.6em;
}

.content-header {
	font-size: 48px;
	text-align: center;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}

p {
	font-size: 18px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.verse {
	padding-top: 0px;
	padding-bottom: 0px;
}

.home-p { /* Text at bottom right corner of home page */
    text-align: right;
/*	padding-top: 50vh;*/
	padding-top: 0vh;
	padding-right: 3em;
    font-size: 48px;
}

/* Structure */

.content-box {
	float: right;
    width: 88%;
}

.content {
	align-content: center;
	margin-left: 10%;
	margin-right: 10%;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom: 3%;
	padding-top: 1%;
	background-color: #f3e8d2;
}

.content-title {
	text-align: center;
	padding: 10px;
	padding-bottom: 5px;
    letter-spacing: 0.25em;
}

.project-box {
	display: flex;
	flex-wrap: wrap;
	margin-left: 10%;
	margin-right: 10%;
}

.project {
	flex: 300px;
	text-align: center;
	background-color: #f3e8d2;
	padding: 20px;
}

.project-thumbnail {
    outline-style: solid;
    outline-width: 10px;
	height: 250px;
}

.project-subtitle {
	font-size: 18px;
	font-style: italic;
	padding-bottom: 1em;
}

.img-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

.project-img {
	flex: 200px;
    outline-style: solid;
    outline-width: 10px;
	width: 40%;
	margin: 2em;
	margin-top: 1em;
}

.project-vid {
	flex: 200px;
    outline-style: solid;
    outline-width: 10px;
	width: 40%;
	margin: 2em;
}

.project-iframe {
	width: "560";
	height: "315";
    outline-style: solid;
    outline-width: 10px;
	margin: 2em;
	margin-top: 1em;
}

.home-iframe {
	width: "560";
	height: "315";
    outline-style: solid;
    outline-width: 10px;
	margin: 2em;
	margin-top: 1em;
}

.img-subtitle {
	text-align: center;
	font-size: 18px;
	font-style: italic;
}

/* Color Highlights */

.engineering {
	background-color: #fbaf5d;
	outline-color: #fbaf5d;
}

.design {
	background-color: #8cbf86;
	outline-color: #8cbf86;
}

.writing {
	background-color: #7da7d9;
	outline-color: #7da7d9;
}


/* Mobile */
@media (max-width: 320px) {
	.project-box {
		margin-left: 10%;
		margin-right: 10%;
	}

	.project {
		padding: 20px;
	}

	.project-thumbnail {
		outline-width: 10px;
		height: 200px;
	}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
	.project {
		padding: 20px;
	}

	.project-thumbnail {
		outline-width: 10px;
		height: 200px;
	}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
	.project-box {
		display: flex;
		flex-wrap: wrap;
	}

	.project {
		flex: 200px;
	}

	.project-thumbnail {
		height: 250px;
	}
}