/*

Author:  TONYH

Date:  2026-03-16

Filename:  sac6styles.css

Purpose:  Style sheet for CH6 LAB01

*/



/* Style rules for mobile viewport ========================================= */



/* Hide tab-desk class */



.tab-desk {

  display: none;

}



/* CSS Reset */



body,

header,

nav,

main,

footer,

img,

h1,

ul {

  margin: 0;

  padding: 0;

  border: 0;

}



/* Style rule for images */



img {

  max-width: 100%;

  display: block;

}



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

  font-size: 2em;

  border-top: 1px solid #e5a9fc;

}



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 {

  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;

  }



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

  }



  /* Tablet viewport:  Style rule for map */



  .map {

    /* border: 5px solid #373684; ... from mobile viewport, presumably not needed for tablet */

    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 {

    padding: 0.5em 1.5em;

    /* display: block; ... comment out settings for mobile viewport ... */

    /* font-size: 2em; */

    /* border-top: 1px solid #e5a9fc; */

  }



  nav li a:hover {

    color: #373684;

    background-color: #e5e9fc;

    /* display: block; ... comment out settings for mobile viewport ... */

    /* color: #fff; */

    /* text-align: center; */

    /* padding: 0.5em 1em; */

    /* text-decoration: none; */

  }



  /* Desktop viewport:  Style rules for main comment */



  #info ul {

    margin-left: 5%;

  }



  main h3 {

    font-size: 1.5em;

  }



  #piano,

  #guitar,

  #violin {

    width: 29%;

    float: left;

    /* element floats to left of its container */

    margin: 0 2%;

  }

}



/* Media query for print ==================================================== */



@media print {

  body {

    color: #000;

    background-color: #fff;

  }

}