/*

Author:  TONY H

Date:  2026-04-06

Filename:  styles.css

Purpose:  Style sheet for CH8 Lab 1

*/



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



/* CSS Reset */



body,

header,

nav,

main,

footer,

img,

h1,

ul,

section,

aside,

figure,

figcaption {

  margin: 0;

  padding: 0;

  border: 0;

}



/* Display the mobile class.  Hide the tablet/desktop class */



.mobile {

  /* Needed? Adding this class selector is not stated in the Lab instructions. */

  display: block;

}



.tab-desk {

  display: none;

}



/* Style rules for the entire webpage (not a particular section), in alphabetic order */



aside {

  text-align: center;

  font-size: 1.5em;

  font-weight: bold;

  color: #373684;

  text-shadow: 3px 2px 10px #8280cb;

}



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;

}



figure {

  position: relative;

  max-width: 275px;

  margin: 2% auto;

  border: 8px solid #373684;

}



img {

  /* style rule for images */

  max-width: 100%;

  display: block;

}



/* Style rule for box-sizing, applies to all elements */



* {

  box-sizing: border-box;

}



section {

}



/* class selectors */



.action {

  font-size: 1.25em;

  color: #373684;

  font-weight: bold;

}



.map {

  border: 5px solid #373684;

  width: 95%;

  height: 50%;

}



.round {

  border-radius: 8px;

}



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

}



/* ID selectors */



#contact,

#rental h2 {

  text-align: center;

}



#contact .email-link {

  color: #4645a8;

  text-decoration: none;

  font-weight: bold;

}



#info {

  clear: left;

  background-color: #c0caf7;

  padding: 1% 2%;

}



#info ul {

  margin-left: 10%;

}



#piano,

#guitar,

#violin {

  margin: 0 2%;

}



/* Style rules for tables */



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

}



/* Style rules for form elements */



fieldset {

  margin: 2%;

}



input {

  margin: 2%;

}



fieldset legend {

  font-weight: bold;

  font-size: 1.25em;

}



label {

  display: block;

  padding-top: 3%;

}



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

}



/* ========================================================================== */

/*                                                                            */

/* Media queries                                                              */

/*                                                                            */

/* ========================================================================== */



/* ========================================================================== */

/*                                                                            */

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

  }



  /* Table viewport:  Style rules across all sections of the webpage */



  aside {

    grid-column: 1 / span 2;

  }



  span.tab-desk {

    display: inline;

  }



  .grid {

    display: grid;

    grid-template-columns: auto auto;

    grid-gap: 20px;

  }



  .map {

    width: 500px;

    height: 450px;

  }



  /* Tablet viewport:  Style rule for header content */



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



  /* Tablet viewport:  Style rule for form element */



  form {

    width: 70%;

    margin: 0 auto;

  }

}



/* ========================================================================== */

/*                                                                            */

/* Media query for desktop viewport                                           */

/*                                                                            */

/* ========================================================================== */



@media screen and (min-width: 769px), print {

  /* Desktop viewport:  Show tab-desk class, hide mobile class */



  .tab-desk {

    display: block;

  }



  .mobile {

    display: none;

  }



  /* Desktop viewport:  Style rules across all sections of the webpage */



  aside {

    grid-column: 1 / span 4;

  }



  .grid {

    display: grid;

    grid-template-columns: auto auto auto auto;

  }



  #info ul {

    margin-left: 5%;

  }



  #piano,

  #guitar,

  #violin {

    width: 29%;

    float: left;

    /* element floats to left of its container */

    margin: 0 2%;

  }



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



  main h3 {

    font-size: 1.5em;

  }



  /* Desktop viewport:  Style rules for tables */



  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 {

    color: #000;

    background-color: #fff;

  }

}