/* There is a grey background under the whole website */
body {
	background-color: skyblue;
}

#container {
	padding: 1%;
}

/* The green menu has float so it can be next to the content area */
.menuholder {
	background-color: olivedrab;
	clear: none;
	width: 8%;
	/*height: 90vh;*/
	padding: 1%;
	float: left;
	font-family: cursive;
	color: white;
	font-size: 1.2vw;
	font-weight: bold;
}

.contentarea {
	background-color: lightgrey;
	clear: none;
	width: 88%;
	/*height: 90vh;*/
	padding: 1%;
	float: left;
}

/* This is what puts the box around the links */
.menubox {
	background-color: palegoldenrod;
	padding: 0.7vw;
	border-radius: 5pt;
	margin-top: 4pt;
	font-weight: initial;
}

.menubox:hover {
	background-color: white;
	border: 1pt solid blue;
	border-radius: 13pt;
}

/* The title has a different font then the rest */
.title {
	/*font-size: 65pt;*/
	font-size: 5vw;
	font-family: monospace;
}

/* Font size is based of the height of the canvas */
.textarea {
	margin: 10pt;
	/*font-size: 15pt;*/
	font-size: 2.6vh;
}

/* Image holder is in the center of the screen */
.imageholder {
	/*float: left;*/
	/*margin-left: 13%;*/
	/*margin-right: 13%;*/
	clear: none;
	background-color: #c0c0c0;
}

/* Images are the same height, with a border */
img {
	/*float: left;*/
	height: 30vh;
	border-radius: 6pt;
	padding: 3pt;
}

/* Text has padding to avoid touching */
p {
	padding: 3pt;
}