html {
	width: 100%;
	height: 100%;
	/*background-color: #4c5c96;*/
	background-image: url("../images/mt-rainier.jpg"),
	                  url("../images/mt-rainier-loading.webp");
	background-image: image-set(
		"../images/mt-rainier.avif" type("image/avif"),
		"../images/mt-rainier.jpg" type("image/jpeg")
	);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

body {
	margin: auto;
	
	width: -moz-max-content;
	width: max-content;
	max-width: 80%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	color: #fff;
	line-height: 1.4;

	background-color: rgba(0, 0, 0, 0.90);
	border-radius: 10px;
	padding: 10px;
}

/* Header */
header {
	order: 1;
	font-size: 1.2rem;
	flex-basis: auto;
	margin: 5px;
	width: 42ch;
}

header > h1 {
	font-weight: 100;
	font-family: 'Roboto Slab', serif;
	margin-bottom: 0px;
	font-size: 40px;
	color: #eee;
	text-transform: uppercase;
}

aside {
	font-style: italic;
	font-family: Georgia, serif;
	margin-bottom: 8px;
}

.main-links {
	font-family: 'Roboto Slab';
}

/* Main container */
#container {
	order: 2;
	margin: 5px;
	
	flex-basis: 50ch;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 50ch;
	max-width: 80ch;

	font-family: 'Lato', -apple-system, BlinkMacSystemFont, calibri, sans-serif;
	font-size: 1.1rem;
	padding-top: 40px;
	padding-bottom: 30px;
}

#container img {
    max-width: 100%;
}

article > [ftemplate='title'] {
	display: inline;
}

@media (max-width: 650px) {
	body {
		max-width: 95%;
	}

	header {
		width: 100%;
	}

	.header-img {
		display: none;
	}

	#container {
		margin: 0px;
		padding-top: 10px;
		
		flex-basis: auto;
		flex-grow: initial;
		flex-shrink: initial;
		width: 100%;
		max-width: initial;
		min-width: initial;
	}
}

/* Link fixes */
a:link {
	color: #B3E5FC;
	text-decoration: none;
}
a:visited {
	color: #B3E5FC;
		text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: underline;
}
a:active {
	color: #fff;
	text-decoration: underline;
}

a:link path {
	fill: #B3E5FC;
}
a:visited path {
	fill: #B3E5FC;
}
a:hover path {
	fill: #fff;
	text-decoration: underline;
}
a:active path {
	fill: #fff;
	text-decoration: underline;
}