@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-display: swap;
}
@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-display: swap;
	}
@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;
	font-display: swap;
	}
body	{
	background: #FFF;
	margin-left:auto;
	margin-right:auto;
	padding: 0;
	min-height:100%;
	font-family:Atkinson, Fallback, sans-serif;
	font-size:1.2rem;
	}
main	{
	margin-left:auto;
	margin-right:auto;
	margin-top:1em;
	width:60%;
	}
header a:link		{color:white; text-decoration: none;}
header a:visited 	{color:white; text-decoration: none;}
header a:hover		{color:white; text-decoration: underline;}
header a:active		{color:white; text-decoration: none;}

nav a:link		{color:blue; text-decoration: none;}
nav a:visited 		{color:purple; text-decoration: none;}
nav a:hover		{color:blue; text-decoration: underline;}
nav a:active		{color:blue; text-decoration: none;}

h2 a:link		{color:black; text-decoration: none;}
h2 a:visited 		{color:black; text-decoration: none;}
h2 a:hover		{color:black; text-decoration: underline;}
h2 a:active		{color:black; text-decoration: none;}

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;}
footer button {
	height:30px;
	background-color:#B2CDE0;
	font-weight:bold;
	border-radius: 4px;
	vertical-align:top;
}
#map button {width:100%}
details[open] summary ~ * { animation: sweep 1s ease-in-out;}
summary	{
	color:green;
	cursor:pointer;
	font-size:1.2em;
}
@keyframes sweep {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}

button	{
	width:80%;
	margin: 8px auto;
	outline: none;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
	font-family:Atkinson, Fallback, sans-serif;
	font-size:1.4em;
	color:darkgreen;
        }
button:hover {
	background-color: #070;
	color: #fff;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
}
li	{margin:0 0 10px 0;}
dt	{
	margin-top:1em;
	font-weight:bold;
	}
.center	{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.callout {
	margin-left:10%;
	margin-right:10%;
	padding:5px;
	background-color:#CCC;
	}
.fig	{display:flex; justify-content:center;}
.help   {background-color:#DDD;padding:0.5em;font-size:1em;border-radius:1vh;}

.logo	{
	font-family:"Metrophobic";
	color:green;
	font-size:calc(50px + 6 * ((100vw - 320px) / 680));
	text-align:center;
	cursor:pointer;
	margin-bottom:0;
	}
.top	{font-family:"Metrophobic"; color:green;}
.slogan	{
	font-family:"Oswald";
	color:black;
	font-size:calc(18px + 10 * ((100vw - 320px) / 680));
	padding-top:0.2em;
	padding-bottom:0.5em;
	text-align:center;
	}
.small	{font-size:2vh;color:#666;}
.uparrow	{
	color:#666;
	font-size:calc(30px + 5 * ((100vw - 320px) / 780));
}

.youtube-video {
	width: 100%;
	aspect-ratio: 16/9;
}
.svgbutton      {width:100%;}
.svgbutton > .svgrect   {fill:#D2DDE0;}
.svgbutton > .svgtext   {fill:black;}
.svgrect        {stroke:black; stroke-width:0.4;}
.svgtext        {text-anchor:middle;font-family:Atkinson, Fallback, sans-serif;}
.svgbutton:hover > .svgrect {fill:green;}
.svgbutton:hover > .svgtext {fill:white;}
svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }

@media screen and (max-width: 1400px) {main {width:75%;} button {font-size:1.2em}}
@media screen and (max-width: 1200px) {main {width:80%;} button {font-size:1.2em}}
@media screen and (max-width: 1000px) {main {width:86%;} button {font-size:1.0em}}
@media screen and (max-width: 800px)  {main {width:90%;} button {font-size:1.0em}}
@media screen and (max-width: 800px)  {main {width:92%;} button {font-size:0.9em}}
@media screen and (max-width: 600px)  {main {width:95%;} button {font-size:0.9em}}
@media screen and (max-width: 500px)  {main {width:96%;} button {font-size:0.9em}}
@media screen and (max-width: 400px)  {main {width:97%;} button {font-size:0.9em} .wide {display:none;}}
@media screen and (max-width: 300px)  {main {width:99%;} button {font-size:0.9em} .wide {display:none;}}
@page {
                size: 8.5in 11in;
                margin-top: 0.5in;
                margin-bottom: 0.5in;
}


@media print {
        body {
                font-size:1rem;
                margin-top:0;
                margin-bottom:0;
                width:100%;
                height:100%;
        }
        main {
                font-size:0.7rem;
                top:0;
                width:100%;
                height: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}
        h1      {margin-top:0;}
        h2      {font-size:1em;}
        h3      {font-size:0.9em;}
        header  {display:none;height:0;top:0;}
        footer  {display:none;height:0;top:0;}
        .web    {display:none;}
        .printed {
                display:block;
                font-size:1.2em;
                border: 2px solid;
                padding-left:0.5rem;
                padding-right:0.5rem;
                }
}
@media screen {
	.print	{display:none;}
]