body{
	font-family: system-ui, sans-serif;
	font-size: 100%;
	line-height: 135%;
	background: rgba(32, 81, 32, 0.3);
	margin: 0;
}
header{
	font-size: 18px;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: relative;
	background-image: url(images/header_background.jpg);
	background-size: auto 8.5em;
	background-repeat: repeat-x;
	min-height: 5vw;
	
	
}
h1{
	font-size: 2vw; 
	position: absolute;
	left: 1em;
	min-height: 5vw;
}
h2{
	font-size: 3vw;
}
h3{
	padding-left: 3em;
}
p{
	font-size: 2vh;
	line-height: 135%;
	padding-left: 3em;
	padding-right: 3em;
}
section.pictures{
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1000%;
}

	

ul.main-links{
	margin-top: 0em;
	font-size: 1.5vw;
	list-style: none;
	padding-left: 3em;
	padding-right: 3em;
	display: flex;
	flex-direction: row;
	height: 3vw;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	background-color: rgba(32,81,32,0.69);
}
img{
	padding-left: 3em;
}
img.image-coding{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 35vw;
}

img.CGoL{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
ul.GoL-Rules{
	font-size: 2vh;
	line-height: 135%;
	list-style: upper-roman;
	display: flex;
	flex-direction: column;
	padding-left:10vw;
}
img.data{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.heatmap{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.bonds{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.ffer{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
p.label{
	display: flex;
	align-items: center;
}
a:link {color: white} /*unvisited*/
a:visited {color: rgba(255, 0, 255, 1))} /*visited*/
a:hover{color: hsl(237, 55%, 64%)} /*mouse hover*/
a:active{color: rgba(255, 0, 0, 1)} /*mouse clicked and held*/

	


	@media (min-width: 600px){ 
		h1{
			flex-direction: column;
		}
	}