/* all divs behave this selection  */
div{
	float: left;
	clear:both;
}


#container {
background-color: orange;
height: 1800px;
margin-bottom: 40px;
width: 80%;
margin-left: 10%;
float: left;
clear: both;
	/*stop using margin auto, does not work with float*/
	/*float is needed to make your website mobile friendly with percentages*/
}

.sidebarofmenus{
	/*width: 14%;*/
	min-width: 200px;
	margin-left: 5%;
	background-color: yellow;
	height: 325px;
	margin-top: 10px;
	clear: none;
	padding-left: 10px;
	padding-right: 10px;
}

.contentholder {
	background-color: darkred;
	clear: none;

	/*If I add padding I have to also redcue the width, and cannot exceed 100%*/
	width: 65%;
	margin-top: 10px;
	/* text color */
	color: white;
	font-family: fantasy;
	font-size: 30pt;
	/*text-align: right;*/

	padding: 2vw;
}



.graymenubox{
	background-color: gray;
	width: 40%;
	/* don't let the boxes squish the words */
	min-width: 85px;
	margin: 2%;
	border-radius: 5px;

	/* cleaned up the padding top, bottom, left and right */
	padding-right: 20%;
	padding-top: 1vh;
	padding-bottom: 1vh;
	padding-left: 1vw;
	padding-right: 1vw;

	font-size: 25;

}

/* this will center all my pictures and make them half the size of their parent element/div    */
img {
float:left;
clear: both;
width:50%;
margin-right:25%;
margin-left:25%;
}


/* unvisited link */
a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* AI told us that the new trend is not changing color on navigation menus , seen as ugly */


/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: red;
}