:root {
	--main-fg-color: #003400;
	--main-ac-color: #00A800;
background-image: url(media/bg.gif);
}

body {
	font-size: 100%;
	font-family: "Liberation Serif", "Times New Roman";
	display: block;
	background-color: rgba(255, 255, 255, 0.8);
	margin: 1% 5%;
	border-style: double; double double double;
	border-width: thick;
	border-color: var(--main-fg-color);
}

main {
	padding: 0 1%;
}

small {
	font-style: italic;
	color: gray;	
}

header {
	background-color: var(--main-fg-color);	
	display: flex;
   justify-content: space-between;
   align-items: baseline;
   padding: 0 1%;
}

.tagline {
	color: whitesmoke;
	font-size: 125%;
	padding: 0 5%;
	text-decoration: underline;
}

p {
	margin-top: 0%;
}

h1 {
	margin: 0%;
	white-space: nowrap;
}

h2, h3 {
	margin: 1% 0 0 0;
}

h1 a	{
	font-size: 125%;
	color: white;
	font-weight: bold;
	text-decoration: none;
	background-color: var(--main-fg-color);
	padding: 0 1%;
}

nav {
	display: flex;
	justify-content: flex-start; 
	flex-wrap: wrap;
	background: linear-gradient(180deg, #003400 40%, var(--main-ac-color) 100%);
}
nav a {
	margin-top: 0;
	padding: .25em 1em;
	text-decoration: none;
	color: white;
	font-weight: bold;
	border-style: none solid none none;
	border-width: thin;
	box-shadow: inset 8px rgba(0, 0, 0, 0.20);
	
}
nav a:hover {
	background-color: var(--main-fg-color);
	color: white;
}
nav .selected {
	background: linear-gradient(180deg, #003400 50%, #007400 100%);
}

.fig {
	position: fixed;
	bottom: 0%;
	right: -2%;
	opacity: 1;
	transition: opacity 0.25s ease-in;
	z-index: -1;
	width: 25%;
}
.fig:hover {
	z-index: 5;
}
.eu {
	position: absolute;
	right: 0%;
	top: 0%;
	opacity: 1;
	scale: 25%;
}
.eu:hover {
	animation: spin 5s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

figure {
	float: right;
	clear: right;
	max-width: 15em;
	
}

figure img {
	max-width: 100%;
}

.yah {
	padding-left: 1%;
}

.urlbutton {
	max-height: 31px; 
	padding: 0;
	border: 0;
	margin: 0;
}
.urlbutton img {
	max-height: 31px; 
}

.gallery {
	display: grid;
	justify-content: center; 
	grid-template-columns: repeat(auto-fit, minmax(15%, 1rem));
	gap: 20px;
}

.gallery li {
	position: relative;
	overflow: hidden;

}

.gallery li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery li span {
	position: absolute;
	transform: translate(-50%, -50%);
	color: white;
	top: 50%;
	left: 50%;
	display: flex;
	justify-content: center; 
	align-items: center;
	height: 100%;
	width: 100%;
	font-size: 1.5rem;
	text-align: center;
	background-color: rgb(0,0,0,0.4);
}

.gallery li span:hover {
	opacity: 0;
}