/*global rule that all divs must follow unless the div is told otherwise*/
div {
	float: left;
	clear: both;
}

/*styles all images*/
img {
float:left;
width:50%;
margin-right:25%;
margin-left:25%;
}

/*styling for the container*/
#container {
background-color: lightblue;
/*size*/
width: 80%;
height: 4000px;
/*margin*/
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
/*padding*/
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
/*border*/
border-radius: 50px;
/*font*/
font-size: 45pt;
font-family: times new roman;
}

/*styling for the header*/
.header {
background-color: lightgreen;
/*size*/
width: 99%;
height: 170px;
/*margin*/
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
margin-bottom: 10px;
/*border*/
border-radius: 50px;
}

/*styling for the text box*/
.textbox {
background-color: pink;
/*size*/
width: 95%;
height: 3730px;
/*margin*/
margin-left: 7px;
margin-right: 7px;
margin-top: 20px;
margin-bottom: 10px;
/*border*/
border-radius: 50px;
/*text*/
font-size: 20pt;
text-align: center;
/*padding*/
padding: 30px;
}

/*styling for all of the menu buttons*/
.menubutton {
background-color: darkslateblue;
/*size*/
width: 17% ;
height:100px ;
/*margin*/
margin-top: 1.3%;
margin-bottom: 1%;
margin-left: 1.5%;
/*border*/
border-radius: 30px;
/*float*/
float: left;
clear: none;
/*font*/
font-size: 30pt;
font-family: sans-serif;
/*color is used to define a font color, not font-color ( it doesnt exist)*/
color: white;
text-align: center;
padding-top: 30px;
}

/*copy of menubutton styling but in a darker color*/
.darkmenubutton {
background-color: black;
/*size*/
width: 22% ;
height:100px ;
/*margin*/
margin-top: 1.3%;
margin-bottom: 1%;
margin-right: 1%;
margin-left: 1.8%;
/*border*/
border-radius: 30px;
/*float*/
float: left;
clear: none;
/*font*/
font-size: 30pt;
font-family: sans-serif;
/*color is used to define a font color, not font-color ( it doesnt exist)*/
color: white;
text-align: center;
padding-top: 30px;
}

/*class for styling the top image on the home screen*/
.homeimagetop {
/*size*/
width: 94%;
height: 900px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 3%;
margin-right: 3%;
margin-top: 50px;
margin-bottom: 1%;
}

/*class for styling the bottom image on the home screen*/
.homeimagebottom {
/*size*/
width: 94%;
height: 700px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 3%;
margin-right: 3%;
margin-top: 20px;
margin-bottom: 1%;
}

/*class for styling the top image in the energy section*/
.energyimagetop {
/*size*/
width: 80%;
height: 800px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 10%;
margin-right: 3%;
margin-top: 50px;
margin-bottom: 1%;
}

/*class for styling the bottom image in the energy section*/
.energyimagebottom {
/*size*/
width: 80%;
height: 700px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 10%;
margin-right: 3%;
margin-top: 50px;
margin-bottom: 1%;
}

/*class for styling the top image in the circuit section*/
.circuitimagetop {
/*size*/
width: 75%;
height: 700px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 12%;
margin-right: 3%;
margin-top: 50px;
margin-bottom: 1%;
}

/*class for styling the bottom image in the circuit section*/
.circuitimagebottom {
/*size*/
width: 75%;
height: 800px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 12%;
margin-right: 3%;
margin-top: 50px;
margin-bottom: 1%;
}

/*class for styling the top image in the fun facts section*/
.funfactsimagetop {
/*size*/
width: 65%;
height: 600px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 3.5%;
margin-right: 3%;
margin-top: 20px;
margin-bottom: 1%;
/*float*/
float: none;
clear: none;
}

/*class for styling the bottom image in the fun facts section*/
.funfactsimagebottom {
/*size*/
width: 65%;
height: 800px;
/*border*/
border-radius: 50px;
/*margin*/
margin-left: 3.5%;
margin-right: 3%;
margin-top: 10px;
margin-bottom: 1%;
/*float*/
float: none;
clear: none;
}

/*styling for the final project page text box*/
.finalprojecttextbox {
background-color: pink;
/*size*/
width: 95%;
height: 3300px;
/*margin*/
margin-left: 7px;
margin-right: 7px;
margin-top: 20px;
margin-bottom: 10px;
/*border*/
border-radius: 50px;
/*text*/
font-size: 20pt;
text-align: center;
/*padding*/
padding: 30px;
}