*{
	box-sizing: border-box;
}

html, body{
	margin: 0;
}

body{
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #333333;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a{
	text-decoration: none;
	color: #333333;
}

h2{
	font-family: 'Vollkorn', serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
}

.wrapper{
	max-width: 960px;
	margin: auto;
	padding: 0 20px;
	position: relative;
}

#navbar{
	position: relative;
	z-index: 2;
	height: 40px;
	background-color: #ffffff;
	box-shadow: 0px 2px 0px 0px #999999;
}

#hero{
	height: 380px;
	overflow-x: clip;
	background-color: #f0d64e;
}

#hero .wrapper{
	height: 100%;
}

/* Statue of Liberty artwork, anchored to the right of the content column */
#hero .wrapper::after{
	content: "";
	position: absolute;
	top: 0;
	right: -60px;
	height: 100%;
	aspect-ratio: 820 / 504;
	background-image: url(images/liberty_banner.jpg);
	background-size: 100% 100%;
}

/* White banner with a V-cut bottom, hanging from the top of the page over the navbar */
h1{
	position: absolute;
	top: -40px;
	left: 20px;
	margin: 0;
	z-index: 3;
	filter: drop-shadow(0px 1px 1px rgba(0,0,0,.3));
}

h1 .ribbon{
	display: block;
	width: 332px;
	padding: 20px 25px 55px 25px;
	background-color: #ffffff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 30px), 0 100%);
}

h1 .fn, h1 .ln{
	display: block;
	font-family: 'Vollkorn', serif;
	font-weight: 900;
	text-transform: uppercase;
}

h1 .fn{font-size: 40px; line-height: 50px;}
h1 .ln{font-size: 60px; line-height: 55px;}

main{
	flex: 1;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 20px 40px 20px;
}

#about::after{
	content: "";
	display: block;
	clear: both;
}

#about a{
	text-decoration: underline;
	text-decoration-color: #f0d64e;
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

#about a:hover{
	text-decoration-color: #333333;
}

#about img{
	float: right;
	width: 200px;
	height: auto;
	margin: 0 0 20px 30px;
}

footer{
	background-color: #f3f3f3;
	font-size: 15px;
}

footer p{
	margin: 0;
	padding: 15px 0;
}

@media screen and (max-width: 600px){
	body{
		font-size: 17px;
	}

	#hero{
		height: 260px;
	}

	h1 .ribbon{
		width: 240px;
		padding: 14px 20px 45px 20px;
	}

	h1 .fn{font-size: 30px; line-height: 38px;}
	h1 .ln{font-size: 44px; line-height: 42px;}

	h2{
		font-size: 26px;
	}

	#about img{
		float: none;
		display: block;
		width: 160px;
		margin: 0 auto 10px auto;
	}
}