/*
    Author:Sonia Scarpone
    Date: November 1 2024
    File Name: styles.css
    */ 
       
       
     /* CSS Reset */
    body, header, nav, main, footer, img, h1, section, aside, figure, figcaption {
         margin: 0;
         padding: 0;
         border: 0;
    }
    
    /* Style rule for images */
    img {
          max-width: 100%;
          display: block;
          
    }
    
     /* Style rule for box sizing applies to all elements */ 
     * {
         box-sizing: border-box;
     }
     
     
     /* Style rules for mobile viewport */
     
     .mobile-nav a {
         color: #fff;
         text-align: center;
         font-size: 2em;
         text-decoration: none;
         padding: 3%;
         display: block;
     }
     
    .mobile h1 {
    font-size: 1.5em;
    padding: 4%;
    margin-right: right 15%;
     }
     
     .mobile-nav a.menu-icon {
         display: block;
         position: absolute;
         right: 0;
     }
     
     .menu-icon div {
     height: 50px;
     width: 50px;
     background-color: #373684;
     
     }
     
     
     /* Style rules for table */
     
     
     table {
         
        border:1px solid #373684;
        border-collapse: collapse;
        margin: 0 auto;
        width: 100%;
        
     }
     
     caption {
     font-size: 1.5em;
     font-weight: bold;
     padding: 1%;
     
     }
     
     
     th,td {
        border: 1px solid #373684;
        padding: 2%;
     }
     
     th {
      background-color: #373684;
      color: #fff;
      font-size: 1.5em;
      
     }
     
     tr :nth-child(odd) {
    background-color: #b7b7el;
     }

 

       /* Hide tab-desk class */

        .tab-desk #menu-links {

         display: none;
         
         

       }
     
    /* Style rules for header content */
     header {
         text-align:center;
         font-size: 3em;
         color: #373684;
     }
     
     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;
     }
     
     header h1 {
         font-style: 'DM Serif Display', serif;
     }
     
        
         /* Style rules for navigation area */
    nav {
          background-color: #373684;
        }
    
 
        
    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%;
     }
    
    
    Fieldset { margin-bottom:2%;}
    Input {margin-bottom:2%; }
    
    
    Fieldset legend {
        font-weight:bold;
        font-size:1.25em;
    }
        
    Label { 
        display:block;
        padding-top:3%;
    } 
        
    #submit { 
        margin-bottom:0;
        margin-top:0;
        margin-left:auto;
        margin-right:auto;
        Display:block;
        Padding:3%;
        Background-color:#b7b7e1;
        font-size:1em;
    
    }
    
    
    

    
    
    
    
    
    /* 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 {  
     #grid { 
         display: grid;
         grid-column: 2;
         grid-column-gap: 20px;
     }  
     aside { grid-column: 1/ span 2;
     }
         
      .mobile-nav {
          display:none;
      }
      
      h1 {
      margin: 0;
      padding: 0;
      font-size: 2em;
      }
     
    nav ul {
            list-style-type: none;
            margin: 0;
            text-align: center;    
         
     }
    
    /* 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;

}

/* Style rules for form element*/
  
     form {
       width:70%;
       margin-bottom:0;
       margin-left:auto;
       margin-right:auto;
       
  }

 

/* Media Query for Desktop Viewport */
    }
 @media screen and (min-width: 769px), print {
     .form-grid {
     display: grid;
     grid-columns: 2;
     } 
     aside { grid-column: 1/ span 4;
     
     }
     
     nav li a:hover {transform:scale(1.2);}
         

}


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

}

  
}