/* MullProds Web Page Style Sheet - JM's built from scratch CSS - Started 9/14/2026*/

html {
  font-size: 16px;
}

body {
  margin: 0rem;
  padding: 0rem;
  font-family:
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #f2f2f2; /* Try options: antiquewhite, #F2F2F2, #EAEAEA, #DDD */
  background: #1a1a1a; /* Try options: #030303, #111, #181818, #1A1A1A */
}

/* Small phones: 360–480px */
@media (max-width: 480px) {
  html {
    font-size: 14px; /* 1rem = 14px */
  }
}

/* Phones: 480–768px */
@media (min-width: 768px) {
  html {
    font-size: 15px; /* 1rem = 15px */
  }
}

/* Tablets: 768–1024px */
@media (min-width: 1024px) {
  html {
    font-size: 16px; /* stays standard */
  }
}

/* Laptops: 1024–1440px */
@media (min-width: 1440px) {
  html {
    font-size: 17px; /* slight bump */
  }
}

/* Large monitors: 1440px+ */
@media (min-width: 1440px) {
  html {
    font-size: 18px; /* 1rem = 18px */
  }
}

header {
  padding: 4rem;
  padding-top: 3rem;
  width: 60%;
  margin: 0 auto;
  margin-top: 3rem;
  margin-bottom: -2rem;
  text-align: left;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

header p {
  font-size: 2rem;
  line-height: 2.3rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

header a {
  color: inherit;
  text-decoration: none;
}

header a:hover {
  text-decoration: underline;
  /* Options to add: "opacity: 0.8;" color: aquamarine; */
}

h1,
h2,
h3 {
  font-family:
    "Cal Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
}

h1 {
  font-size: 4rem;
  margin-bottom: -1.1rem;
}

h2 {
  font-size: 3rem;
  margin-bottom: -1.1rem;
}

h2 a {
  color: inherit;
  text-decoration: none;
}

h2 a:hover {
  text-decoration: underline;
  /* Options to add: "opacity: 0.8;" color: aquamarine; */
}

section {
  padding: 3rem;
  padding-top: 2rem;
  width: 75%;
  margin: 0 auto;
  line-height: 1.8;
  text-align: left;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

section p {
  font-size: 1.5rem;
  line-height: 1.8rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-align: left;
}

footer {
  margin: 1rem;
  margin-top: 4rem;
  margin-bottom: 3rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: inherit;
  font-style: italic;
}

.contact {
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
}

footer a {
  color: inherit; /* use the same color as surrounding text */
  text-decoration: none; /* remove underline */
  font-weight: inherit; /* optional: match surrounding text weight */
}

footer a:hover {
  text-decoration: underline;
  font-weight: inherit; /* optional: match surrounding text weight */
  /* Options to add: "opacity: 0.8;" color: aquamarine; */
}

/*   border: 1px solid white; */
/* Mosh's idea on HTML Sections is to set font-size: 62.5%; 62.5% of 16px = 10px (then each rem is multiplied by 10 for estimated # of pixels) */
/* This is MOSHs Approach from HTML & CSS II Section 10 Typography
@media screen and (max-width: 1024px) {
  body {
    font-size: 1.8rem;
  }
  h1 {
    font-size: 7rem;
  }
  h1 {
    font-size: 4rem;
  }
  h3 {
    font-size: 3rem;
  }
}

CP's idea on hover over a hyperlink
header a:hover {
  text-decoration: underline;
  opacity: 0.8;
  color: aquamarine; 
*/