/* This part at the top will display on the Mobile and desktop views if not overridden in the media query*/
			
			
			body {
				background-color:green;
				color:#F7E9D2;
				font-family: 'Akronim', cursive;
			}
			p{line-height: 350%;}

			#wrapper {
				width: 70%;
				background-color:#F7E9D2;
				margin-left:auto;
				margin-right:auto;
				padding: 10px;
				color:#332B1C;
				}
				
				header{background-color:#DDA93E;
				color:#332B1C;
				font-size: 5.5em;
				font-family: 'Comic Neue', cursive;
				text-align:center;
				background-image: url("images/hummingbird-1858416_1920.jpg");
				background-repeat:no-repeat;
				background-size:cover}
				
				.weirdfont {font-family: 'Akronim', cursive;}
				
			h1, h2{
				text-align: center;
				clear:both;
				font-family:"chiller";
			}
			
			
			nav ul{
				list-style: none;
				margin-left:auto; margin-right:auto;
				text-align: center;
				margin-top:15px;
				margin-bottom:15px;
				
			}

				/* this part is making sure that the menus on the mobile span the entire page and are below each other*/
		 	nav li a {
				height: 2.45em;
				line-height: 1.45em;
				display:block;
				color: white;
				text-decoration: none;
				text-align: center;
				background-color: green;
				padding:.5em;
				margin-bottom:1em;
				text-transform:uppercase;
				padding-top:1em;
				padding-bottom:1em;
			}

			nav li a:hover {
				color:#555;
				background-color: purple;

			}
			
			.active{background-color:purple
			}
		


		table, td{
			border: 1px solid black;
			}
			
			table{
			margin-left: auto;
			margin-right: auto;
			width: 25em
			}
			
			tr:nth-child(even) 
			{background-color: #B29788}
			
			tr:nth-child(odd) {background-color: #DDA93E}
			
			/* this part is turning off the display of the footer on the mobile*/
			footer{
			padding:2em;
			background-color:#332B1C;
			color:#F7E9D2;
			display:flex
			}
			
			footer a{}

			main a{color:lime; text-decoration: none;
				font-size: 1.5em}

			main a:hover{color:orange;
						font-size:3em}
			
			main{display:block;
			}
			
		.cols{
		width:100%;
	}
	
	/*items below will only show up in the desktop view and will over ride the rules set up above  */
@media only screen and (min-width: 1200px){
			
	.break {
 	 flex-basis: 100%;
 	 width: 0;
}
		
	/* this part makes sure you can have multple columns in the footer , the parts are seperated by having divs around them - eg 5 divs then 5 columns*/
	footer{display:flex;
			flex-direction:row;
			justify-content:space-around;
			padding:1em;
		}
		
		/* this part is setting up the main so that on a desktop view it will display mutiple columns - needs to work with the .cols class*/
		main{display:flex;
			padding-top:1em;
			justify-content: center
		}
/* This is used in the html to make two columns*/
	.cols{
		width:49%;
		padding: .5em;
	}
	
	img {max-width:75%;
		margin-left: auto;
		margin-right: auto;
		display:flex
		}
	
	


	
	nav ul{	display:flex;
			flex-wrap:wrap;
			justify-content:space-around;
			}
			
	nav li a {
			width:8em;
			color:white;
			text-transform:uppercase;
			background-color: #f00;}

}