:root {
	--main-fg-color: #003400;
	--main-ac-color: #007400;
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: 2.5%;
}

main {
	padding: 0 1%;
	border-style: solid;
	border-color: var(--main-fg-color);
}

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

header {
	background-color: var(--main-fg-color);
	border-color: var(--main-fg-color);
	border-width: thick;
	border-style: solid;
	padding: 0 1%;
}

p {
	margin-top: 0%;
}

h1 {
	margin: 0%;
}

h2 {
	margin-bottom: 0%;
}

h1 a	{
	font-size: 125%;
	color: white;
	font-weight: bold;
	text-decoration: none;
}
h1 i {
	font-size: 75%;
	color: olivedrab;
	margin-left: 5%;
	text-decoration: underline;
}
nav {
	display: flex;
	justify-content: flex-start; 
	flex-wrap: wrap;
	background-color: var(--main-ac-color);
	border-style: none solid;
	border-color: var(--main-fg-color);
}
nav a {
	margin-top: 0;
	padding: .25em 1em;
	text-decoration: none;
	color: white;
	font-weight: bold;
	
	
}
nav a:hover {
	background-color: var(--main-fg-color);
	color: white;
}
nav .selected {
	background-color: var(--main-fg-color);
}

.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%;
}