/*
    Author:Sonia Scarpone
    Date: November 1 2024
    File Name: styles.css
    */ 
       
       
     /* 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: 3em;
         color: #373684;
     }
     
     header h1 {
         font-style: 'DM Serif Display', serif;
     }
     
        
         /* Style rules for navigation area */
    nav {
          background-color: #373684;
        }
    
    nav ul {
            list-style-type: none;
            margin: 0;
            text-align: center;
        }
    nav li {
           display: inline-block;
           padding:10;
           color: white;
           font-size: 2em;
           border-top:1px solid #e5e9fc;
        }
        
    nav li a {
           display: block;
           color: white;
           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: '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:8px;
    }
        
    #contact {
         text-align: center;
         
      }
      
    #contact .email-link {

    color: #4645a8;
    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;
        
       }

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

     padding-top: 0.25em;

     padding-bottom: 0.25em;

      padding-left: 0.5em;

      padding-right: 0.5em;

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

}

 

/* Tablet Viewport: Style rules for map */

.map{

  width: 500px;

  height: 450px;

}

/* Tablet Viewport: Style rules for map */

.map{

  width: 500px;

  height: 450px;

}



 

/* Media Query for Desktop Viewport */

@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-top: 0.5em;

  padding-bottom: 0.5em;

  padding-left: 1.5em;

  padding-right: 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-top: 0;

  margin-bottom: 0;

  margin-left: 2%;

  margin-right: 2%;

}

 

}

 

/* Media Query for Print */

@media print { 

body {

  background-color: #fff;

  color: #000;

}

  
}