<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<title>Embedded Style Sheet</title>
	<style>
	
		#myFakeElement { color:red ; }
		
		header {
			color: #08090c;
			background-color: #edf0ff;
			grid-column: 2 / -2;
			grid-row: 1 / 1;
			text-align: center;
			border-top-style: solid;
			border-right-style: solid;
			border-left-style: solid;
			border-color: #08090c;
		}	
		
		
		nav {
			color: #08090c;
			background-color: #edf0ff;
			font-weight: bold;
			grid-column: 2 / -2;
			grid-row: 2 / 3;
			border-bottom-style: solid;
			border-right-style: solid;
			border-left-style: solid;
			border-color: #08090c;
		}		

		
		nav ul {
			list-style-type: none;
			margin: 0;
			padding: 0px 0px 0px 0px;
			display: flex;
			flex-flow: row nowrap;
			text-align: center;
		}
		
		nav ul li {
			width: 100%;
		}
		
		h2 {
			text-align: center;
		}
		
		main {
			color: #08090c;
			background-color: #edf0ff;
			grid-column: 2 / -2;
			grid-row: 4 / 5;
			border-top-style: solid;
			border-left-style: solid;
			border-right-style: solid;
			border-color: #08090c;	
		}
		
		#homesaxophone {
				height: 400px;
				background-size: cover;
				grid-row: 3 / 4;
				grid-column: 1 / -1;
				background-image: url("websitephotos/saxophonegirl.jpeg");
				background-position: center;
	
		}

		#aboutguitar {
				height: 400px;
				background-size: cover;
				grid-row: 3 / 4;
				grid-column: 1 / -1;
				background-image: url("websitephotos/aboutguitar.jpg");
				background-position: center;
		}
		
		#contactpiano {
				height: 400px;
				background-size: cover;
				grid-row: 3 / 4;
				grid-column: 1 / -1;
				background-image: url("websitephotos/contactpiano.jpg");
				background-position: center;
		}
		
		#schedulemusic {
				height: 400px;
				background-size: cover;
				grid-row: 3 / 4;
				grid-column: 1 / -1;
				background-image: url("websitephotos/schedulemusic.jpg");
				background-position: center;
		}
		
		#updatekeyboard {
				height: 400px;
				background-size: cover;
				grid-row: 3 / 4;
				grid-column: 1 / -1;
				background-image: url("websitephotos/updatekeyboard.jpg");
				background-position: center;
		}
		
		main p {
			padding-left: 3em;
			padding-right: 3em;
		}
		
		main h2 {
			font-weight: normal;
		}
		
		main li {
			list-style-type: none;
		}	
		
		h3 {
			font-weight: normal;
			text-align: center;
		}
		
		a {
			color: #08090c;
		}
		
		main img {
			border-radius: 50%;
			border: 50px;
			border-color: #08090c;
		}
		
		.row {
			display: flex;
		}
				
		#yuh{
			text-align: center;
			padding-left: 3em;
			padding-right: 3em;
		}
		
		form {
			display: grid;
			grid-template-rows: auto;
			grid-template-columns: 150px 1fr;
			grid-gap: 0.75rem;
			padding-left: 3em;
			padding-right: 3em;
			width: 90%;
			
		}
		
		main p {
			text-align: center;
			
		}
		
		main ul li {
			text-align: center;
		}
		
		main h3 {
			padding-right: 3em;
			padding-left:3em;
		}
		
		#endphrase {
			padding-right: 3em;
			padding-left:3em;
		}

		.column {
			flex: 33.33%;
			padding: 3em;
		}
		
		.column2 {
			flex: 50%;
			padding-left: 8em;
			padding-right: 8em;
			padding-top: 3em;
			padding-bottom: 3em;
		}
		
		.quote {
			color: #08090c;
			font-weight: normal;
			text-align: center;
			grid-row: 3/4;
			grid-column: 4/-4;
		}
		
		footer {
			color: #4e5455;
			background-color: #edf0ff;
			text-align: center;
			grid-column: 2/-2;
			border-bottom-style: solid;
			border-left-style: solid;
			border-right-style: solid;
			border-color: #08090c;
		}
	
		#layout {
				display: grid;
				grid-auto-rows: minmax(0px, auto);
				grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
		}
		
		@media only screen and (max-width: 992px) {
			#layout {
				display: grid;
				
				grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 126px)) minmax(0px, 1fr);	
			
		
		}
		
		@media only screen and (max-width: 768px) {
			
			
		}
	
		

	</style>
	</head>
	<body>
	</body>
</html>	