/*



Author:  Rob Lindauer

Date:  2026-04-01

Filename:  styles.css

Purpose:  Style sheet for Rob's semester project



*/



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



/* CSS Reset - Purpose:  To reduce webpage display inconsistencies (e.g., in default line hights, margins, font sizes) among browsers */



/* CSS Reset */



body,

header,

nav,

main,

footer,

img,

h1,

h2,

ul,

li,

p,

aside,

figure,

figcaption {

  margin: 0;

  padding: 0;

  border: 0;

}



/* Toggle displaying or hiding of an element.  In the mobile viewport, display the mobile class and hide the tablet/desktop class */



.mobile {

  display: block;

}



.tab-desk {

  display: none;

}



/* Universal style rules */



* {

  font-family: "DM Sans", Arial, sans-serif;

  box-sizing: border-box;

}



/* Style rules for element selectors */



h1 {

  font-family: "Lora", "Times New Roman", serif;

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

  font-weight: 600;

  padding: 0.5em 0;

}



h2 {

  font-family: "Lora", "Times New Roman", serif;

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

  font-weight: 500;

  padding: 0.5em 0;

}



h3 {

  font-family: "Lora", "Times New Roman", serif;

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

  font-weight: 400;

  padding: 0.5em 0;

}



img {

  max-width: 100%;

  height: auto;

  border-radius: 8px;

}



ul {

}



li {

  margin: 0.5em;

}



p {

  margin: 0 0 0.5em 0;

  padding: 0 0 0.5em 0;

}



aside {

  padding: 2%;

}



figcaption {

  padding: 2%;

  border: none;

}



figure {

  max-width: 400px;

  margin: 2% auto;

  border: none;

}



/* Style rules for class selectors */



.centered {

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  margin: auto;

}



.email-link {

  color: #4d3319;

  text-decoration: none; /* no underline for links */

  font-weight: bold;

  font-style: italic;

  margin: 0 auto 0 auto;

  padding: 0.5em;

  text-shadow: 2px 2px lightgray;

}



.grid {

  /* The default (mobile device) "grid" is not a grid at all, but rather just a normal single-column display.  We add columns in a real grid for the tablet and desktop viewports. */

  align-items: center;

  justify-content: center;

}



.left {

	text-align: left;

}



.round {

  border-radius: 4px;

}



.tel-link {

  padding: 0.5em;

  width: 80%;

  margin: 0 auto 0 auto;

}



/* Style rules for ID selectors */



#request {

  /* style to display the main body of request.html as a centered block containing left-justified text */

  display: block;

  margin: 0 25%;

  box-sizing: border-box;

}



/* Style rules for body area */



body {

  background: linear-gradient(#fff, #00bfff);

}



/* Style rules for header area ------------------------------------------------------ */



/* Style rules for navigation area -------------------------------------------------- */



nav {

  background-color: black;

  opacity: 0.9;

}



nav ul {

  list-style-type: none;

  text-align: center;

}



nav li {

  display: block; /* Why is this needed? */

  font-size: 1em;

  font-weight: bold;

  border-radius: 8px;

}



nav ul li a {

  display: block;

  color: #f6eee4;

  text-decoration: none;

}



/* Style rules for main area ------------------------------------------------ */



main {

  /* background-color: #fff; ... white background for max color contrast */

  padding: 2%;

}



/* Style rules for footer --------------------------------------------------- */



footer {

  clear: left; /* added to revert to single column after multi-column display in the desktop viewports */

  text-align: center;

  color: black;

  padding: 1% 0%;

}



footer a {

  color: black;

  text-decoration: none;

}



/* Style rules for tables */



/* Style rules for tables */



table {

  border: 2px solid black;

  border-collapse: collapse;

  margin: 0 auto;

  width: 100%;

}



caption {

  font-size: 1.5em;

  font-weight: bold;

  padding: 1%;

}



td {

  border: 2px solid black;

  padding: 2%;

  text-align: center;

}



th {

  background-color: #373684;

  color: white;

  font-size: 1.15em;

  border: 2px solid black;

  padding: 2%;

}



tr:nth-child(odd) {

  background-color: lightgray;

}



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

/* Media queries                                                              */

/*                                                                            */

/* I have set up the queries to be mutually exclusive - no more than one will */

/* apply at a time                                                            */

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



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

/* Media query for tablet viewport                                            */

/*                                                                            */

/* Major content:  Use two column display, use inline list item type          */

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



@media screen and (min-width: 620px) and (max-width: 1279px) {

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



  .tab-desk {

    display: block;

  }



  .mobile {

    display: none;

  }



  /* Style rules for element selectors */



  aside {

    padding: 2%;

    margin: 2%;

  }



  /* Tablet viewport:  Style rules for class selectors */



  .grid {

    display: grid;

    grid-template-columns: auto auto;

    grid-gap: 10px;

    align-items: center;

    justify-content: center;

  }



  /* Tablet viewport:  Style rules for body */



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



  nav li {

    display: inline-block;

  }

} /* End of tablet viewport */



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

/* Media query for desktop viewport                                            */

/*                                                                            */

/* Major content:  Use three column display, use inline list item type          */

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



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

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



  .tab-desk {

    display: block;

  }



  .mobile {

    display: none;

  }



  /* Style rules for element selectors */



  aside {

    width: 30%;

    padding-left: 15px;

    margin-left: 15px;

    float: right;

    font-style: italic;

  }



  /* Desktop viewport:  Style rules for class selectors */



  .grid {

    /* for the desktop, make the first column twice as wide */

    display: grid;

    grid-template-columns: auto auto auto;

    grid-column: 1 / span 2;

    grid-gap: 10px;

    align-items: center;

    justify-content: center;

  }



  /* Desktop viewport:  Style rules for body */



  /* Desktop viewport:  Style rules for entire webpage (not a particular section) */



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



  nav li {

    display: inline-block;

  }



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



  /* Desktop viewport:  Style rules for footer */

  

   /* Desktop viewport:  Style rules for tables */



  table {

    width: 70%;

  }

  

  

  

  

  

} /* End of desktop viewport */



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

/* Media query for print                                                      */

/*                                                                            */

/* Major content:  use black and white color scheme                           */

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



@media print {

  body {

    background-color: #fff;

    color: #000;

  }

}