@font-face {
	font-family: 'Open+Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Regular'), local('Open+Sand-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2');
	unicode-range: U+000-5FF;
	}
html    {box-sizing: border-box;}
*, *::before, *::after  {box-sizing: inherit;}

body {
	height:100%;
	background-color:#F5FFF5;
	padding:0;
	margin:0;
}
header  {
	position:fixed;
	top:0;
	width:100%;
        height: calc(0.6vh + 0.6vw + 1.5rem );
	font-size: calc(1.2vh + 1.2vw + 0.4rem);
	color:white;
        padding-left: 1vw;
	background-image: linear-gradient(to right, rgba(0,155,0,1), rgba(0,100,0,0), rgba(0,150,0,0));
	z-index:2;
}
header p		{margin:0;padding:0;animation:fade 1s;}
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;}
.org	{font-size:60%;}

main	{
	position: relative;
	top: calc(0.5vh + 0.5vw + 2.5rem );
	margin-left:auto;
	margin-right:auto;
	width:60%;
	font-family:Sans;
	font-size:1.2rem;
	overflow:hidden;
	z-index:1;
	}
main a:link	{color:blue; text-decoration: none;}
main a:visited	{color:blue; text-decoration: none;}
main a:hover	{color:black; text-decoration: underline;}
main a:active	{color:white; text-decoration: none;}

footer  {
        text-align:center;
        font-family:arial;
        font-weight:bold;
        font-size:0.9em;
        margin-top:2rem;
        padding-top:2rem;
        margin-bottom:2rem;
        clear:both;
        }

h1 {
	margin-top:0;
	font-size: 1.6rem;;
	font-family:"Open+Sans";
	text-align:center;
	animation:fade 4s;
	}
h2 {
	margin-top:1.5em;
	clear:both;
	font-family:"Open+Sans";
	}
h3 {
	margin-top:1.5em;
	clear:both;
	font-size:1.4em;
	}
.center	{
	display:block;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}

.link   {text-transform: uppercase;
	font-family:arial;
	font-size:0.9em;
	text-align: left;
	}
.link a:link {color: black;text-decoration: none;}
.link a:visited {color:blue;text-decoration: none;}

article {
        box-shadow: 3px 3px 5px #888888;
        border: 2px solid black;
        border-radius: 5px;
        background-color:#CCF;
        padding: 1vh;
        margin-bottom:1rem;
	overflow:auto;
        }
article h2      {clear:none;margin-top:0;font-size:1.3rem;font-family:'Open+Sans';}
article img     {float:left;margin-right:0.5rem;margin-top:-10px;}
article a:link {color:blue;text-decoration:none;}
article a:visited {color:brown;text-decoration:none;}
article a:hover {text-decoration:underline;}

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:  5em/2em "Open Sans", Arial, Helvetica, Geneva, sans-serif;
	font-size:1.4em;
	color:darkgreen;
	transition: 0.4s;
	}

button:hover {
	background-color: #070;
	color: white;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	}

.indent	{margin-right:5%;
	margin-left:5%;
	}

.svgbutton      {width:100%;max-width:800px;}
.svgbutton > .svgrect   {fill:#D2F0D2;}
.svgbutton > .svgtext   {fill:black;}
.svgrect        {stroke:black; stroke-width:0.2;}
.svgtext        {text-anchor:middle;font-family:"Open+Sans";}
.svgbutton:hover > .svgrect {fill:green;transition: all 0.3s ease-out;}
.svgbutton:hover > .svgtext {fill:white;transition: all 0.3s ease-out;}
svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }

@keyframes fade {from {opacity:0} to   {opacity:1;} }
@keyframes title {from {transform:rotateY(0deg);} to {transform:rotateY(360deg);}}

@media screen and (max-width: 2000px) {main {width:90%;}}
@media screen and (max-width: 800px) {main {width:98%;}}
@media screen and (max-width: 300px) {main {width:99.5%;}}
@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;
                }
}