/* all div items are selected and we float them all, by default they stand alone, clear both */

div {
float: left;
clear: both;
}

#container {
height: 1800px;
margin-bottom: 40px;
width: 90%;
margin-left: 5%;
background-color: black;
}



.contentbox {
background-color: darkred;
width: 58%;
margin-left: 5%;
min-height: 400px;
margin-top: 10px;
clear: none;
font-size: 33pt;
color: white;
}


.sidebarofmenus {
width: 25%;
margin-left: 5%;
background-color:yellow;
height: 50px;
clear: none;
height: 800px;
}


/* rowe gifted the menu box */
.menubox {
background-color: white ;
background-color: darkgrey;
margin-top: 5px;
width: 90%;
margin-left: 5%;
/* size is 1 of the viewport width , mobile phome improvement */
font-size: 4vw;
}


/* taken from website w3cschools style links  */

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

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

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

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

/* canvas said use this to center images */
img {
float:left;
width:50%;
margin-right:25%;
margin-left:25%;
}