@font-face
{
	font-family: Montserrat;
	font-weight: normal;
	src: url("/resources/Montserrat-ExtraLight.otf") format("truetype");
}

@font-face
{
	font-family: Montserrat;
	font-weight: bold;
	src: url("/resources/Montserrat-Regular.otf") format("truetype");
}

@font-face
{
	font-family: Merriweather;
	font-weight: bold;
	src: url("/resources/Merriweather-Black.otf") format("truetype");
}

:root
{
	--title-font: Merriweather;
	--text-font: Montserrat;

	--font-color: black;
	--bg-color: white;
	--link-color: #0088FF;

	--accent-dark-color: #003153;
	--accent-light-color: gray;

	--xs-margin: 0px;
	--s-margin: 0.5rem;
	--m-margin: 1rem;
	--l-margin: 2rem;

	--s-font:1rem;
	--m-font:1.5rem;
	--l-font:3rem;
}

*
{
	margin:var(--xs-margin);
	padding:var(--xs-margin;);
	font-size:var(--s-font);
}

ol,ul
{
	padding-left:2ch;
	margin-bottom: var(--m-margin);
}

body
{
	font-family: var(--text-font);
	background: var(--bg-color);
	color: var(--font-color);
	padding: var(--m-margin);
}

article
{
	margin-top: var(--l-margin);
	max-width:80ch; /* article-width */
	margin: auto;
}

a
{
	color: var(--link-color);
	text-decoration:none;
}

p
{
	margin-bottom: var(--m-margin);
}

/* 
em
{
	text-decoration:underline;
	font-style:normal;
}
*/

h1
{
	font-family: var(--title-font);
	font-family: "Merriweather";
	color: var(--accent-dark-color); 
	font-size: var(--l-font);
}

h2
{
	font-family: var(--title-font);
	color: #003153;
	font-size: var(--m-font);
	margin-bottom: var(--m-margin);
	margin-top: var(--s-margin);
}

h3
{
	font-size: var(--s-font);
}

h4
{
	font-size: var(--s-font);
	color: var(--accent-light-color);
	margin-bottom: var(--s-margin);
}

img
{
	border-radius:20px;
}

svg
{
	margin:auto;
	display:block;
}

figure
{
	margin:auto;
	width:75%;
}

div
{
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}

span
{
	width: auto;
	padding-right:1ch;
}

@media screen and (min-width: calc(80ch + 20ch ) ) /* article-width + nav-width */
{
	div
	{
	  	flex-wrap: nowrap;
	}

	nav
	{
		width: 20ch; /* nav-width */
		position: fixed;
		top:0px
	}

	article
	{
		padding-left: 20ch ; /* nav-width */
		position: absolute;
		top:0px;
		left:0px;
		right:0px;
	}
}

@media print
{
	.noprint
	{
		display:none;
	}

	div
	{
	  flex-wrap: nowrap;
	}

	article
	{
		margin-top:var(--l-font);
	}

	html
	{
		font-size:11px;
	}

}