@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');
* {box-sizing: border-box;}

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

main	{
	position: relative;
	font-family:'Cardo', serif;
	font-size:1.3rem;
	background-color:#eef;
	top:60px;
	width:90%;
	margin-top:1vh;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
	z-index:1;
	}
@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%;} header{font-size:1.7rem;}}
@media screen and (max-width: 400px)  {main {width:97%;} header{font-size:1.5rem;}}
@media screen and (max-width: 300px)  {main {width:99%;} header{font-size:1.5rem;}}
#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: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
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;
	}
.center	{display:flex; justify-content:center;}
.closer	{background-color:green; color:white;}
.item	{flex: 1;}
td:nth-child(1)	{width:50%;}
td:nth-child(2)	{width:50%;}
h2,h3	{margin-bottom:0; padding-bottom:0;}
h2,h3 + p	{margin-top:0;padding-top:0;}
.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 */
@keyframes flip {from {transform:rotateY(0deg);} to {transform:rotateY(360deg);}}
@keyframes fadein {from {opacity:0;} to {opacity:1;}}
@keyframes fade {
	0%	{opacity: 0;}
	50%	{opacity: 1;}
}