/*Class Selectors*/ 
.center				{ display: block;
						margin-left: auto;
						margin-right: auto;
						width: 70%;					
					}
.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;}

.recipe-img				{ width: 40%; 
						}

.myComments				{ align-items: left;}

.contact				{ text-align: center;}

/*HTML Element Selectors*/
* 				{ box-sizing: border-box;
					margin: 0;
				}
body			{ font-family: Verdana, Arial, sans-serif; } 
				
header			{ font-size: 75%;
					font-family: 'Leckerli One', sans-serif;
					color: #292929;  
					background-color: #CDE1F4;
					text-align: center;	
					align-items: center;	
					padding: .5em 0 .5em 0;
				}

nav				{ background-color: #F2C1C1; }

nav ul			{ list-style-type: none;
					padding-left: 0; 
				}

nav ul li 		{ text-align: center;
					padding-top: .5em;
					padding-bottom: .5em;
					border-bottom: 1px solid #E1EDF7;
				}
				
nav a			{ text-decoration: none;
					font-weight: bold;
					/*font-size: 75%;*/
				}
				
nav a:link		{ color: #292929; }
nav a:visited 	{ color: #292929;}
nav a:hover		{ color: #E03838;}				
				
main			{ background-color: #E7F1F9;
					color: #000000;
					padding: 3%;
					text-align: center;
				}


p 				{ text-align: left;}

/*figure 			{ text-align: center; }*/
					
footer			{ background-color: #CDE1F4;
					font-size:70%;
					text-align: center;
					padding: 0.5em 0;
				}
				
/* Media Queries*/
/* Initial CSS selectors are for a smartphone display (<480px). The media queries below are
 for tablet (>600px) and desktop (>1024px). */

@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;
					font-size: 90%;
				}

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;
					font-size: 75%;
				}

main			{ grid-row: 3 / 5; grid-column: 1 / 4;
					background-color: #E1EDF7;
					padding: 2.5%;
				}

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(background2.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;
					font-size: 80%;
				}

nav a			{ text-decoration: none;
					padding: 10%; 
					display: block;
					border-bottom: 1px solid #E1EDF7;
					font-family: Verdana, Arial, sans-serif;
				}
					
main			{ grid-row: 2 / 4; grid-column: 2 / 6;
					padding: 2.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; }
}