style.css

	html {
		background:navy;
	}

	div.bar {
		height:1.3em;
		font-size:0.9em;
		color:black;
		margin:auto;
		text-align:center;
		white-space:nowrap;
		padding-bottom:0.3em;
	}

	td {
		width:20%;
	}

	hr {
		background: black;
		height: 1.5px;
		box-shadow: 3px 3px;
	}
	
	#plabel {
		opacity: 0;
		border: 2px solid #DFDFDF;
		top: 0px;
		position: relative;
		margin-top: 300px;
		background:#f8f8f8;
	}
	
	/* hovering population textbox */
	div.bar:hover #plabel {
	  opacity: 0.75;
	}
	
	
	div.box {
		border:3px solid black;
		background:white;
		overflow:hidden;
		box-shadow: 4px 4px gray;
		margin-bottom:5px;
	}

	body {
		margin-left:1%;
		margin-right:1%;
		font-family:verdana;
		padding:1em;
		background:#eee;
	}

	div.y {
		background:#b11;
	}

	div.a {
		background:purple;
	}

	div.m {
		background:blue;
	}

	div.o {
		background:teal;
	}
	
	/* mobile support */
	@media screen and (max-width: 1024px) {
	
		body {
			font-size: 200%;
		}
		
		button {
			font-size: 1.2em;
		}
		
		input {
			height:1.5em;
			font-size:1em;
			width:50%;
		}
		
		div.bar {
			font-size:75%;
		}
		
	}
	
	/* huge screens */
	@media screen and (min-width: 1400px) {
	
		body {
			width:1344px;
			margin:auto;
			margin-top:9px;
		}
		
	}