/*Class Selectors*/
.center				{ display: block;
						margin-left: auto;
						margin-right: auto;
						width: 75%;					
					}
.float-right		{ float: right;
						width: 20%;
						
}
.iframe-container 	{ position: relative;
						width: 100%;
						padding-bottom: 56.25%;
						height: 0;
					}
					
.iframe-container iframe { position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;	
						}
.gallery				{ display: grid;
							grid-template-columns: repeat(auto-fill, 300px);
							grid-template-rows: auto;
							grid-gap: 0.2em;
							gap: 0.2em;}
				
/*ID Selectors*/
#wrapper 		{ /* See Media Queries Notes */
				}

* 				{ box-sizing: border-box;
					margin: 0;
				}
body			{ font-family: Verdana, Arial, sans-serif;					
				} 
				
header			{ font-size: 90%;
					font-family: Verdana, Arial, sans-serif;
					color: #4C1130;  
					background-color: #FFFFFF;
					background-image: url(header2.png);
					text-align: center;		
					background-size: auto 100%;
					padding: .5em 0 .5em 0;
				}

nav				{ margin-top: 1.5vw;
					background-color: #6AA84F;
				}

nav ul			{ list-style-type: none;
					padding-left: 0; 
					border-top: 1px solid #EEEEEE;
				}
nav ul li 		{ border-bottom: 1px solid #EEEEEE;  
					text-align: center;
					padding-top: .5em;
					padding-bottom: .5em;
				}
				
nav a			{ font-family: Verdana, Arial, sans-serif;
					text-decoration: none;
					font-weight: bold;
				}
				
nav a:link		{ color: #4C1130; }
nav a:visited 	{ color: #351C75;}
nav a:hover		{ color: #FFFFFF;}				
				
main			{ background-color: #E1EDF7;
					color: #000000;
					padding: 1em; 
				}
main h2			{ font-family: Verdana, Arial, sans-serif;
					color: #4C1130;
					text-align: center;
				}
				
main h3			{ font-family: Verdana, Arial, sans-serif;
					color: #4C1130;
				}
figure 			{ text-align: center; }
					
footer			{ background-color: #D9EAD3;
					font-size:70%;
					text-align: center;
					padding: 0.5em 0;
				}

@media (min-width: 600px) {
#wrapper		{ display: grid;
					grid-template-columns: 20% auto auto;
					grid-template-rows: auto auto auto auto auto;
				}
header			{ grid-row: 1 / 2; grid-column: 1 / 4; }
nav				{ grid-row: 2 / 3; grid-column: 1 / 4; }
nav ul			{ display: flex;
					flex-flow: row nowrap;
					justify-content: space-around;
				}
nav ul li		{ border-bottom: none;
				}
main			{ grid-row: 3 / 5; grid-column: 1 / 4;
					background-color: #E1EDF7;
				}
main iframe		{ grid-row: 3 / 4; grid-column: 2 / 3; }
footer			{ grid-row: 5 / 6; grid-column: 1 / 4; }
}

@media (min-width: 1024px) {
#wrapper		{ width: 80%;
					margin: auto;
					max-width: 1200px;
					display: grid;
					grid-template-columns: 150px auto auto auto auto;
					grid-template-rows: auto auto auto auto;
				}
body			{ background-color: #FFFFFF;
					background-image: url(nookwallpaper.jpg); 			
				}
header			{ grid-row: 1 / 2; grid-column: 1 / 6;
					font-size: 150%; 				
					padding-bottom: 5px;
					padding-top: 60px;
					vertical-align: baseline;
				}
nav				{ grid-row: 2 / 4; grid-column: 1 / 2; }
nav ul			{ display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					list-style-type: none;
					margin: 0;
					padding: 0; }
nav ul li		{ padding-top: 0;
					padding-bottom: 0;
				}
nav a			{ text-decoration: none;
					padding: 10%; 
					display: block;
					background-color: #6AA84F;
					border-bottom: 1px solid #000000;
					font-family: Verdana, Arial, sans-serif;
					font-weight: bold; 
					font-size: 130%
				}
nav a:link		{ color: #4C1130; }
nav a:visited 	{ color: #351C75;}
nav a:hover		{ color: #274E13;
					background-color: #EAEAEA; }
					
main			{ grid-row: 2 / 4; grid-column: 2 / 6;
					margin-top: 1.5vw;
					padding: 5%;
					font-size: 115%;
					background-color: #E1EDF7;
				}
main iframe		{ grid-row: 2 / 3; grid-column: 3 / 5; }
footer			{ grid-row: 4 / 5; grid-column: 1 / 6; }
}