/* Author: Annemarie Hereford         
Date: 4/16/23         
File Name: styles.css */

 /* CSS Reset */
 body,
 header,
 nav,
 main,
 footer,
 img,
 h1 ul,
 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 */

 /* Hide tab-desk class */
 .tab-desk,
 #menu-links {
     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-size: 1.5em;
     padding: 4%;
     margin-right: 15%;
 }

 /* Style rules for navigation area */
 nav {
     background-color: #373684;
 }

 .mobile-nav a {
     color: #fff;
     text-align: center;
     font-size: 2em;
     text-decoration: none;
     padding: 3%;
     display: block;
 }

 .mobile-nav a.menu-icon {
     display: block;
     position: absolute;
     right: 0;
     top: 0;
 }

 .menu-icon div {
     height: 50px;
     width: 50px;
     background-color: #373684;
 }

 /* Style rules for main content */
 main {
     padding: 2%;
     background-color: #e5e9fc;
     overflow: auto;
     font-family: 'Roboto', sans-serif;
 }

 main p {
     font-size: 1.25em;
 }

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

 .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 .email-link {
     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 a,
 #rental h2 {
     color: #4645a8;
     text-decoration: none;
     font-weight: bold;
 }

 .map {
     border: 5px solid #373684;
     width: 95%;
     height: 50%;
 }

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

 tr:nth-child(odd) {
     background-color: #b7b7e1;
 }

 /* Style rules for form elements */
 fieldset,
 input {
     margin-bottom: 2%;
 }

 fieldset legend {
     font-weight: bold;
     font-size: 1.25em;
 }

 label {
     display: block;
     padding-top: 3%;
 }

 #submit {
     margin: 0 auto 0 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;
 }

 .social img {
     display: inline-block;
     padding: 4%;
 }

 /* Media Query for TABLET Viewport */
 @media screen and (min-width: 550px),
 print {
     .grid {
         display: grid;
         grid-template-columns: 2;
         column-gap: 20px;
     }

     aside {
         grid-column: 1 / span 2;
     }

     /* Tablet Viewport: Show tab-desk class, hide mobile class */
     .tab-desk {
         display: block;
     }

     .mobile,
     .mobile-nav {
         display: none;
     }

     /*Tablet Viewport: Style rule for header content */
     span.tab-desk {
         display: inline;
     }

     header h1 {
         margin: 0;
         padding: 0;
         font-size: 2em;
     }

     /* Tablet Viewport: Style rules for nav */
     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, 0.25em, 0.5em;
         margin: 0.5em;
         display: block;
         color: #fff;
         text-align: center;
         text-decoration: none;
     }

     nav ul {
         list-style-type: none;
         text-align: center;
     }

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

     /* Tablet Viewport: Style rules for form elements */
     form {
         width: 70%;
         margin: 0 auto 0 auto;
     }

     /* Tablet Viewport: Style rules for footer area */
     .copyright {
         float: left;
         width: 65%;
     }

     .social {
         float: right;
         width: 25%;
     }

 }


 /* Media Query for Desktop Viewport */
 @media screen and (min-width: 796px),
 print {
     .grid {
         grid-template-columns: 4;
         column-gap: 20px;
     }

     figcaption {
         font-size: 1em;
     }

     aside {
         grid-column: 1 / span 4;
     }

     /* Desktop Viewport: Style rule for header. */
     header {
         padding: 2%;
     }

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

     nav li a:hover {
         color: #373684;
         background-color: #e5e9fc;
     }

     /* Desktop Viewport: Style rules for main content. */
     #info ul {
         margin-left: 5%;
     }

     h3 {
         font-size: 1.5em;
     }

     #piano,
     #guitar,
     #violin {
         width: 29%;
         float: left;
         margin: 0, 2%, 0, 2%;
     }

     /* Desktop Viewport: Style rules for table */
     table {
         width: 70%;
     }

     /* Desktop Viewport: Style rules for form elements */
     .form-grid {
         display: grid;
         grid-template-columns: auto auto;
         column-gap: 20px;
     }

     .btn {
         grid-column: 1 / span 2;
     }
 }

 /* Media Query for Print. */
 @media print {
     body {
         background-color: #fff;
         color: #000;
     }
 }