* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--main-fg-color: #131313;
	--main-bg-color: #fcfcfc;
	--nav-fg-color: #232323;
	--nav-bg-color: #f6f6f6;
	--accent-bg: orange;
	--accent-fg: black;
	--accent-border: #666;
	--danger-fg-color: #721c24;
	--danger-bg-color: #f8d7da;
	--danger-border-color: #f5c6cb;
	--warning-fg-color: #856404;
	--warning-bg-color: #fff3cd;
	--warning-border-color: #ffeeba;
	--subtle-fg: #ccc;
	--page-title: #888;
}

.alert-danger {
	color: var(--danger-fg-color);
	background-color: var(--danger-bg-color);
	border-color: var(--danger-border-color);
}

.alert-warning {
	color: var(--warning-fg-color);
	background-color: var(--warning-bg-color);
	border-color: var(--warning-border-color);
}

.shadow {
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}

html {
	color: var(--main-fg-color);
	background-color: var(--main-bg-color);
	font-size: 16px;
	font-weight: 300;
}

body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	min-height: 100vh;
	font-family: "Alegreya Sans", Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

#js-disabled-container {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #ffffffee;
	z-index: 1000;
	font-size: 1.5em;
	font-weight: 500;
}

#js-disabled-message {
	border-width: 3px;
	border-style: solid;
	padding: 2em;
}

header#masthead {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em;
	background-color: var(--nav-bg-color);
	color: var(--nav-fg-color);
	background-color: var(--nav-bg-color);
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
	font-family: "Raleway", sans-serif;
	z-index: 600;
}

@media screen and (min-width: 600px) {
	header#masthead.scrolled {
		opacity: 0.4;
		-webkit-box-shadow: 0px 3px 2px -2px rgba(180, 180, 180, 0.4);
		-moz-box-shadow: 0px 3px 2px -2px rgba(180, 180, 180, 0.4);
		box-shadow: 0px 3px 2px -2px rgba(180, 180, 180, 0.4);
		transition: all 2s ease;
	}

	header#masthead.scrolled:hover {
		border-bottom: 1px solid rgba(128, 128, 128, 0.3);
		opacity: 1;
	}
}

body > header > nav > a {
	margin: 0 0.25em;
}

body > header > nav > a:first-child {
	margin: 0 0.25em 0 0;
}

body > header > nav > a:last-child {
	margin: 0 0 0 0.25em;
}

body > footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0.5em;
	color: var(--nav-fg-color);
	background-color: var(--nav-bg-color);
	font-family: "Raleway", sans-serif;
}

body > footer img {
	height: 16px;
	width: 16px;
}

body > .content {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	flex: 1;
	margin: 45px 0.5em 0.5em 0.5em;
}

body > .content.centered {
	align-items: center;
	justify-content: center;
}

body > .content > .container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

body > .content > .container > .about-img {
	max-width: 50%;
}

body > .content > .container > .text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	margin: 0 0 0 1em;
}

@media screen and (max-width: 799px) {
	body > .content > .container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	body > .content > .container > .about-img {
		max-width: 98%;
	}	

	body > .content > .container > .text {
		margin: 1em 0 0 0;
	}
}

a,
a:visited {
	text-decoration: none;
	color: var(--nav-fg-color);
	padding-bottom: 3px;
	border-bottom: 3px solid transparent;
}

nav a:hover {
	background-color: #aaaaaa30;
	border-color: var(--accent-bg);
}

nav a.selected {
	border-color: var(--accent-bg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway", sans-serif;
	margin: 0.5em 0;
}

h1 {
	font-size: 1.2em;
	font-weight: 500;
}

h2 {
	font-size: 1.2em;
	font-weight: 400;
	font-style: italic;
}

h3 {
	font-size: 1.1em;
	font-weight: 500;
}

h4 {
	font-size: 1.1em;
	font-weight: 400;
	font-style: italic;
}

h5 {
	font-size: 1.0em;
	font-weight: 500;
}

h6 {
	font-size: 1.0em;
	font-weight: 400;
	font-style: italic;
}

h1.page-title {
	color: var(--page-title);
	margin: 1.5em 4px;
}

.content.category > .description {
	margin: 0 0 1em 4px;
}

.content.category > .postfix {
	margin: 1em 0 0 4px;
}

@media screen and (max-width: 799px) {
	h1.page-title {
		margin: 1em 0;
	}	
}

p {
	margin-bottom: 0.5em;
}

ul > li {
	margin-left: 2em;
}

hr.spacer {
	margin: 1em 0;
}

input,
textarea {
	font-size: 1em;
	font-family: "Alegreya Sans", sans-serif;
	font-weight: 400;
	padding: 0.25em;
}

header#masthead .site-title {
	font-size: 1.2em;
}

.site-title .site-name {
	font-weight: 400;
}

.site-title .strapline {
	opacity: 0.6;
}

.site-title:hover > * {
	color: #888;
}

.flex-1 {
	flex: 1;
}

.center-flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.separator {
	opacity: 0.75;
}

.separator::before {
	content: "|";
}

.mh-1 {
	margin-left: 0.25em;
	margin-right: 0.25em;
}

