@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')   
}
* {box-sizing: border-box;}

body	{
	height:100%;
	background-color:#eef;
	padding:0;
	margin:0;
	}
header  {
        position:fixed;
        top:0;
        width:100%;
        height: 50px;
        font-size:1.5rem;
        color:white;
        padding-top: 0;
        padding-left: 1vw;
        background-image: linear-gradient(to right, rgba(0,155,0,1), rgba(0,150,0,0.2));
        z-index:2;
	text-shadow: 2px 2px 4px #000000;
}

main	{
	position: relative;
	font-family:Atkinson, Fallback, sans-serif;
	font-size:1.3rem;
	background-color:#eef;
	top:80px;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	margin-top:1vh;
	overflow:hidden;
	z-index:1;
	}

@media screen and (max-width: 400px) {
        body    {background-color:pink;}
}

@media screen and (min-width: 1100px) {main {width:70%;}}
@media screen and (max-width: 1000px) {main {width:80%;}}
@media screen and (max-width: 800px)  {main {width:90%;}}
@media screen and (max-width: 500px)  {main {width:94%;} header{font-size:1.7rem;}}
@media screen and (max-width: 400px)  {main {width:95%;} header{font-size:1.5rem;}}
@media screen and (max-width: 300px)  {main {width:99%;} header{font-size:1.5rem;}}
@media print {
	main {font-size:0.5em;}
	@page {size: portrait}
	#overlay {display:none;}
}
#logo	{
	position:fixed;
	top:5px;
	right: 0;;
	width:100px;
	z-index:4;
	}
#overlay {
	position:fixed;
	top:50px;
	left:0;
	color:black;
	font-size:1.2rem;
	padding:0.5em;
	border-style:solid;
	border-width: 1px;
	background-color:#98FB98;;
	z-index:5;
	overflow-y: scroll;
	}
#tree  {
	cursor:grab;
	z-index:3;
}
main a:link      {text-decoration:none;color:blue;}
main a:visited   {text-decoration:none;color:blue;}
main a:hover     {text-decoration:underline;}
main a:active    {text-decoration:none;}
header a:link      {text-decoration:none;color:white;}
header a:visited   {text-decoration:none;color:white;}
header a:hover     {text-decoration:none;}
header a:active    {text-decoration:none;}
footer	{
	clear:both;
	display:flex;
	justify-content:center;
	margin-top:4rem;
	margin-bottom:2rem;
	font-size:0.7em;
}
button  {box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);}

button:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}

#buttons	{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0.5rem;
	font-family:Atkinson, Fallback, sans-serif;
	}
.center	{display:flex; justify-content:center;}
.closer	{background-color:green; color:white;}
.svgbutton      {width:100%;font-family:Atkinson;}
.svgheader      {width:100%;}
.svgbutton > .svgrect   {fill:#D2DDE0;}
.svgbutton > .svgtext   {fill:black;}
.svgheader > .svgtext   {fill:black;}
.svgrect        {stroke:black; stroke-width:0.4;}
.svgtext        {text-anchor:middle;font-family:"Atkinson";}
.svgbutton:hover > .svgrect {fill:green;}
.svgbutton:hover > .svgtext {fill:white;}
svg {filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));  }
svg-center     {
        display:block;
        margin: 0 auto;
        width:100%;
        max-width:600px;
        }

.item	{flex: 1;}
/*
td	{padding-left:0.3rem;padding-right:0.3rem;}
tr:nth-child(odd)	{background-color:#CCC;}
*/
h2,h3	{clear:left;margin-bottom:0;padding-bottom:0;}
h2,h3 + p	{margin-top:0;padding-top:0;}
h2 + p	{margin-top:0.5rem;padding-top:0;}
h2	{font-size:1.4rem; margin-top:2rem;margin-bottom:0;}
.fb	{max-width:40px;}
.slideshow-container {display:flex; justify-content:center;}
.Slides { display: none;}	/* Hide the images by default */
.Slides img { width:100%; max-height:400px;}
.fade {animation-name: fade; animation-duration: 8.99s;}	/* Fade-in-and-out animation */
.fig	{display:flex; justify-content:center;}
@keyframes flip {from {transform:rotateY(0deg);} to {transform:rotateY(360deg);}}
@keyframes fadein {from {opacity:0;} to {opacity:1;}}
@keyframes fade {
	0%	{opacity: 0;}
	10%	{opacity: 1;}
}

figure + figure	{margin-bottom:2rem;}