html { font-size: calc(0.75em + 0.75vw); }

body {
	background-image: url("wide-sunset.png");
	background-color: #1A074A;
	background-position-x: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	font-family: Georgia, serif;
	color: #200040;
}

.transparent {
	background-color: rgba(255,255,255,0.5);
	position: relative;
	left: 3%;
	width: 92%;
	top: 3vw;
	padding: 1vw;
	border-radius: 1vw;
}

.section {
	float:left;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 3%;
	text-align: center;
	width: 10.66%;
}

h1 {
	text-align:center;
	font-family: Brush Script MT, cursive;
	font-size: 3em;
	margin-top: 0;
	margin-bottom: 0;
}

h2 {
	text-align:left;
	font-size: 1.2em;
}

p {
	text-align:left;
}

hr {color: #200040;}

a:link {font-weight: bold; color: #400060; border-bottom: 2px solid; text-decoration: none;}
a:visited {color: #200040;} 
a:hover {color: #CC3844; border-bottom-color: #CC3844;}

.photo {
	text-align:center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5cm;
	margin-bottom: 0.5cm;
	width: 700px;	
}

.space {height:2cm;}

.portrait {
	text-align:center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1cm;
	margin-bottom: 0.5cm;
	width: 450px;	
}

@media screen and (max-width: 820px) {
	.photo {width: 80%;}
	.portrait {width: 50%;}
	.section {width: 31%; padding-left: 1%; padding-right: 1%;}
	body {background-image: url("tall-sunset.png"); background-size: 100% auto; background-attachment: fixed;}
}