.mv-1 {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

.mh-2 {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.mv-2 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.mh-3 {
	margin-left: 0.75em;
	margin-right: 0.75em;
}

.mv-3 {
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}

.mh-4 {
	margin-left: 1em;
	margin-right: 1em;
}

.mv-4 {
	margin-top: 1em;
	margin-bottom: 1em;
}

.section-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 96%;
}

.section-links > * {
	margin: 0 1em;
}

/* .section-links > *:first-child {
	margin-left: 0;
} */

/* .section-links > *:last-child {
	margin-right: 0;
} */

.section-links > .link > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.section-links > .link > a:hover {
	opacity: 0.8;
}

.section-links > .link > a > img,
.section-links > .link > a > canvas {
	height: 300px;
	width: 300px;
	border-radius: 16px;
}

.section-links > .link > a:hover > img,
.section-links > .link > a:hover > canvas {
	box-shadow: 1px 4px 6px rgba(0,0,0,0.3);
}

.section-links > .link > a > .caption {
	font-family: "Raleway" sans-serif;
	font-size: 1.4em;
	margin-top: 0.25em;
}

@media screen and (min-width: 500px) and (max-width: 800px) {
	.section-links > * {
		margin: 0 0.75em;
	}
		
	.section-links > .link > a > img,
	.section-links > .link > a > canvas {
		height: 150px;
		width: 150px;
		border-radius: 8px;
	}

	.section-links > .link > a > .caption {
		font-size: 1.2em;
	}
	
	.site-title .separator,
	.site-title .strapline {
		display: none;
	}
}

@media screen and (max-width: 499px) {
	.section-links {
		flex-direction: column;
	}

	header#masthead .site-title,
	header#masthead nav {
		font-size: 0.8em;
	}

	footer {
		font-size: 0.8em;
	}

	.section-links > * {
		margin: 1em 0;
	}
	
	.section-links > *:first-child {
		margin-top: 0;
	}
	
	.section-links > *:last-child {
		margin-bottom: 0;
	}
			
	.section-links > .link > a > img,
	.section-links > .link > a > canvas {
		height: 150px;
		width: 150px;
		border-radius: 6px;
	}

	.site-title .separator,
	.site-title .strapline,
	footer .to-top
	{
		display: none;
	}
}

@media screen and (max-width: 349px) {
	header#masthead .site-title {
		font-size: 0.7em;
	}

	footer {
		font-size: 0.7em;
	}
}


div#cookie-notice {
	position: fixed;
	bottom: 0.5em;
	left: 0.5em;
	right: 0.5em;
	padding: 1em;
	z-index: 600;
	border-width: 1px;
	border-style: solid;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}

div#cookie-notice .actions-wrap {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

div#cookie-notice .actions-wrap .primary-btn {
	background-color: var(--accent-bg);
	color: var(--accent-fg);
	border: 1px solid var(--accent-border);
	border-radius: 4px;
	padding: 0.25em;
	font-size: 1em;
	cursor: pointer;
}




div.row,
div.row-space-between {
	display: flex;
	flex-direction: row;
}

div.row-space-between {
	align-items: center;
	justify-content: space-between;
}

div.column {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.flex-3 {
	flex: 3;
}

.flex-4 {
	flex: 4;
}

.centered {
	display: flex;
	align-items: center;
	justify-content: center;
}

.padding-1 {
	padding: 0.25rem;
}

.padding-2 {
	padding: 0.5rem;
}

.padding-4 {
	padding: 1rem;
}

.padding-6 {
	padding: 1.5rem;
}

.padding-8 {
	padding: 2rem;
}

.margin-1 {
	margin: 0.25rem;
}

.margin-2 {
	margin: 0.5rem;
}

.margin-4 {
	margin: 1rem;
}

.margin-6 {
	margin: 1.5rem;
}

.margin-8 {
	margin: 2rem;
}

.margin-bottom-1 {
	margin-bottom: 0.25rem;
}

.margin-bottom-2 {
	margin-bottom: 0.5rem;
}

.margin-bottom-4 {
	margin-bottom: 1rem;
}

.margin-bottom-6 {
	margin-bottom: 1.5rem;
}

.margin-bottom-8 {
	margin-bottom: 2rem;
}

div.row.article {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 0.5rem 0.5rem 0.5rem 1rem;
	margin: 0.5rem;
}

div.article-content {
	display: flex;
	flex-direction: column-reverse;
}

div.article-content > div.details {
	flex: 1;
}

/* div.article-content > div.article-image-container {
	margin-left: 0;
} */
div.article-content > div.article-image-container > img,
div.row.article-content > div.article-image-container > canvas {
	max-width: 99%;
}

@media screen and (min-width: 700px) {
	div.article-content {
		display: flex;
		flex-direction: row;
	}

	div.article-content > div.details {
		flex: 1;
	}
	
	div.article-content > div.article-image-container {
		margin-left: 1rem;
	}
	
	div.article-content > div.article-image-container > img,
	div.row.article-content > div.article-image-container > canvas {
		max-width: 400px;
	}
}

div.row.article div.article-date {
	font-style: italic;
	opacity: 0.75;
}

div.article blockquote {
	border-left: 2px solid #888;
	padding-left: 0.5rem;
	margin-left: 0.5rem;
	margin-bottom: 0.5em;
}

div.article blockquote > p {
	margin-bottom: 0;
}

a.a-button {
	border: 1px solid #333;
	border-radius: 6px;
	margin: 0.5rem;
	padding: 0.5rem;
}

a.a-button:hover {
	background-color: #ccc;
	box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}