/*

Purpose:  Style sheet for Ch 8 Lab 2

Author:  Tony H

Date:  2026-04-20

Filename:  rescue9styles.css

Note:  I have reordered the style rules in groups and sequence that make sense to me.

*/



/* CSS Reset */



body,

header,

nav,

main,

footer,

img,

h1,

h2,

h3,

ul,

aside,

figure,

figcaption,

audio,

video {

  margin: 0;

  padding: 0;

  border: 0;

}



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



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



.mobile {

  display: block;

}



.mobile-tablet {

}



.tab-desk {

  display: none;

}



.desktop {

}



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

video {

  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,

#form h2 {

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



fieldset,

input,

textarea {

  margin-bottom: 2%;

}



fieldset legend {

  font-weight: bold;

  font-size: 1.25em;

}



label {

  display: block;

  padding-top: 2%;

}



form #submit {

  margin: 0 auto;

  display: block;

  padding: 2%;

  background-color: #78593a;

  color: #f6eee4;

  font-size: 1.25em;

  border-radius: 10px;

}



/* Style rules for footer content */



footer {

  text-align: center;

  color: #f6eee4;

  padding: 1% 0%;

}



footer a {

  color: #f3e6d8;

  text-decoration: none;

}



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

/*                                                                            */

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

  }



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



  form {

    width: 70%;

    margin: 0 auto;

  }

}



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

/*                                                                            */

/* DESKTOP VIEWPORT                                                           */

/*                                                                            */

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



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

  /* Desktop viewport:  Show desktop class, hide mobile-tablet class */



  .desktop {

    display: block;

  }



  .mobile-tablet {

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



  table {

    border: 1px solid #2a1f14;

    margin: 0 auto;

  }



  caption {

    font-size: 2em;

    font-weight: bold;

    padding: 1%;

  }



  th,

  td {

    border: 1px solid #2a1f14;

    padding: 1%;

  }



  th {

    background-color: #2a1f14;

    color: white;

    font-size: 1.15em;

  }



  tr:nth-child(odd) {

    background-color: #deccba;

  }



  /* Desktop viewport: Style rules for form elements */



  form {

    width: auto;

  }



  .form-grid {

    display: grid;

    grid-template-columns: auto auto;

    grid-gap: 20px;

  }



  .btn {

    grid-column: 1 / span 2;

  }



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

}



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

/*                                                                            */

/* LARGE DESKTOP VIEWPORT                                     */

/*                                                                            */

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



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

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

  }

}