body {background-color: black;}
h1 { color:blue; text-align: center;}
nav{text-align: center;padding-bottom: 1em;}
h2,p {color:whitesmoke;}
a:hover {color: whitesmoke;}
picture{width: 100%;}
picture > * {max-width: 100%;display: block; margin: 0 auto;}
img{border: 4px inset whitesmoke; width:100%;}
#bio-wrapper{margin-left: 2em; margin-right: 2em;}
#profile-picture{float:left; margin-right: 2em; margin-bottom: 1em}


#arch-picture{ float: left; padding-top: 1em; padding-bottom: 1em;
padding-right: 3em; margin-right: 1em;}
@media (min-width: 40em) {#arch-picture
	{float: right; padding-left: 2em;}
}

@media (max-width: 40em) {#image-container {
	margin-left: 10%; margin-right: 10%;}
}
@media (min-width: 40em) and (max-width: 55em) {
	#image-container {margin-left: 15%; margin-right: 15%;}
}
@media (min-width: 55em) and (max-width: 70em) {
	#image-container {margin-left: 20%; margin-right: 20%;}
}
@media (min-width: 70em) {
	#image-container {margin-left: 25%; margin-right: 25%;}
}
h3{color: blue; text-align: center }
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.gallery-item {
	margin: 1em;
	width: 150px;
}
.gallery-item img {
	width: 100%;
	height: auto;
}
#float-left{ float: left;}
#float-right{ float: right;}

footer{text-align: center; padding: 1em;}
footer p {color: blue;}}