html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
body {
	font-family:  sans-serif;
	background:  #ABBAAE;
	color:  #082213;
	margin:  0 auto;
	padding:  0;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: auto fit-content(20%);
}
a:link {
	color: #00008B;
	text-decoration:  none;
	font-weight: bold;
}
a:visited {
	color: #3B0053;
	text-decoration:  none;
	font-weight: bold;
}
a:hover {
	color: #550000;
	text-decoration:  underline;
	font-weight: bold;
}
a:focus {
	color: #550000;
	text-decoration:  none;
	font-weight: bold;
}
header {
	margin: 0;
	padding: 0;
	order: 2;
}
nav {
	margin:  0;
	padding:  0;
}
nav ul {
	list-style: none;
	margin:  0;
	padding:  0;
}
nav ul li {
	margin: 0;
	padding: 0;
}
nav ul li a {
	display:  block;
	padding: 1em 2em 1em 1em;
	background:  #ABBAAE;
	margin: 0;
	border-left: 1px solid #082213;
	border-bottom: 1px solid #082213;
}
nav ul li a:hover {
	background:  #d5dcd7;
}
main {
	margin:  0;
	order: 1;
}
main h1 {
	font-family:  serif;
	font-size:  400%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
}
main h2 {
	font-family:  serif;
	font-size:  250%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
	color:  #050709;
}
main p {
	font-size:  125%;
	padding:  0.5em 15%;
}
main ul {
	font-size:  125%;
	padding:  0 20%;
}
main ul li {
	padding:  0 0.5em;
	list-style-type: square;
}
main ul#socials {
	font-size: 100%;
}
main ul#socials li {
	padding: 0.25em;
}
main p.disclaimer {
	font-size: 100%;
}
main#pattern h1 {
	font-family:  serif;
	font-size:  300%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
}
main#pattern h2 {
	font-family:  serif;
	font-size:  200%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
	color:  #050709;
}
main#pattern h3 {
	font-family:  serif;
	font-size:  150%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
	color:  #1D1905;
}
main#pattern p {
	font-size:  100%;
	padding:  0.5em 15%;
}
main#pattern ul {
	font-size:  100%;
	padding:  0 20%;
}
main#pattern ul li {
	padding:  0.5em;
	list-style-type: square;
}
main#pattern img {
	padding:  0.5em;
	border:  1px double #082213;
	background: #9daea1;
	margin:  1em;
	float: right;
}
footer {
	padding:  1em 3em;
	order: 3;
}
footer p {
	font-size:  80%;
}

@media screen and (max-width: 500px) {
	main h1, main#pattern h1 {
	font-family:  serif;
	font-size:  200%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
	}
	main h2, main#pattern h2 {
	font-family:  serif;
	font-size:  150%;
	padding:  0.5em 10% 0 10%;
	margin:  0;
	color:  #050709;
	}
	main ul {
	font-size:  100%;
	padding:  0 20%;
	}
	main#pattern img {
	padding:  0.5em;
	border:  1px double #082213;
	background: #9daea1;
	margin:  1em auto;
	float: none;
	width: 50%;
	display: block;
	}
}