:root{
--darkGrey: #353535;
--cyan:  #3C6E71;
--white: #FFFFFF;
--lightGrey: #D9D9D9;
--darkBlue:  #284B63;
}



div {
float: left;
clear: none;
}/*this makes every single one of my divs have this styling*/


#container {
background-color: var(--darkGrey);
height: 1600px;
margin-bottom: 40px;
width: 80%;
margin-left: 10%;
border

}

.headerofmenus {
width: 100%;
margin-left: 0%;
margin-top: 5%;
margin-bottom: 1%;
background-color: var(--cyan);	
border:  2px solid black;
border-bottom-color: var(--lightGrey);
}

ul {
  list-style-type: none; 
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.menubox {
text-align: center;
font-size: 16pt;
padding-top: 8px;
font: monaco;
color:  var(--lightGrey);
width: 25%;
height: 40px;
background-color: var(--cyan);
display:  block;
}



.contentholder {
background-color: var(--white);
border: 2px solid black;
width: 100%;
margin-left: 0%;
height: auto;
border-top-color: var(--lightGrey);
}




body {
background-color: var(--darkGrey);
height:  2000px;
}


.imageholder {

width: 20%;
/*height: 290px;*/	
margin-top: 10%;
margin-left: 6%;
/*padding-left: 3%;*/
/*border:  2px solid black;*/
}

img {
border: 2px solid black;
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
height: 70%;
}
.imageholder2 {
width: 20%;
/*height: 150px;*/
margin-left: 2%;
clear: none;
margin-top: 10%;
/*border:  2px solid black;*/
}
p {
 text-align: center;
 color: var(--darkBlue);
 font: Monaco;
 font-size: 25pt;
}

.imageholder3 {
margin-left: 2%;
width: 20%;
/*height: 205px;*/
margin-top: 10%;
clear: none;
/*border:  2px solid black;*/
}



/* unvisited link */
li a:link {
  color: var(--darkBlue);
  text-decoration: none;
}

/* visited link */
li a:visited {
  color: var(--darkBlue);
  text-decoration: none;

}

/* mouse over link */
li a:hover {
  color: var(--darkBlue);
  text-decoration: none;

}

/* selected link */
li a:active {
  color: var(--darkBlue);
  text-decoration: none;

}

.imageholder4 {
margin-left: 2%;
width: 20%;
/*height: 205px;*/
margin-top: 10%;
clear: none;
/*border:  2px solid black;*/
}

.actualpic{
display:  block;
margin-left: 15%;
margin-bottom: 2%;
}

.epicphoto{
  float: right;
  font-size: 20pt;
  border: 2px solid var(--darkGrey);
  margin-right: 1%;
  position: absolute;
  top: 1225px;
  right: 300px;
  font-size: 18px;
  border-radius: 25px;
}
.hobbies{
  font-size: 15pt;
  float: left;
  margin-left: 6%;
  margin-top: 4.5%;
  width: 35%;
}
.beatmaking{
  float: right;
  margin-right:  10%;
  margin-bottom: 1%;
  margin-top: 1%;
  width: 25%;
  height: 25%;
}
.donuts{
  font-size: 15pt;
}

.hobbies2{
  font-size: 15pt;
  float: right;
  margin-left: 26%;
  margin-right: 8%;
  margin-top: 9.5%;
  width: 35%;
}

.beatmaking2{
  float: left;
  margin-left:  10%;
  margin-bottom: 1%;
  width: 25%;
  height: 25%;
}