/* 
Author: Nataly Rivera Huezo
Date: 10/26/2025
File Name: style.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{

   position: -webkit-sticky;
   position: sticky;
   top: 0; 
   background-color: #000;
   height: 190px;
}

header h1{
    font-style: italic;
    font-size: 2.5em;
    color: #3b2293;
    font-family: "DMSerifDisplay-Regular", serif;
 }

 /* Style rules for navugation 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:first-child{
   border-top: none;
 }

 nav li a {
    display: block;
    color: #fff;
    
    padding: 0.5em lem;
    text-decoration: none;
 }  

/* Style rules for the main content */

main {
    padding: 2%;
    background-color: #e5e9fc;
    overflow: auto;
    font-family: "Roboto", 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%;
}
.round {
 border-radius: 50%;
}

#contact .email-link {
    color: #373684;
    text-decoration: none;
    font-weight: bold;

 }

.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;
}

.tel-link a:hover {
   text-decoration: underline;
}

 #contact a {
    color: #fff;
    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;
}

/* 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;
 }

nav li:last-child{
   border-right:none;
 }

 nav li a {
   padding: 0.25em 0.5em;
 }

 /* Tablet Viewport: Style rule for map */
.map {
   width: 500px;
   height: 450px;
 }
}

/* Media Qury for Desktop Vieport*/
@media screen and (min-width: 769px), print {
   
/* Desktop Viewport: Style rule for header */
 header {
   padding: 2%;
 }

 /* Desktop Viewport: Style rules for nav area */
 nav li a {
   padding: 0.5em 1.5em;
 }

 nav li a: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;
   }
}