/*
    Author: Jimmy Vo
    Date: September 13, 2026
    File Name: styles.css
*/

/* Style rule for the CSS reset */
html, body, header, nav, main, footer, img, h1, h2, h3, p, ul, li, a,
section, aside, figure, figcaption {
   margin: 0;
   padding: 0;
   border: 0;
}

/* Style rule for the HTML5 semantic elements */
header, nav, main, footer, section, aside, figure, figcaption {
   display: block;
}

/* Style rule for images */
img {
   max-width: 100%;
   display: block;
}

/* Style rule for box sizing applies to all elements */
* {
   box-sizing: border-box;
}

/* Hide tab-desk class and mobile menu links */
.tab-desk, #menu-links {
   display: none;
}

/* Style rules for header content */
header {
   text-align: center;
   font-size: 1.5em;
   color: #373684;
   background-color: #f6f6f6;
}

header h1 {
   font-family: 'DM Serif Display', serif;
   font-style: italic;
   color: #373684;
   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: #d1d1e0;
   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 ul {
   margin-left: 10%;
   clear: left;
   background-color: #c0caf7;
   padding: 1% 2%;
}

.round {
   border-radius: 8px;
}

#contact, #rental h2 {

}

.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 {

}

.map {
   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%;
}

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

/* Tablet Viewport: Media Query */
@media screen and (min-width: 630px), print {

   /* Tablet Viewport: Show tab-desk class, hide mobile classes */
   .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 area */
   nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: center;
   }

   nav li {
      border-top: none;
      display: inline-block;
      width: auto;
      font-size: 1.5em;
      border-right: 1px solid #e5e9fc;
   }

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

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

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

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

   /* Tablet Viewport: Three-column lesson layout */
   #piano, #guitar, #violin {
      width: 29%;
      float: left;
      margin: 0 2%;
   }

   /* Tablet Viewport: Grid layout */
   .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
   }

   aside {
      grid-column: 1 / span 2;
      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;
   }
}

/* Desktop Viewport: Media Query */
@media screen and (min-width: 1021px), print {

   .grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
   }

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

   figcaption {
      font-size: 1em;
   }

   nav li a:hover {
      transform: scale(1.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;
      grid-gap: 20px;
   }

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