@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/*
    Author: Amal Oyadina
    Date: 11/13/25
    File Name: styless.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 header content*/
header {
    text-align: center;
    font-size: 1.5em;
    color: #373684;
}

header h1 {
    font-family:'DM Serif Display', serif;
}

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

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

nav li  {
    display: block;
    border-top:1px solid #e5e9fc;
    font-size: 2em;
}

nav li a {
    display: block;
    color: #fff;
    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, #rental h2 {
    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 .email-link {
    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;
}

/*Style rules for mobile viewport*/

/*Hide tab-desk class*/
.tab-desk{
    display: none;
}
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;
}

/*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 0.25em 0.5em;
    }
    /*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 rule for main content*/
    .grid{
        display:grid;
        grid-template-columns: auto auto;
        grid-gap:20px
    }
    aside{
        grid-column:1/span 2;
    }
    
}


/*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{
      padding:0.5em 1.5em 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% 0 2%;
  }
  
  .grid{
      grid-template-columns: auto auto auto auto;
  }
  figcaption{
      font-size:1em;
  }
  aside{
      grid-column:1 / span 4;
  }
  /*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;
  }
  
}
/*Media Query for Print*/
@media print{
    body{
        background-color:#fff;
        color:#000;
    }
    
}