/* http://meyerweb.com/eric/tools/css/reset/ 
		   v2.0 | 20110126
		   License: none (public domain)
		*/

		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}

       /*don't touch the reset above*/



/* color scheme

	brown #cfc0b2
	purple 	#5a1199
	green #025918
	dark green #093917

Fonts

	font-family: 'Comic Neue', cursive;
	font-family: 'Poppins', sans-serif;
	font-family: 'Charmonman', cursive;


*/
img {
	width: 100%;
	height: auto;
    }

body {
	  font-size: 20px;
	  background-color:#093917;
     }

		
#wrapper {
		  width: 90%;
		  background-color: #cfc0b2;
  		  border: 5px solid #025918;
		 }

nav {
	 display: grid;
	 font-size: .3em;
	 grid-area: 2 / 1 / span 1 / span 4;

	}

nav ul {
		list-style-type: none;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		}

nav li a  {
	       display: block;
	       text-align: center;
	       text-decoration: none;
	       font-family: 'Charmonman', cursive;
	       color: #cfc0b2;
	       padding-top: 20%;
	       padding-bottom: 10%;
	       background-color: #093917; 
	    }

nav li a:hover {
	    	    background-color: #5a1199;
	    	    padding-top: 20%;
	            padding-bottom: 10%;
	           } 



#navbottom {
	    	font-size: .9em;
	    	font-weight: bold;
	    	padding-top: 10%;
	       }

header {
		margin: 0;
		font-family: 'Charmonman', cursive;
		font-size: 3em;
		font-weight: bolder;
		text-align: center;
		color: #5a1199 ;
		background-color: #cfc0b2;
		}

h1 {
	padding-top: 40px;
	padding-bottom: 0;

	}

a {
	color: 	#5a1199;
}


#grid-container {
			     display: grid;
				 grid-template-rows: auto auto;
				 grid-template-columns: auto;
		 		}

	#main {
       	   padding: 2%;
	       grid-area: 1 / 1 / 2 / 2;
	      }

	#img {
	      grid-area: 2 / 1 / 3 / 2;
	    }

p {
	font-family: 'Poppins', sans-serif;
   	margin: 10px;
   	color:#5a1199;
   	line-height: 1.15;
   	text-indent: 20px;
 }

span {
	  font-style: italic;
 	  font-weight: bold;
	 }

#poem {
	font-style: italic;
	font-weight: normal;
}
	    
figcaption {
			font-family: 'Poppins', sans-serif;
			margin: 10px;
			color: #5a1199;
			font-size: .8em;
	       }

#webgrid figcaption {
	font-size: 1em;
}

video {
       width: 100%;
 	   height: auto;
	  }


footer {
    	padding: 5%;
    	text-align: center;
    	font-family: 'Charmonman', cursive;
    	font-weight: bold;
    	color: #5a1199;
    	line-height: 1.5;
	    }


 #gallery {
	       display: grid;
		   grid-template-rows: repeat(9, auto);
		   grid-template-columns: auto;
		   padding: 2%;
		   padding-bottom: 8%;
	    }

		.pic {
			  grid-area: 1 / 1 / 2 / 2 ;
			 }

		.pictwo {
				 grid-area: 2 / 1 / 3 / 2;
				}

		.picthree {
				   grid-area: 3 / 1 / 4 / 2;
				}

		.picfour {
				  grid-area: 4 / 1 / 5 / 2;
				}

		.picfive {
				  grid-area: 5 / 1 / 6 / 2;
				}

		.picsix {
				 grid-area: 6 / 1 / 7 / 2;
				}

		.picseven {
				   grid-area: 7 / 1 / 8 / 2;
				  }
	
		.piceight {
				   grid-area: 8 / 1 / 9 / 2;
				  }

		.picnine {
				  grid-area: 9 / 1 / 10 / 2;
				 }			   


#vid-grid {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-template-columns: auto;
	padding: 5%;
}

		#video {
			grid-area: 1 / 1 / 2 / 2 ;
		}

		#videotwo {
			grid-area: 2 / 1 / 3 / 2 ;
		}

		#videothree {
			grid-area: 3 / 1 / 4 / 2 ;
		}

		#videofour {
			grid-area: 4 / 1 / 5 / 2 ;
		}

	#wedintr {
		margin: 20%;
	}

