/* select all divs make them all consistent */

div {
	float: left;
	clear: none;
}


/*EVERYTHING FOR HOME PAGE */
	.homeimage {

		padding-top: 5px;
		margin-left: 20%;
		border-radius: 20px;
		margin-bottom: 20px;

	}

	.mermaidtext {
	padding: 30px;
	}


/*EVERYTHING FOR GENERAL WEBPAGE */

	#container {
	background-color: lightsteelblue ;
	/*height: 1200px;*/
	margin-bottom: 40px;
	margin-left: 10%;
	float: left;
	border-radius: 40px;
		/*stop using margin auto, does not work with float*/
		/* float is needed to make your website mobile friendly with percentages */
	}

	.whitecontentholder {
	background-color: white;
	clear: none;
	float: left;
	/* if I add padding I must reduce the width, cant exceed 100% */
	width: 80%;
	margin-left: 10%;
	/*height: 700px;*/
	margin-top: 55px;
	border-radius: 40px;
	font-size: 30px;
	margin-bottom: 20px;
	}

	.pageheader {
	width: 80%;
	margin-top: 10px;
	margin-left: 10%;
	background-color: clear;
	height: 70px;
	border-radius: 40px;
	text-align: center;
	padding-top: 10px;
	font-size: 40px;
	border-color: royalblue;
	}

	.menuholder {
	width: 80%;
	margin-top: 10px;
	margin-left: 10%;
	background-color: lightblue;
	height: 80px;
	border-radius: 40px;
	}
	/* both menu holder and page header are similar */

	.menusmall {
	margin-left: 135px;
	color: black;
	padding: 20px;
	margin-top: 10px;
	background-color: lightsteelblue;
	font-size: 15pt;	
	clear: none;
	border-radius: 40px;
	border-color: royalblue;
	}

	/* top secret */
	.menusmall:hover {
		color: royalblue;
	}


	.bluecontentholder {
	background-color: royalblue;
	clear: none;
	float: left;
	/* if I add padding I must reduce the width, cant exceed 100% */
	width: 80%;
	margin-left: 10%;
	/*height: 700px;*/
	margin-top: 55px;
	border-radius: 40px;
	font-size: 30px;
	margin-bottom: 20px;
	}

/*EVERYTHING FOR THE GIRLS PAGE*/

	.thegirlsimage {
	float: left;
	padding-top: 1px;
	border-radius: 20px;
	margin-bottom: 20px;
	margin-left: 5%;
	width: 90%;
	border: 3px solid black;
	}
	/*suggested by rowe */
	.framewithtext {
	float: left;
	clear: none;
	/*background-color: yellow;*/
	padding: 5%;
	margin-left: 1%;
	width: 21%;
	}


/*EVERYTHING FOR PROS AND CONS PAGE*/
/*seperate pros text including 4 pro points*/

	.prosandconsimage {
		float: right;
		width: 200px;
		margin-right: 50px;
		margin-top: 50px;
	}

	.prostext {
	margin-left: 5%;
	margin-top: -100px;
	clear: both;
	font-size: 40pt;
	color: blue;
	}

	.pros1 {
	margin-left: 5%;
	margin-top: 60px;
	clear: both;
	}

	.pros2 {
	margin-left: 5%;
	margin-top: 55px;
	clear: both;
	}

	.pros3 {
	margin-left: 5%;
	margin-top: 75px;
	clear: both;
	}

	.pros4 {
	margin-left: 5%;
	margin-top: 80px;
	clear: both;
	margin-bottom: 20px;
	}



	/*seperate cons text including 4 cons points*/
	.constext {
	margin-left: 50%;
	margin-top: -525px;
	clear: both;
	font-size: 40pt;
	color: orange;
	}

	.cons1 {
	margin-left: 50%;
	margin-top: -370px;
	clear: both;
	}

	.cons2 {
	margin-left: 50%;
	margin-top: -275px;
	clear: both;
	}

	.cons3 {
	margin-left: 50%;
	margin-top: -167px;
	clear: both;
	}

	.cons4 {
	margin-left: 50%;
	margin-top: -56px;
	clear: both;
	}



/*EVERYTHING FOR ABOUT PAGE*/
.aboutimage {
	padding-top: 5px;
	margin-left: 2%;
	border-radius: 20px;
	margin-bottom: 20px;
	width: 400px;
}

.aboutimage2 {
	float: right;
	padding-top: 130px;
	margin-left: 5%;
	margin-right: 5%;
	width: 180px;
	margin-bottom: 10px;
}


.aboutlink {
width: 400px;
margin-left: 5%;
font-size: 20pt;


}

.abouttext {
float: left;
margin-right: 10%;
margin-left: 5%;
margin-bottom: 15px;
font-size: 24pt;
margin-top: 20px;
}