* {
	font-family: "Cutive Mono", monospace;
}

/* Title */
.title {
	font-family: "Questrial";
	text-align: center;
	font-size: 2em;
}

/* Menu */
.menu {
	text-align: center;
	margin-bottom: 2em;
}

.menu a {
	color: black;
	text-decoration: none;
}

.menu a:hover {
	text-decoration: underline;
}

/* Quick links, Project subpage*/
.container {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
}

.container p {
	border: 1px solid black;
	padding: .5em;
	margin-bottom: 1.5em;
}

.container a {
	color: black;
	text-decoration: none;
}

.container a:hover {
	text-decoration: underline;
}

.imgcontainer {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	text-align: center; /* <50% images to be centered */
}

.imgcontainer img {
	max-width: 100%;
	height: auto;
	margin-bottom: 3em;
	display: inline-block; /* <50% images to be centered */
}

/* PROJECT LIBRARY */

/* Container for details*/
div.dmaincontainer {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Deatils */
details.dmain {
	border: 1px solid black;
	padding: .5em;
	line-height: .5em;
}

.dmain a {
	color: black;
	text-decoration: none;
}

.dmain a:hover {
	text-decoration: underline;
}

details[open].dmain {
	padding-bottom: 0;
}

/* Summary of details */
details.dmain summary {
	line-height: normal;
	list-style-type: '> ';
}

details[open].dmain summary {
	line-height: normal;
	border-bottom: 1px solid black;
	padding-bottom: .5em;
	list-style-type: '\\ ';
}

/* OTHER */

.copyright {
	color: grey;
	text-align: center;
} /* Bottom copyright text */

iframe {
	display: block;
	margin-left: auto;
	margin-right: auto;
} /* Vimeo embed */

@media only screen and (max-width: 1400px) {

	.container {
		width: 40%;
	}

	.imgcontainer {
		width: 60%;
	}

	div.dmaincontainer {
		width: 40%;
	}

}

@media only screen and (max-width: 1200px) {

	.container {
		width: 50%;
	}

	.imgcontainer {
		width: 70%;
	}

	div.dmaincontainer {
		width: 50%;
	}

}

@media only screen and (max-width: 1000px) {

	.container {
		width: 60%;
	}

	.imgcontainer {
		width: 80%;
	}

	div.dmaincontainer {
		width: 60%;
	}

}

@media only screen and (max-width: 800px) {

	.container {
		width: 90%;
	}

	.imgcontainer {
		width: 90%;
	}

	div.dmaincontainer {
		width: 90%;
	}

}