#webgrid {
		display: grid;
		grid-template-rows: auto auto auto;
		grid-template-columns: auto;
		padding: 1%;
		}
	


	#image {

		grid-area: 1 / 1 / 1 / 2;
	}

	#imagetwo {

		grid-area: 2 / 1 / 2 / 2;
	}

	#imagethree {

		grid-area: 3 / 1 / 3 / 2;
		padding-top: 2%;
	}


  /* tablet styles */

@media only screen and (min-width: 600px) and (max-width: 800px) {

 video {
  			width: 100%;
 			 height: auto;
			}

#wrapper {
			width: 70%;
			margin: 10% auto;
			border: 10px solid #025918;
		}

header {
	font-size: 3.5em;
}

nav {
	font-size: .4em;
	border-width: 10px 5px;
}

#img {
	width: 60%;
	padding-left: 20%;
}

#navbottom {
	font-size: 1.2em;
}

 #gallery {
	    	display: grid;
			grid-template-rows: repeat(9, auto);
			grid-template-columns: auto auto;
			grid-gap: 2%;
			padding-bottom: 40%;
	    }

				.pic {
					grid-area: 1 / 1 / 2 / 2 ;
				}

				.pictwo {
					grid-area: 1 / 2 / 2 / 3;
				}

				.picthree {
					grid-area: 2 / 1 / 3 / 2;
				}

				.picfour {
					grid-area: 2 / 2 / 3 / 3;
				}

				.picfive {
					grid-area: 3 / 1 / 4 / 2;
				}

				.picsix {
					grid-area: 3 / 2 / 4 / 3;
				}

				.picseven {
					grid-area: 4 / 1 / 5 / 2;
				}
				.piceight {
					grid-area: 4 / 2 / 5 / 3;
				}

				.picnine {
					grid-area: 5 / 1 / 6 / 3;
				}

	#webgrid {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
		grid-gap: 2%;
		margin: 2%;
		}
	
	#image {

		grid-area: 1 / 1 / 2 / 2;
	}

	#imagetwo {

		grid-area: 1 / 2 / 2 / 3;
	}

	#imagethree {
		padding-bottom: 5%;
		grid-area: 2 / 1 / 3 / 3;
		}


}
  /* desktop styles */

@media only screen and (min-width: 801px) {
	
 video {
  			width: 100%;
 			height: auto;
			}

#wrapper {
			width: 70%;
			margin: 10% auto;
			border: 10px solid #025918;
		}

header {
	font-size: 5em;
	padding-top: 5%;
}

nav {
	font-size: .35em;
	border-width: 10px 5px;
}

p {
	font-size: 1.3em;
}

#img {
	width: 60%;
	padding-left: 20%;
}

#navbottom {
	font-size: 1.7em;
	border-width: 10px 5px;
}

footer {
	font-size: 1.5em;
}

 #gallery {
	    	display: grid;
			grid-template-rows: repeat(4, auto);
			grid-template-columns: auto auto auto;
			grid-gap: 2%;
	    }

				.pic {
					grid-area: 1 / 1 / 2 / 2 ;
				}

				.pictwo {
					grid-area: 1 / 2 / 2 / 3;
				}

				.picthree {
					grid-area: 1 / 3 / 2 / 4;
				}

				.picfour {
					grid-area: 2 / 1 / 3 / 2;
				}

				.picfive {
					grid-area: 2 / 2 / 3 / 3;
				}

				.picsix {
					grid-area: 2 / 3 / 3 / 4;
				}

				.picseven {
					grid-area: 3 / 1 / 4 / 2;
				}
				.piceight {
					grid-area: 3 / 2 / 4 / 3;
				}

				.picnine {
					grid-area: 3 / 3 / 4 / 4;
				}

#vid-grid {
	display: grid;
	grid-template-rows: repeat(2, auto);
	grid-template-columns: repeat(2, auto);
	grid-gap: 5%;
}

		#video {
			grid-area: 1 / 1 / 2 / 2 ;
		}

		#videotwo {
			grid-area: 1 / 2 / 2 / 3 ;
		}

		#videothree {
			grid-area: 2 / 1 / 3 / 2 ;
		}

		#videofour {
			grid-area: 2 / 2 / 3 / 3 ;
		}


	#webgrid {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
		grid-gap: 5%;
		padding: 5%;
		padding-top: 0;
		}
	


	#image {

		grid-area: 1 / 1 / 2 / 2;
	}

	#imagetwo {

		grid-area: 1 / 2 / 2 / 3;
	}

	#imagethree {
		padding-bottom: 5%;
		grid-area: 2 / 1 / 3 / 3;
	}

}