/*

Sweet Treats CSS page
Author: Karter Cruse
Date: 5/18/2021

*/
* { box-sizing: border-box; }
header { background-image: url(chocolate-croissants.jpg);
		background-color: #454545;
		background-size: 100%, 100%;
		color: #FFFFFF;
		margin-top: 0px;
		text-decoration: none;
		font-size: 80%;
		grid-row: 1 / 2;
		grid-column: 1 / 4;
}
/*Title bar with crossants and title.
*/
header a { text-decoration: none; }
header a:link { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover { color: #EDF5F5; }
main { background-color: #40407A;
       color: #FFFFFF; 
	   font-family: Verdana, Arial, sans-serif;
	   margin: 0;
	   grid-row: 2 / 3;
	   grid-column: 1 / 3;
	   text-align: center;
}
/*purple background on main part of the page*/
nav { text-align: right;
	background-color: #974911;
	margin: 0;
	padding-top: 0em;
	padding-bottom: 0em;
	padding-right: 0;
	z-index: 9999;
	width: auto;
	height: auto;
	grid-row: 2 / 3;
	grid-column: 3 / 4;
}
nav ul { list-style-type: none;
		margin: 0;
		padding-left: 2em;
		font-size: 1.1em;
}
nav li {padding-left: 0em;
		text-align: left;
		grid-row: 2 / 3;
		grid-column: 3 / 4;
}
nav a { text-decoration:none;
}
nav a:link { color: #AF890D; }
nav a:visited { color: #564717; }
nav a:hover { color: #977811; }
/*Navigation elements that give size and location as well as colors when previously visited.*/
footer { text-align: center; 
		grid-row: 3 / 4;
		grid-column: 1 / 4;
}
/*Moves footer to center of the page in the bottom most grid*/
video { width: 100%; height: 80%; }
/*Gives dimensions for videos*/
#mygrid { display: grid;
		grid-template-columns: 10% 80% 10%;
		grid-template-rows: 100px auto auto;
}
/*Sets up grid structure on pages*/
#images { display: block;
		height: auto;
		width: auto;
		
}
/*Gives images their proper size*/
#flow { display: block;	
}
/*Organizes display more*/
@media (min-width: 600px) {
		form { width: 60%;
			max-width: 40em;
			grid-gap: 1em;
			grid-template-columns: 9em 1fr;
			grid-template-rows: auto auto;}
			input[type="submit"] { grid-column: 2/3; 
									width: 9em;}
		nav ul { display: flex; flex-direction: column; flex-wrap: nowrap;
				justify-content: flex-end; }
		nav li { width: 7em;}
		div { padding-left: 2em;
				 padding-right: 2em;}
}
/*Organizes display for mobile devices*/
@media (min-width: 1024px) {
		header { font-size: 120%;}
		nav { font-weight: bold;}
}
/*Organizes display for larger mobile devices*/