/* Mullen Productions Main Web Page Style Sheet - JM's built from scratch CSS - Started 9/22/2026*/

/* Global Design Tokens - Baseline Definition */
:root {
  --lh-tight: 1.2;
  --lh-normal: 1.3;
  --lh-loose: 1.4;
}

/* Global Sizing System - Baseline Definition */
html {
  font-size: 16px;
}

/* Global Styling Defaults */
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; /* Main Font Color - Try options: antiquewhite, #F2F2F2, #EAEAEA, #DDD */
  background: #3e57e9; /* Background Color - Try options: #030303, #111, #181818, #1A1A1A, #3814c9 */
}

/* Screen 1 - Small Phones: 360–480px */
@media (min-width: 480px) and (orientation: portrait) {
  html {
    font-size: 10px; /* 14px 1rem = 14px */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}
@media (min-width: 480px) and (orientation: landscape) {
  html {
    font-size: 10px; /* 14px 1rem = 14px */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}

/* Screen 2 - Regular Phones: 480–768px */
@media (min-width: 768px) and (orientation: portrait) {
  html {
    font-size: 15px; /* 15px 1rem = 15px */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  html {
    font-size: 15px; /* 15px 1rem = 15px */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}

/* Screen 3 - Tablets: 768–1024px */
@media (min-width: 1024px) and (orientation: portrait) {
  html {
    font-size: 20px; /* 16px stays standard */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}
@media (min-width: 1024px) and (orientation: landscape) {
  html {
    font-size: 20px; /* 16px stays standard */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}

/* Screen 4 - Laptops: 1024–1440px */
@media (min-width: 1440px) and (orientation: portrait) {
  html {
    font-size: 25px; /* 17px slight bump */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}
@media (min-width: 1440px) and (orientation: landscape) {
  html {
    font-size: 25px; /* 17px slight bump */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}

/* Screen 5 - Large monitors: 1900px+ */
@media (min-width: 1900px) and (orientation: portrait) {
  html {
    font-size: 30px; /* 18px 1rem = 18px */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}
@media (min-width: 1900px) and (orientation: landscape) {
  html {
    font-size: 30px; /* 18px 1rem = 18px */
  }
  :root {
    --lh-tight: 1.2;
    --lh-normal: 1.3;
    --lh-loose: 1.4;
  }
}

header {
  padding: 4rem;
  padding-top: 3rem;
  width: 70%;
  margin: 0 auto;
  margin-top: 3rem;
  margin-bottom: -2rem;
  text-align: center;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  border: 1px solid white;
}

header p {
  font-size: 2rem;
  line-height: var(--lh-loose);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
}

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;
  line-height: var(--lh-tight);
  margin-bottom: -1.1rem;
}

h2 {
  font-size: 3rem;
  line-height: var(--lh-normal);
  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: 100%;
  margin: 0 auto;
  line-height: var(--lh-normal);
  text-align: left;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

section p {
  font-size: 1.7rem;
  line-height: var(--lh-loose);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-align: left;
}

footer {
  padding: 1rem;
  padding-top: 1rem;
  width: 90%;
  margin: 1rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: var(--lh-loose);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: inherit;
  font-style: italic;
  border: 1px solid white;
}

.contact {
  text-align: center;
  font-size: 1.5rem;
  line-height: var(--lh-loose);
  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; 
*/