/* styling for buttons */
.submenu {
	float: left;
	margin-left: 5%;
	margin-right: 5%;
	background-color: rgb(21, 150, 150);
	height: 100%;
	width: 15%;
	border-radius: 10px;
	
}

/* text in buttons */
.menutxt {
	margin-left: 25%;
	margin-right: 25%;
	width: 50%;
	/* color: rgb(207, 255, 255); */
	color: aliceblue;
	font-size: 100%;
	font-weight: 600;
	text-align: center;
}

/* box that holds the buttons */
.menubox {
	width: 80%;
	height: 50px;
	border-radius: 10px;
	background-color: rgb(50, 219, 219);
	padding: 10px;
	margin: 5px;
	margin-right: 10%;
	margin-left: 10%;
	border-width: 3px;
	border-color: rgb(253, 166, 46);
	float: left;
	clear: left;
}

/* box with my text and images */
.content {
	background-color: rgb(183, 243, 243);
	margin-left: 2.5%;
	margin-right: 2.5%;
	margin-top: 20px;
	padding: 30px;
	padding-right: 150px;
	color: rgb(226, 132, 0);
	font-size: 16pt;
	border-radius: 10px;
	border-color: rgb(155, 214, 214);
	border-width: 10px;
	border: 10px;
	float: left;
}

/* image of platypus in water (so cute) */
#plimg {
	border: 7px;
	border-style: solid;
	width: 50vw;
	/* border blah */
	border-radius: 10px;
	margin-right: 1%;
}

/* painting of platypus */
#plimg2 {
	border: 7px;
	border-style: solid;
	height: 57.6vh;
	border-radius: 10px;
}

/* another image of platypus in water (also super cute) */
#plimg3 {
	border: 7px;
	border-style: solid;
	width: 50vw;
	
}

/* image of the common yabby, the type of crayfish platypus eat */
#yabimg {
	border: 7px;
	border-style: solid;
	width: 29.6vw;
}

/* image of freshwater shrimp */
#shrmpimg {
	border: 7px;
	border-style: solid;
	width: 38vw;
}

/* image of the platypus spur */
#spurimg {
    border: 7px;
	border-style: solid;
	width: 55vh;
}

/* diagram of the playpus stomach (or lack of stomach) */
#stmcimg {
	border: 7px;
	border-style: solid;
	width: 75.5vh;
}

/* the title text */
.title {
	font-size: 35pt;
	margin-bottom: 20px;
	color: rgb(255, 160, 28);
	font-weight: 500;
}

/* The number headers in the fun facts page */
.number {
	font-size: 20pt; 
	padding-top: 3vh;
}

/* large box around everything, not visible because its the same color as the body */
#container {
	padding: 5px;
	height: 97vh;
	background-color: rgb(207, 255, 255);
	font-family: Georgia, serif;
	font-size: 14pt;
}

body{
	background-color: rgb(207, 255, 255);
}

img{ 
	border-radius: 20px;
}

a:link {
	color: white;
	text-decoration: none;
}

a:visited {
	color: white;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: rgb(255, 160, 28);
	background-color: pink;
}

a:active {
	color: yellow;
	text-decoration: none;
}