@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;
	}
a:link		{ color: #0066CA; text-decoration: none; }
a:visited	{ color: #B50202; text-decoration: none; }
a:active	{ color: #D4A877; text-decoration: none; }
a:hover		{ color: #FFCA64; text-decoration: underline; }
header	{
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	background-color:#AA0000;
	z-index:3;
	display:flex;
	align-items:center;
	}
main	{
	position:relative;
/*	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	align-items:left;
	justify-content:center;*/
	top:50px;
	width:60%;
	margin:auto;
	margin-bottom:8rem;
	font-family:Metrophobic;
	font-size:1.2rem;
	}
nav	{
	position:fixed;
	top:50px;
	left:0;
	padding-left:0.3rem;
	font-size:1.3rem;
	background-color: #AA0000;
	visibility:hidden;
	z-index:3;
	width:10rem;
	font-family:Metrophobic;
	font-size:1.3rem;
	line-height: 1.5;
	overflow:auto;
}
nav a:link,
nav a:visited {color:white; text-decoration: none;}
nav a:hover	{color:white; text-decoration: underline;}
nav a:active	{color:white; text-decoration: none;}
h2	{
	text-align:left;
	margin-bottom:0;
	}
.title	{
	cursor:pointer;
	font-family:Sans;
	font-size:1.5rem;
	color:#FFF;
	}
.title a:link		{color:#FFF; text-decoration: none;}
.title a:visited 	{color:#FFF; text-decoration: none;}
.title a:hover		{color:#FFF; text-decoration: underline;}
.title a:active		{color:#FFF; text-decoration: none;}
.center	{margin-left:auto;margin-right:auto;text-align:center;}
dt	{margin-top:1rem;font-weight:bold;}
footer	{margin-bottom:2rem;margin-left:auto;margin-right:auto;text-align:center;margin-top:1rem;}
.svgbutton      {width:100%;}
.svgbutton > .svgrect   {fill:#D2DDE0;}
.svgbutton > .svgtext   {fill:black;}
.svgrect        {stroke:black; stroke-width:0.4;}
.svgtext        {text-anchor:middle;font-family:Metrophobic;}
.svgbutton:hover > .svgrect {fill:green;}
.svgbutton:hover > .svgtext {fill:white;}
svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }
</style>

@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%;} }