@charset "utf-8";

body {
	background: linear-gradient(160deg, #00171F 0%, #00313D 60%, #000F14 100%) center center/cover fixed;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0;
	height: 100vh;
	margin: 0;
}

body > header {
	text-align: center;
}

h1 {
	font-family: 'Bree Serif', serif;
	text-shadow: 2px 2px 2px #000;
	margin: 1em 0 0 0;
}

h2 {
	padding: 0.5em 0.75em;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: normal;
	text-shadow: 2px 2px 2px #333;
	margin: 1em 0 0 0;
}

h3 {
	border-radius: 1em;
	background-color: rgba(0,0,0,0.25);
	padding: 0.5em 0.75em;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	text-shadow: 2px 2px 2px #333;
	margin: 1em 0 0 0;
}

body > header > p.initial {
	display: flex;
	font-family: 'Bree Serif', serif;
	font-size: 4em;
	align-items: center;
	justify-content: center;
	background: url(../images/hexagon-007889-512x444.png) center center/256px 222px no-repeat;
	width: 256px; /* Half of the intrinsic image width. */
	height: 222px; /* Half of the intrinsic image height. */
}

body > footer {
	width: 100%;
	margin: 0;
	padding: 2rem 3rem;
	text-align: center;
}