:root {
  --header-bg: lightblue;
  --footer-bg: lightsteelblue;
  --font-base: clamp(14px, 1vw + 0.3rem, 18px);
  --font-heading: clamp(20px, 1.5vw + 0.5rem, 26px);
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: var(--font-base);
  line-height: 1.5;
}

/* Universal image rule for all images in container */
#container img {
  width: 70%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Container grid setup */
#container {
  display: grid;
  grid-template-areas:
    "header header header"
    "content1 content2 content3"
    "content4 content5 content3"
    "content6 content6 content7"
    "footer footer footer";
  grid-auto-rows: auto;
  gap: 8px;
  padding: 8px;
}

/* Header styling */
#header { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-area: header; 
  background-color: var(--header-bg);
  padding: 0 15px;
}

#header h1 {
  margin: 0;
  font-size: var(--font-heading);
}

/* Hamburger */
#hamburger {
  display: none;
  width: 32px;
  max-width: 32px;
  height: auto;
  cursor: pointer;
}

/* Nav bar */
#nav {
  display: flex;
  background-color: lightgrey;
  padding: 10px;
  margin-top: 5px;
  gap: 15px;
  align-items: center;
}

#nav p, #nav a p {
  margin: 0;
  cursor: pointer;
}

#nav a {
  text-decoration: none;
  color: inherit;
}

/* Content boxes */
#content1, #content2, #content3, #content4, #content5, #content6, #content7 {
  padding: 15px;
  box-sizing: border-box;
  overflow-wrap: break-word;
  border-radius: 6px;
}

#content1 { grid-area: content1; background: lightgreen; }
#content2 { grid-area: content2; background: lightcoral; }
#content3 { grid-area: content3; background: lightgoldenrodyellow; text-align: center; }
#content4 { grid-area: content4; background: lightpink; }
#content5 { grid-area: content5; background: lightseagreen; }
#content6 { grid-area: content6; background: lightgray; }
#content7 { grid-area: content7; background: lightcyan; }

#footer {
  grid-area: footer;
  background: var(--footer-bg);
  padding: 15px;
  text-align: center;
}

/* Content headings */
#container h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: var(--font-heading);
}

/* ===== MEDIA QUERIES ===== */

/* 🔹 Large (≥1200px) */
@media only screen and (min-width: 1200px) {
  :root {
    --font-base: clamp(14px, 1vw + 0.2rem, 18px);
    --font-heading: clamp(22px, 1.2vw + 0.4rem, 28px);
  }

  #container {
    grid-template-areas:
      "header header header"
      "content1 content2 content3"
      "content4 content5 content3"
      "content6 content6 content7"
      "footer footer footer";
  }

  #container img {
    width: 60%;
    max-width: 350px;
  }
}

/* 🔸 Medium (600–1199px) */
@media only screen and (min-width: 600px) and (max-width: 1199px) {
  :root {
    --font-base: clamp(14px, 0.7vw + 0.3rem, 16px);
    --font-heading: clamp(18px, 1vw + 0.4rem, 22px);
  }

  #container {
    grid-template-areas:
      "header header"
      "content1 content2" 
      "content3 content3" 
      "content4 content4"
      "content5 content6"
      "content7 content7"
      "footer footer";
  }

  #container img {
    width: 50%;
    max-width: 300px;
  }
}

/* 🔻 Small (≤599px) */
@media only screen and (max-width: 599px) {
  :root {
    --font-base: clamp(13px, 0.9vw + 0.2rem, 15px);
    --font-heading: clamp(16px, 1vw + 0.3rem, 20px);
  }

  #container {
    grid-template-areas:
      "header"
      "content1"
      "content2"
      "content3"
      "content4"
      "content5"
      "content6"
      "content7"
      "footer";
  }

  #hamburger {
    display: inline-block;
    order: 2;
    width: 32px;
    max-width: 32px;
    height: auto;
    margin-left: 10px;
  }

  #nav {
    display: none;
    flex-direction: column;
    background-color: lightyellow;
    margin-top: 5px;
    padding: 10px;
    gap: 10px;
  }

  #nav.active { display: flex; }

  #container img {
    width: 90%;
    max-width: 260px;
  }
}