/* CSS Document */



nav{
	width: 100%;
}


nav ul {
    padding: 0;
    margin: 0;
    text-align: center; 
}

nav ul li {
    display: inline-block;
    padding: 20px;
	padding-bottom: 50px;
    margin: 0 50px;
}

nav ul li a {
    color:steelblue;
    font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    text-decoration: none;
    font-size: 18px;
}


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}




  .page1container {
    display: flex;
    height: 500px; 
	width: 100%;
	justify-content: center;
	align-items: center;
  }




.itemscontainer {
    display: flex;
    height: 100%; 
	flex-wrap: wrap;
	width: 50%;
	align-items: center;  
  }



  .square {
    width: 50%; 
    height: 50%; 
    background-color:plum;
    border: 4px solid white; 

	  
  }

.rectangle {
    width: 100%; 
    height: 50%;
    background-color:plum;
    border: 4px solid white; 
  }






.pinkboxcontainer {
	display: flex;
	justify-content: center;
	height: 500px;
	width: 45%;
	flex-wrap: wrap;
	
}

.pinkboxcontainer > div {
	background-color: pink;
	color: white;
	width: 150px;
	border: 4px solid white;
}


.pink-box7{
	height: 80%;
}

.pink-box8{
	height: 20%;
}




.purpleboxcontainer {
	display: flex;
	height: 500px;
	width: 150px;
	justify-content: center;
	flex-wrap: wrap;
	
}

.purpleboxcontainer > div {
	background-color: skyblue;
	margin-left: 0px;
	width: 150px;
	border: 4px solid white;
}



  .page4container {
    display: flex;
    height: 500px; 
	width: 100%;
	justify-content: center;
	align-items: center;
  }

.itemscontainerpage4 {
    display: flex;
    height: 100%; 
	flex-wrap: wrap;
	width: 25%;
	align-items: center;  
  }



 .page4square {
    width: 50%; 
    height: 50%; 
    background-color: thistle;
    border: 4px solid white; 

	  
  }

.rectangle1 {
    width: 100%; 
    height: 66.67%;
    background-color:thistle;
    border: 4px solid white; 
  }


.rectangle2 {
    width: 100%; 
    height: 33.33%;
    background-color:thistle;
    border: 4px solid white; 
  }



.rectangle3 {
    width: 100%; 
    height: 33.33%;
    background-color:thistle;
    border: 4px solid white; 
  }


.page4square {
    width: 50%; 
    height: 33.33%;
    background-color:thistle;
    border: 4px solid white; 
  }











/* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
 
	 nav ul li {
    margin: 0 5px;
	 
	 }

	 .purpleboxcontainer > div {
        width: 100%;
    }
	 
	 
	 .pinkboxcontainer > div {
        width: 100%;
    }
	 
	 .itemscontainerpage4 {
        width: 100%;
    }
}	 
	 

 
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (max-width: 768px) {
     
nav ul li {
    margin: 0 8px;
  }
 
	 
	 .itemscontainer {
        width: 70%;
	 }
	 
	  .pinkboxcontainer > div {
        width: 70%;
    }
	 
	 
}
	 
	 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
 
 
 }