@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'),
       url('/fontsAtkinsonHyperlegibleNext-Bold.woff2') format('woff2'), 
       url('/fonts/AtkinsonHyperlegibleNext-Regular.ttf')  format('truetype')   
}
@font-face {
	font-family: 'Metrophobic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Metrophobic Regular'), local('Metrophobic-Regular'), url('/fonts/Metrophobic-Regular.woff2') format('woff2');
	unicode-range: U+000-5FF;
	}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Oswald Regular'), local('Oswald-Regular'), url('/fonts/Oswald-Regular.woff2') format('woff2');
	unicode-range: U+000-5FF;
	}
@media print {
	main {
		font-size:0.75em;
	        width:100%;
		}
	main a:link	{text-decoration:none;color:black}
	main a:visited	{text-decoration:none;color:black}
	main a:hover	{text-decoration:none;color:black}
	main a:active	{text-decoration:none;color:black}
	#masthead       {background-color:white; color:black;font-family:Atkinson, Fallback, sans-serif; }
	h2      {font-size:1.2em;}
	h3      {font-size:1.1em;}
	.web	{display:none;}
	.printed {
		display:block;
		font-size:1.2em;
		border: 2px solid;
		padding-left:0.5rem;
		padding-right:0.5rem;
		}
}

@media screen {
	.printed {display:none;}
	.web	{display:block;}
	main a:link	{color:blue}
	main a:visited	{color:#33B;}
	main a:hover	{color:blue}
	main a:active	{color:blue}
	#masthead	{
		font-family:Atkinson, Fallback, sans-serif;
		background-color:black;
		color:white;
		padding-left:1rem;
		padding-right:1rem;
		padding-bottom:0.4rem;;
		padding-top:0.2rem;
		}
}

nav	{
	border-style: solid;
	border-width:3px;
	border-radius: 15px;
	padding-left:2vh;
	width:60%;
	margin: auto;
}
nav li	{list-style-type: none; font-family:'Metrophobic', sans-serif;}
nav li a:link	{text-decoration:none;}
nav li a:visited	{text-decoration:none;color:darkviolet;}
nav li a:active	{text-decoration:none;}
nav li a:hover		{text-decoration:underline;}


@media screen and (min-width: 1401px) {main {width:70%;} }
@media screen and (max-width: 1400px) {main {width:75%;} }
@media screen and (max-width: 1200px) {main {width:80%;} }
@media screen and (max-width: 1000px) {main {width:86%;} }
@media screen and (max-width: 800px)  {main {width:90%;} }
@media screen and (max-width: 800px)  {main {width:92%;} }
@media screen and (max-width: 600px)  {main {width:95%;} }
@media screen and (max-width: 500px)  {main {width:96%;} }
@media screen and (max-width: 400px)  {main {width:97%;} }
@media screen and (max-width: 300px)  {main {width:99%;} }

body	{
	background: #FFF;
	margin-left:0;
	margin-right:0;
	padding: 0;
	min-height:100%;
	font-family:Atkinson, Fallback, sans-serif;
	font-size:1.4rem;
	}
main	{
	margin-left:auto;
	margin-right:auto;
	margin-top:1em;
	}

footer	{
	display:flex;
	justify-content:center;
	margin-top:2rem;
	margin-bottom:4rem;
	font-size:0.8em;
}
footer a:link     {text-decoration:none;}
footer a:visited  {text-decoration:none;}
footer a:hover    {text-decoration:none;}
footer a:active   {text-decoration:none;}

article:nth-child(even)	{background-color:#EEF;padding-left:0.1rem;}
article:nth-child(odd)	{background-color:#EFE;padding-left:0.1rem;}

figure	{
	float:left;
	margin-right:1rem;
	margin-top:0;
	margin-left:0;
	margin-bottom:0.5rem;
	}
h1      {
	text-align:center;
	font-family:'Metrophobic', sans-serif;
	font-size:3em;
	margin-bottom:0;
	animation-name: sweep;
	animation-duration: 4s;
	}

h2, h3      {
	font-family:'Metrophobic', sans-serif;
	clear:both;
}

@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}

@keyframes gap {
  0%    {margin-right: 0;}
  100%  {margin-right: 40px;}
}

#left	{animation-name: gap;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	padding-top:0;
	padding-bottom:0;
	margin-top:0;
	margin-bottom:0;
}
#left a:link     {text-decoration:none;}
#left a:visited  {text-decoration:none;}
#left a:hover    {text-decoration:none;}
#left a:active   {text-decoration:none;}


li	{margin:0 0 10px 0;}
dt	{
	margin-top:1em;
	font-weight:bold;
	}
.center	{text-align:center;}
.callout {
	margin-left:10%;
	margin-right:10%;
	padding:5px;
	background-color:#CCC;
	}
.fixed  {font-family:Courier;font-size:0.9rem;}
.logo	{
	font-family:"Metrophobic";
	color:green;
	font-size:calc(50px + 6 * ((100vw - 320px) / 680));
	text-align:center;
	cursor:pointer;
	margin-bottom:0;
	}
.noprint	{display:none;}
#slogan	{
	font-family:"Oswald";
	color:black;
	font-size:calc(18px + 6 * ((100vw - 320px) / 680));
	padding-top:0;
	padding-bottom:0;
	text-align:center;
	opacity: 0;
	animation-name: sweep;
	animation-duration: 3s;
	animation-delay: 0.2s;
	animation-fill-mode:forwards;
	}

.small	{font-size:2vh;color:#666;}
.uparrow	{
	color:#666;
	font-size:calc(30px + 5 * ((100vw - 320px) / 780));
}
svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }