ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}



.menu{
	
	 margin: 0 auto;
	
	
}













.darkgray{
	position: absolute;
	background-color:#4F5250; 
	width:500px;
	height:500px;
	
	
}
.lightgray{
	
	position: absolute;
	background-color:#9DA29F; 
	width:420px;
	height:420px;
	margin-left: 40px;
	margin-top: 60px;
	
	
}

.darkgreen{
	position: absolute;
	background-color:green; 
	width:270px;
	height:270px;
	margin-left: 115px;
	margin-top: 180px;
	
}

.lightgreen{
	position: absolute;
	background-color:#547564; 
	width:200px;
	height:200px;
	margin-left: 20px;
	margin-left: 150px;
	margin-top: 230px;
	
}


.ggbox{
	
width: 500px;
height: 500px;
 margin: 0 auto;
	


}


.ggcontainer{

 width: 500px;
 height: 500px;
	 margin: 0 auto;
 	




}








.contianerrainbow{

width: 600px;
height: 600px;
 margin: 0 auto;
}






.boxrainbow{

width: 600px;
height: 200px;
 margin: 0 auto;
	
	
	
}



.cgcontianer{
	
width: 600px;
height: 550px;
margin: 0 auto;	
	
	
}




.cgbox{
	
		
width: 600px;
height: 550px;
	
	
	
	
}









.cream{
	
	background-color: #A8AB91;
	width: 300px;
	height: 600px;
	float: left;
	
	
	
}



.green{
	
	background-color: #0B3E1C;
	width: 300px;
	height: 600px;
	float: left;
	
	
	
}

.creambox{
	
	background-color:#0B3E1C;
	width: 200px;
	height: 190px;
	position: absolute;
	margin-top: 220px;
	margin-left: 99px;
}



.greenbox{
	
	background-color:#A8AB91;
	width: 200px;
	height: 190px;
	position: absolute;
	margin-top: 220px;
	margin-left:300px; 
}







.red{
	width: 200px;
	height:600px;
	background-color: #854444;
	float: left;
	
}
.yellow{
	
	background-color: #C4C61C;
	width: 200px;
	height:600px;
	float: left;
}


.blue{
	padding-left: 400px;
	background-color: #3F649C;
	width: 200px;
    height:600px;
	
}






.contianerpurple{

width: 520px;
height: 600px;

}

	
.purplebigbox{
	
	width:520px;
	height: 600px;
	background-color:rebeccapurple;
    margin: 0 auto;

}

.pinkbigbox{
	
	width:800px;
	height: 500px;
	background-color:hotpink;
	
	
}

.pinkcontainer{
	width: 800px;
	height: 500px;
	
	margin: 0 auto;
	
}

#header{
	
	font-size: 70px;
	text-align: center;
	font-family: Adobe Caslon Pro Bold;
		
}

body{
	
	background-color: #DADADA;
	
}

.box1{ 
	  
	 position: absolute;
	  margin-top: 100px;
	  margin-left: 320px;
	  background-color:black;
	  width: 100px;
	  height: 100px;

}



.box2{
position: absolute;
background-color:black;
width: 100px;
height: 100px;	
	 margin-top: 300px;
	margin-left: 320px;
}


.box3{
	
	position: absolute;
	background-color:black;
	width: 100px;
	height: 100px;
	margin-top: 300px;
	margin-left: 80px;
	
	
}



.box4{
	
	position: absolute;
	margin-top: 100px;
	margin-left: 80px;
	background-color:black;
	width: 100px;
	height: 100px;
	
	
	
}






.pinkboxgreen{
	
	position: absolute;
	background-color:green;
	width: 200px;
	height: 100px;
	margin-top: 400px;
	margin-left: 0px;
	
	
}



.pinkboxred{
	
	position: absolute;
	margin-top: 00px;
	margin-left: 0px;
	background-color:red;
	width: 100px;
	height: 100px;

}





.pinkboxblue{ 
	  
	 position: absolute;
	  margin-top: 00px;
	  margin-left: 600px;
	  background-color:blue;
	  width: 200px;
	  height: 100px;




}




.pinkboxyellow{

position: absolute;
background-color:yellow;
width: 100px;
height: 100px;	
margin-top: 400px;
margin-left: 700px;

}