/*
  Author: Mason Fiorini
  Date: 2/8/2026
  File Name: styles.css
  */
  
  /* 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 {
    font-family: "DM Serif Display", serif;
	font-weight: 400;
	font-style: normal;
  }
  
   /* Style rules for navigation area */
  nav {
     background-color: #373684;
  }
  
  nav ul {
     list-style-type: none;
     text-align: center;
  }
  
  nav li {
     display: block;
     font-size: 2em;
	 border-top: 1px solid #e5e9fc;
  }
  
  nav li a {
     display: block;
     color: #fff;
     text-align: center;
     padding: 0.5em 1em;
     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%;
  }
  
  #info ul .round {
	  border-radius: 8px;
  }
  
  
  #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;
  }
  
  .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;
  }