@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
body{
	font-family: "Google Sans Code", system-ui, sans-serif;
	font-size: 100%;
	line-height: 135%;
	background: #b8d6ec;
	margin: 0;
}
header{
	font-size: 18px;
		color: white;
		text-shadow: -2px 2px 4px #000;
	background-image: url(images/header_background.jpg);
		background-position: center;
		background-size: cover;
		height: 15vh;
	display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	min-height: 5vw;
}

.guide{
	text-align: center;
}
h1{
	font-size: 2vw; 
	position: absolute;
	left: 1em;
	min-height: 5vw;
	text-color: d6d5e3;
}
h2{
	font-size: 3vw;
	text-color: d6d5e3;
}
h3{
	text-align:center;
}
p{
	font-size: 2vh;
	line-height: 135%;
	padding-left: 3em;
	padding-right: 3em;
	text-align: center;
}

section.about{
	text-align: center;
}

div.left{
width: fit-content;
margin-bottom: 0em;
margin-left: auto;
margin-right:auto;
margin-top: 2em;
background-color:#e0d6ff;
}
section.pictures{
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 100%;
}
section.figures{
	display: flex;
	flex-direction: row;
	align-items: center;
	line-height: 100%;
	margin-top: 3em;
}
img{
		width: 100%;
}

	figure.outline {
		text-align: center;
			padding: 1em 1em 2em 1em;
		background-color:#3e4f61;
		position: relative;
		line-height: 0;
		margin: 1em 2em;
	}
	
	.whale figcaption{
			
		color:white;
		
		display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: fit-content;
		background-color: rgba(62,79,97,.6);
			width: 60%;
			margin: 0 auto 0em auto;
			padding: 0.5em 0 0.5em 0;
			line-height: 100%
	}
	
	.white figcaption{
			
		color:white;
		
		display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: fit-content;
		background-color: rgba(62,79,97,.6);
			width: 60%;
			margin: 0 auto 0em auto;
			padding: 0.5em 0 0.5em 0;
			line-height: 100%
	}
	.hammer figcaption{
			
		color:white;
		
		display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: fit-content;
		background-color: rgba(62,79,97,.6);
			width: 60%;
			margin: 0 auto 0em auto;
			padding: 0.5em 0 0.5em 0;
			line-height: 100%
	}
	
	
ul.main-links{
	margin-top: 0em;
	font-size: 1.5vw;
	list-style: none;
	padding-left: 5em;
	padding-right: 5em;
	display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	height: 3vw;
	justify-content: space-between;
	align-items: center;
	background-color: #3e4f61;
}
}
p.label{
	display: flex;
	align-items: center;
}

footer{
	text-align: center;
}


a:link{
  color:white;
}
a:visited{
  color:white;
}
a:hover{
  color:#40e0d0;
}
a:focus{
  color:white;
}
a:active{
  color:white;
}


table{
	margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
  background-color: #3e4f61;
}

td:hover {
background-color:#d473d4;
}

tr{
	
	background-color: #e0d6ff;
	
}
table.full-data tr>* {
	border: 1px outset #93575f;
	padding: .15em .25em;
	height: 2em;
	text-align: center;
	vertical-align: bottom;
}

table.full-data{
	border: 1px outset #B12051;
		border-spacing: .5em .35em;
		border-collapse: separate;
	table-layout: fixed;
	min-width: 50%;
}
table.full-data thead th{
	text-align: center;
	color: black;
	width: 20%;
}
table.full-data tbody th {
	text-align: center;


@media (min-width: 600px){
	table.full-data{
		border: 2px inset #E195A9;
		background-color: #e0d6ff;
	}