/*

Purpose:  Style sheet for Ch 6 Lab 2

Author:  Rob Lindauer

Date:  2026-03-17

Filename:  styles.css



For Lab 2 I "re-sorted" the style rules into groups that make sense to me before proceeding with the lab instructions.

*/



/* CSS Reset */



body,

header,

nav,

main,

footer,

img,

h1,

h3,

ul,

aside,

figure,

figcaption {

   margin: 0;

   padding: 0;

   border: 0;

}



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



/* Display mobile class, hide tab-desk class */



.mobile {

   display: block;

}



.tab-desk {

   display: none;

}



/* Style rules that apply to the entire webpage (and not to a particular section) */



body {

   background-color: #f6eee4;

}



aside {

   text-align: center;

   font-size: 1.5em;

   font-weight: bold;

   text-shadow: 4px 4px 10px #c5a687;

}



figcaption {

   padding: 2%;

   border-top: 4px solid #2a1f14;

}



figure {

   max-width: 400px;

   margin: 2% auto;

   border: 4px solid #2a1f14;

   box-shadow: 6px 6px 10px #c5a687;

}



img {

   max-width: 100%;

   display: block;

   margin: auto; /* I added this on my own - think images look better centered */

}



.action {

   font-size: 1.75em;

   font-weight: bold;

   text-align: center;

}



.link {

   color: #4d3319;

   text-decoration: none;

   font-weight: bold;

   font-style: italic;

}



.mobile h1 {

   padding: 2%;

   text-align: center;

   font-family: "Emblema One", system-ui;

   font-weight: 400;

   font-style: normal;

}



.mobile h3 {

   padding: 2%;

   text-align: center;

   font-family: "Lora", serif;

   /* font-optical-sizing: auto; ← from Google Fonts but invalid per CSS validator */

   font-weight: 400;

   font-style: normal;

}



.round {

   border-radius: 6px;

}



.tel-link {

   background-color: #2a1f14;

   padding: 2%;

   width: 80%;

   margin: 0 auto 0 auto;

}



.tel-link a {

   color: #f6eee4;

   text-decoration: none;

   font-weight: bold;

}



#info ul {

   margin-left: 10%;

}



#contact {

   text-align: center;

}



/* Style rules for header area */



/* Style rules for navigation area */



nav {

   background-color: #2a1f14;

}



nav ul {

   list-style-type: none;

   text-align: center;

}



nav li {

   display: block;

   border-top-style: solid;

   border-top-color: #f6eee4;

   border-top-width: 0.5px;

   font-size: 1.5em;

   font-family: Geneva, Arial, sans-serif; /* Should this be removed for Ch5 Lab2? */

   font-weight: bold;

}



nav li a {

   display: block;

   color: #f6eee4;

   padding: 0.5em 2em;

   text-decoration: none;

}



/* Style rules for main content */



main {

   padding: 2%; /* removed in Ch 5 → font-family: Verdana, Arial, sans-serif; */

   font-family: "Lora", serif;

   /* font-optical-sizing: auto; ← from Google Fonts but invalid per CSS validator */

   font-weight: 400;

   font-style: normal;

}



main p {

   font-size: 1.25em;

}



main h3 {

   padding-top: 2%;

}



main ul {

   list-style-type: square;

}



/* Style rules for footer content */



footer {

   text-align: center;

   color: #f6eee4;

   padding: 1% 0%;

}



footer a {

   color: #f3e6d8;

   text-decoration: none;

}



/* Media query for tablet viewport ========================================== */



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

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



   .tab-desk {

      display: block;

   }



   .mobile {

      display: none;

   }



   /* Tablet viewport:  Style rules for entirety of webpage (not for a specific section) */



   aside {

      grid-column: 1 / span 2;

   }



   .grid {

      display: grid;

      grid-template-columns: auto auto;

      grid-gap: 10px;

   }



   /* Tablet viewport:  Style rules for nav area */



   nav li {

      display: inline-block;

      font-size: 1.25em;

      border-top: none;

   }



   nav li a {

      padding: 0.5em;

   }

}



/* Media query for desktop viewport ========================================= */



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

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



   .tab-desk {

      display: block;

   }



   .mobile {

      display: none;

   }



   /* Desktop viewport:  Style rules for the entire webpage (not for a specific area) */



   aside {

      grid-column: 1 / span 3;

      font-size: 2em;

   }



   .grid {

      display: grid;

      grid-template-columns: auto auto auto;

      grid-gap: 10px;

   }



   #info ul {

      margin-left: 5%;

   }



   /* Desktop viewport:  Style rules for nav area */



   nav li {

      display: inline-block; /* Added on my own - display didn't work correctly without */

      border-top: none;

      font-size: 1.5em;

   }



   nav li a {

      padding: 0.5em 1.5em;

   }



   nav li a:hover {

      color: #2a1f14;

      background-color: #f6eee4;

      opacity: 0.5;

   }



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

}



/* Media query for large desktop viewports ================================== */



@media screen and (min-width: 1920px) {

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



   .tab-desk {

      display: block;

   }



   .mobile {

      display: none;

   }



   /* Large desktop viewport:  Style rules for the entire webpage (not for a specific area) */



   aside {

      grid-column: 1 / span 4;

      font-size: 3em;

   }



   body {

      background: linear-gradient(#f6eee4, #78593a);

   }



   .grid {

      display: grid;

      grid-template-columns: auto auto auto auto;

   }



   #wrapper {

      width: 1920px;

      margin: 0 auto;

   }



   /* Style rules for main area */



   main {

      background-color: #f6eee4;

   }

}



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



@media print {

   body {

      background-color: #fff;

      color: #000;

   }

}