/* */
/* reset browser styling */
/* */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	padding: 0;
	margin: 0;
}
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 13px;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset,
img {
	border: 0;
}
header {
	/*position: fixed;
    background-color: white;
    z-index: 1; */
}
.header-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 3em 2em 2em 2em;
	width: 640px;
}
.body-container {
	padding: 0em 2em 0em 2em;
	max-width: 1280px;
}
nav a {
	color: black;
	text-decoration: none;
	margin-left: 2em;
}
nav a:first-of-type {
	margin-left: 0;
}
.active {
	text-decoration: underline;
}
a:link {
  	color: black;
	text-decoration: none; 
}
a:visited {
  	color: black;
	text-decoration: none; 
}
p {
	
	font-style: normal;
	text-decoration: none;
	margin: 0.2em 0px 1em 0em;
}
footer {
	color: black;
	font-family: "Lucida Console", Courier, monospace;
	font-style: normal;
	text-decoration: none;
	font-size: 10px;
	padding: 2em 0px 2em 2em;
}
span {
	color: black;
	text-decoration: none;
	margin: 0.2em 2px 4em 0;
}
span a {
	color: black;
	text-decoration: none;
	margin: 0.2em 2px 4em 0;
}
/* */
/* breadcrumbs */
/* */

.breadcrumbs {
	padding: 3em 2em 2em 2em;
}
.breadcrumbs a {
	text-decoration: none;
	color: black;
}
.breadcrumbs span {
	text-decoration: underline;
}

/* RESPONSIVE STYLING */
/* */

/* upto 992 for Laptops test#1 1366px, test#2 1366px*/
@media only screen and (max-width: 1366px) {
	nav {
		margin-top: 1em;
	}
}
/* upto 768 for Tablets test#1 1024px, test#2 972px */
@media only screen and (max-width: 972px) {
	nav {
		margin-top: 1em;
	}
	html,
	body {
		font-size: 14px;
	}
}
/* upto 576px for Mobile test#1 768px, test#2 576px */
@media only screen and (max-width: 576px) {
	
}

/* */
/* Project Styling */
/* */
.project-container {
	margin: 0 2em 0 2em;
	display: flex;
	flex-direction: column;
	max-width: 1350px;
}
.project-container img {
	width: 100%;
	margin-bottom: 0em;
	/* the below constrains the image height to match the width of landscape images - minus the margins */
	max-height: calc(100vw - 4em);
	/* the below fits the image within its containing area without distorting by stretching */
	object-fit: contain;
	object-position: left;
}
/* RESPONSIVE STYLING */
/* */
/* Over 1350px */
@media only screen and (min-width: 1350px) {
	.project-container img {
		max-height: 1350px;
	}
}