/* 
Student Name: Kylie Pollock
File Name:styles.css
Date:09/29/24
*/
	
	/* Css Reset */
		body, header, nav, main, footer, img, h1, section, aside, figure, figcaption {
		<ul>
			margin: 0
			padding: 0
			border: 0
		}
	
	/* Style rule for images */
		img {
			max-width: 100%;
			display: block;
		}
	
	/* Style rule for box sizing applies to all elements */
	* {
	box-sizing: border-box;
	}
	
	/* Style rules for mobile viewport */
	Hide tab-desk class
		.tab--desk {
			display: none;
	}
	aside {
		text-align: center;
		font-size: 1.5em;
		font-weight: bold;
		color: #373684;
		text-shadow: 3px 3px 10px #8280cb;
		
	}
	figure {
		position: relative;
		max-width: 275px;
		margin: 2% auto;
		border: 8px solid #373684;
	}
	figcaption {
		position: absolute;
		bottom: 0;
		background: rgba(55, 54, 132, 0.7);
		color: #fff;
		width: 100%;
		padding: 5% 0;
		text-align: center;
		font-family: Verdana, Arial, sans-serif;
		font-size: 1.5em;
		font-weight: bold;
	}

  /* Style rules for header content */
  	header {
  		text-align: center;
 		 font-size: 1.5em;
  		color: #373684;
 	 }
  	header h1
  		.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

  		.dm-serif-display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}
  
  /* Style rules for navigation area */
  nav {
  	background-color: #373684;
  	}
  	
  	nav li {
  		list-style-type: none;
  		text-align: center;
  	}
  	
  	nav li {
  		display: block; border-top: 1px solid #e5e9fc;
  		font-size: 2em;
  	}
  	
  	nav li a {
  		display: block;
  		color: #fff;
  		text-align: center;
  		padding: 0.5em;
  		text-decoration: none;
  	}
  	
	/* Style rules for main content */
		main {
  			padding: 2%;
  			background-color: #e5e9fc;
  			overflow: auto;
  			font-family: Verdana, Arial, sans-serif;
  	}
  	
  	main p {
  		font-size: 1.25em;
  	}
  	
  	.action {
  		font-size: 1.25em;
  		color: #373684;
  		font-weight: bold;
  	}
  	
  	#piano, #guitar, #violin {
  		margin: 0 2%;
  	}
  	
  	#info {
  		clear: left;
  		background-color: #c0caf7;
  		padding: 1% 2%;
  	}
  	
  	#info ul {
  		margin-left: 10%;
  	}
  	
  	#contact .email-link {
  		text-align: center;
  	}
  	
  	.tel-link {
  		background-color: #373684;
  		padding: 2%;
  		margin: 0 auto;
  		width: 80%;
  		text-align: center;
  		border-radius: 5px;
  	}
  	
  	.tel-link a {
  		color: #fff;
  		text-decoration: none;
  		font-size: 1.5em;
  		display: block;
  	}
  	
  	
  	#contact a, #rental h2 {
  		color: #4645a8;
  		text-decoration: none;
  		font-weight: bold;
  	}
  	
	.map {
		border: 5px solid #373684;
		width: 95%;
		height: 50%;
	}
	
	/* Style rules for table */
		table {
			border: 1px solid #373684;
			border-collapse: collapse;
			margin: 0 auto;
			width: 100%;
		}
		
		caption {
			font-size: 1.5em;
			font-weight: bold;
			padding; 1%;
		}
		
		th, td {
			border: 1px solid #373684;
			padding:2%;
		}
		
		th {
			background-color: #373684;
			color: #fff;
			font-size: 1.5em;
		}
			tr:nth-chold(odd) {
				background-color: #b7b7el
			}
	
  	/* Style rules for form elements */
  		fieldset {
  			margin-bottom: 2%;
  	}
  		fieldset legend {
  			font-weight: bold;
  			font-size: 1.25em;
  	}
  			label {
  				display: block;
  				padding-top: 3%;
  		}
  			form #submit {
  				margin: auto;
  				display: block;
  				padding: 3%;
  				background-color: #b7b7e1;
  				font-size: 1em;
  		}
  	
  	/* Style rules for footer content */
  		footer {
  			text-align: center;
  			font-size: 0.65em;
  			clear: left;
  		}
  		
  		footer a {
  			color: #4645a8;
  			text-decoration: none;
  	}
  	
  	/* Media Query for Tablet Viewport */
  		@media screen and (min-width: 550px), print {
  	}
  	
  	/* Tablet Viewport: Show tab-desk class, hide mobile class */
  		tab-desk {
  			display: block;
  	}
  		mobile {
  			display: none;
  	}
  		grid {
  			display: grid;
  			grid-template-columns: auto auto auto auto; 
  	}
  		aside {
  			grid-column: 1 / span 2;  		
  	}
  	
  	/* Tablet viewport: Style rule for header content */
  		.tab-desk {
  			display: inline;
  	}
  	
  	/* Tablet viewport: Style rules for nav area */
  		nav li {
  			border-top: none;
  			display: inline-block;
  			font-size: 1.5em;
  			border-right: 1px solid; #e5e9fc;
  			padding: 0.25em 0.5em;
  	}
  	
  	/* Tablet Viewport: Style rule for map */
  		.map {
  			width: 500px;
  			height:450px;
  		} 	
  	/* Tablet Viewport: Style rule for form element */
  		form {
  			width: 70%;
  			margin: 0; auto; 0; auto;
  	}
  	
  	
  	/* Media Query for Desktop Viewport */
  		@media screen and (min-width: 550px), print{
  	}
  		grid {
  			display: grid;
  	}
  		aside {
  			grid-column: 1 / span 4;  		
  	}
  		figcaption {
  			font-size: 1em;
  	}
  		
  
  	/* Desktop Viewport: Style rule for header */
  			header {
  				padding: 2%;
  	}
  	
  	/* Desktop Viewport: Style rules for nav area */
  		nav li {
  			padding: 0.5em 1.5em;
				:hover {
					color: #373684;
					background-color: #e5e9fc;
				}				
	}
	
	/* Desktop Viewport: Style rules for main content */
		
		#info ul {
			margin-left: 5%;
		}
		
		main h3 {
			font-size: 1.5em;
		}
		 
		 #piano, #guitar, #violin {
		 	width: 29%;
		 	float: left;
		 	margin: 0 2%;
		 }
	 /* Desktop Viewport: Style rules for table */
  		table {
  			width: 70%;
  		}
  	/* Desktop Viewport: Style rules for form elements */
  	 	form-grid {
  			display: grid;
  			grid-template: auto auto;
  			gap: 20px;
  	}
  		btn {
			grid-column: 1/span 2;
		 
	 /* Media Query for Print */
		@media print {
		 	body {
		 	background-color: #fff; color: #000;
		 }
	 }