div{
	float: left;
	clear: both;
}

/* Correct way to get rid of the white border, no flex */
body{
	margin: 0px;
}

/* Properties for all images */
img{
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	height: 42%;
	width: 30%;
	margin-left: 13%;
	float: left;
	clear: none;
	margin-top: 3vh;
}


#container{
	/* Greyish blue */
	background-color: #6A89A7;
	width: 100%;
	height: 100vh;
}


#menu{
	padding-left:2px;
	background-color: #4A4A4A;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	height: 8vh;
	/* Width is like this because of outline */
	width: 99.8%;
}

.mybutton{
	margin-left: 22px;
	font-family: verdana;
	background-color: #505050;
	/*light grey */
	color: black;
	font-size: 2vw;
	/* Button outline */
	outline-width: 2px;
	outline-style: solid;
	outline-color: black;
	height: 6vh;
	clear: none;
	text-align: center;
	padding-left: 2% ;
	padding-right: 2%;
}

/* Makes the buttons get bigger when your cursor hovering over it */
.mybutton:hover{
	height: 6.5vh;
	width: 6.5vw;
}

/* The text in the habitat page */
#texthabitat{
	margin-top: 23vh;
	width: 30vw;
	margin-left: 13vw;
	font-size: 36px;
	float: left;
}

/* The text in the info page */
#textinfo{
	font-size: 42px;
	margin-top: 22vh;
	margin-left: 10vw;
	width: 80vw;
}

/* The title in the homepage */
#subtitle{
	font-size: 50pt;
	margin-top: 8vh;
	margin-left: 33%;
	width: 34%;
	margin-right: 33%;
}

/* The text in the homepage next to the picture */
.descriptionadjacent{
	font-size: 28pt;
	margin-top: 22vh;
	margin-left: 15%;
	width: 34%;
	clear: none;
}

/* Image in habitat page */
#habitatimage{
	margin-top: 10%;
	height: 45%;
}

/* Image in homepage */
#homepageimage{
	margin-top: 3.5%;
	height: 52%;
}

/* All of this code makes it so that the text on the buttons are not underlined and dark blue like they usually are */
a:link{ 
  text-decoration: none; 
}

a:visited{ 
  text-decoration: none; 
} 

a:hover{ 
  text-decoration: none; 
} 

#a:active{ 
  text-decoration: none; 
}