html {
	overflow: visible;
}

div#container {
	width: 640px;
	height: 1000px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	font-family: sans-serif;
	
}

div#buttons-and-stats {
	position: relative;
	width: 100%;
	height: 60px;
	/* margin: 10px auto; */
}

div#the-controls {
	position: relative;
	background-color: #e2ded6;
	width: 100%;
	margin-top: 15px;
}

/* div.button-group {
	width: 20%;
	position: absolute;
	right: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
} */

#gather-button {
	position: absolute;
	right: 10px;
	top: 8px;
	width: 100px;

}

div#key {
	position: absolute;
	left: 670px;
	top: 500px;
	line-height: 6pt;
	font-size: 10pt;
	width: 150px;
}

svg#key-svg {
	position: absolute;
	top: 500px;
	left: 650px;
}

div#stat-readouts {
	width: 77%;
	height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

/* div.stats-output {
	position: absolute;
	top: 10px;
	width: 70%;
	height 25px;
	background-color: #e2ded6;
} */

.stats-output-label {
	position: absolute;
	left: 10px;
	top: 7px;
	width: 350px;
	height: 22px;
	background-color: #e2ded6;
	text-align: left;
	line-height: 22px;
	padding: 0px 3px;;
}

.stats-output-number {
	position: absolute;
	left: 360px;
	top: 7px;
	width: 75px;
	height: 22px;
	background-color: #e2ded6;
	text-align: right;
	line-height: 22px;
	padding: 0px 3px;
}

div.slider-group {
	width: 100%;
	height: 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.slider-label {
	position: relative;
	height: 20px;
	text-align: center;
}

div.slider-output {
	width: 20%;
	height: 18px;
	background-color: #f8f8f8;
	font-family: sans-serif;
	font-size: 14px;
	line-height: 18px;
}

.slider {
	width: 65%;
}

.counter-label {
	position: relative;
	text-align: left;
	margin-left: 5px;
}

.output-number {
	position: relative;
	text-align: right;
	margin-right: 5px;
	width: 70px;
	float: right;
}

div#population-labels {
	width: 100%;
	height: 18px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	}

.pop-label {
	margin: 4px;
}

div#population-components {
	width: 100%;
	height: 40px;
	margin-top: 6px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

div.pop-number {
	width: 25%;
	height: 25px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 20px;
	line-height: 25px;
	text-align: right;
	padding-right: 5px;
}

div#pop-susceptible {
	background-color: #8c8;
}

div#pop-infected {
	background-color: #e88;
}

div#pop-recovered {
	background-color: #eee;
}


h2 {
	color: #000;
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-weight: bold;
	line-height: 1.5em;
	margin: 0 0 20px 0;
	font-size: 16px;
	text-align: center;
	margin-bottom: 10px;
}

@media screen and (min-width: 940px)
{
	img#key-image {
		position: absolute;
		left: 650px;
		bottom: 50px;
	}
}