@charset "utf-8";

/*
	New Perspectives on HTML5 and CSS3, 8th Edition
	Chapter 5
	Coding Challenge 1
	
	Author: Chris LaFleur
	Date: 10/15/23
*/




/* Devices with max width of 500 pixels */
@media only screen and (max-width: 500px){
	article img{
		display: none;
	}
	
	ul.submenu{
		text-align: center;
	}
}



/* Devices with min width of 501 pixels */
@media only screen and (min-width: 501px){
	nav{
		float: left;
		width: 130px;
		height: 400px;
		margin: 30px 25px 0px 0px;
	}
}



/* Devices with a min width of 710 pixels */
@media only screen and (min-width: 710px){
	nav{
		float: none;
		width: 100%;
		height: auto;
		margin: 0;
	}
	
	ul.mainmenu{
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}
	
	ul.mainmenu li{
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: 120px;
	}
}