/*
 Author: greanlee pike
 Date: 9/18/24
 File Name: styles.css
 */
 
		 *{
			 margin: 0;
			 padding: 0;
			 border: 0;
		 }
 
			img {
				max-width: 100%;
				display: block;
			}
			/* style rule for box sizing applies to ALL ELEMENTS*/
			* {
				box-sizing: border-box;
			}
			

			header {
				font-family: "DM Serif Display", serif;
				text-align: center;
				font-size: 1.5em;
				color: #373684;
			}
			
			header h1{
				font-style: italic;
			}
			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 1em;
				text-decoration: none;
			}
			

			
			main {
				padding: 2%;
				background-color: #a8bbe2;
				overflow: auto;
				font-family: Verdana, Arial, sans-serif;
			}
		
			main p {
				font-size: 1.25em;
			}
			.action {
				font-size: 1.25em;
				color: #373684;
				font-weight: bold;
			}
			
			.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;
			}

			
			#piano, #guitar, #violin {
				
				margin: 0 2%;
			}
			
			.round{
					border-radius: 8px;
				}
				
			#info {
				clear: left;
				background-color: #c0caf7;
				padding: 1% 2%;
				margin-left: 10%;
			}
			
			/*#info ul {
				margin-left: 10%;
			}
			*/
			#contact {
				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 .email-link {	
				color: #4645a8;
				text-decoration: none;
				font-weight: bold;
				text-align: center;
			}
			.map {
				border: 5px solid #373684;
				width: 95%;
				height: 50%;
			}
			
		footer {
			text-align: center;
			font-size: 0.65em;
			clear: left;
		}
		
					/* styles rules for mobile 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 main content*/
			
						
			.grid {
				display: grid;
				grid-template-columns: repeat(1fr, 1fr);
				gap: 20px;
			}
			aside {
				grid-column: 1 / span 2;
			}
		
			
		/* tablet viewport nav area*/
		
		nav li {
			border-top: none;
			display: inline-block;
			font-size: 1.5em;
			border-right: 1px solid #e5e9fc;
		}
		
		nav li:last-child {
			padding: 0.25em 0.5em;
		}
		
		/*tablet viewport map area*/
		
		.map {
			width: 500px;
			height: 450px;
		}
			}
		/* media query for desktop*/
		
		@media screen and (min-width: 769px), print {
				header {
					padding: 2%;
				}
				
				/* desk nav area*/
				
				nav li a {
					padding: 0.5em 1.5em;
				}
				nav li a:hover {
					color: #373684;
					background-color: #e5e9fc;
				}
				
				/* desk rules for main */
				#info ul {
					margin-left: 5%;
				}
				main h3 {
					font-size: 1.5em;
				}
				
				#piano, #guitar, #violin {
					width: 29%;
					float: left;
					margin: 0 2%;
				}

				/*desktop grid layout */
				.grid {
					grid-template-columns: repeat(4, 1fr);
				}

				aside {
					grid-column: 1 / span 4;
				}
		}
		
		/*media query for print*/
		@media print {
					
			body {
				background-color: #fff;
				color: #000;
				}

		}