/* 
Student Name: Kylie Pollock
File Name:styles.css
Date:09/21/24
*/
	
	/* Css Reset */
		body, header,nav,main,footer,img,h1 {
		<ul>
			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 ul {
  		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;
  	}
  	
	.map {
		border: 5px solid #373684;
		width: 95%;
		height: 50%;
	}

  	/* Style rules for footer content */
  		footer {
  			text-align: center;
  			font-size: 0.65em;
  			clear: left;
  		}
  		
  		footer a {
  			color: #4645a8;
  			text-decoration: none;
  	}