/* 
Student Name: Kylie Pollock
File Name:styles.css
Date:10/27/24
*/
	
	/* Css Reset */
		body, header, nav, main, footer, img, h1 {
			margin: 0
			padding: 0
			border: 0
		}
	
	/* Style rule for images */
		img {
			max-width: 100%;
			display: block;
	}
	
	Style rules for mobile viewport
	
	
	Hide tab-desk class
		.tab--desk {
			display: none;
	}

  /* 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 {
  		color: #4645a8;
  		text-decoration: none;
  		font-weight: bold;
  	}
  	
  	#rental h2 {
  	}
  	
	.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: #b7b7e1;
			}
	
  	/* Style rules for form elements */
  		fieldset, input {
  			margin-bottom: 2%;
  	}
  		fieldset {
  			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;
  	}
  	
  	/* Tablet viewport: Style rule for header content */
  	span.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 */
  		.table {
  			form-grid {
  				display: grid;
  				grid-template: auto auto;
  				gap: 20px;
  		}
  			btn {
				grid-column: 1/span 2;
  		}
  	
  	
  	/* Media Query for Desktop Viewport */
  		@media screen and (min-width: 550px), print{
  		}
  		
  	/* Desktop Viewport: Style rule for table */
  		.table {
  			width: 70%;
  		}
  	
  	
  	
  	/* 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%;
		 }
		 
		 /* Media Query for Print */
		 	@media print {
		 		body {
		 			background-color: #fff; color: #000;
		 		}
		 }