/* OKAYYYY RESET TIME 😎
   (so the browser doesn’t do random stuff) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* makes sizing not super annoying */
}

/* THE BIG BOX (the whole page) */
/* OKAYYYY RESET TIME 😎
   (so the browser doesn’t do random stuff) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* makes sizing not super annoying */
}

/* THE BIG BOX (the whole page) */
body {
  width: 100%;              /* full width */
  margin: 0;                /* remove centering space */
  padding: 0;
  border: none;             /* remove border */
  box-shadow: none;         /* remove shadow */
  font-family: Arial, Helvetica, sans-serif;
  background: white;
}


/* HEADER = fancy sky fade ✨
   white on top -> lightsteelblue on bottom */
header {
  background: linear-gradient(white, lightsteelblue); /* rule: gradient */
  padding: 18px;
  border-bottom: 4px solid steelblue; /* rule: border below header */
}

/* make header text look nice-ish */
header h1 {
  color: steelblue;
  font-style: italic;
  margin-bottom: 4px;
}

header h2 {
  font-size: 1.1rem;
}

/* give the page some breathing room */
main {
  display: flex;
  gap: 20px;
  padding: 20px;
  align-items: flex-start;
}

.aside-left,
.aside-right {
  flex: 1;
  margin-top: 0; /* important so they align to top */
}

main section {
  flex: 2;
}

p {
  margin: 10px 0;       /* space between paragraphs */
  line-height: 1.4;     /* readableeee */
}

/* ASIDE = the rounded box (like a lil bubble) */
aside {
  border: 3px solid steelblue; /* rule: rounded steelblue border */
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
}

/* FOOTER = steelblue bar with white text 👌 */
footer {
  background: steelblue; /* rule: steelblue background */
  color: white;          /* rule: white text */
  text-align: center;
  padding: 12px;
}

/* make the small section titles brown-ish */
h3 {
  color: firebrick; /* reddish-brown like the example */
}

/* make Additional resources title brown too */
aside h2 {
  color: firebrick;
}


/* HEADER = fancy sky fade ✨
   white on top -> lightsteelblue on bottom */
header {
  background: linear-gradient(white, lightsteelblue); /* rule: gradient */
  padding: 18px;
  border-bottom: 4px solid steelblue; /* rule: border below header */
}

/* make header text look nice-ish */
header h1 {
  color: steelblue;
  font-style: italic;
  margin-bottom: 4px;
}

header h2 {
  font-size: 1.1rem;
}

/* give the page some breathing room */
main {
  padding: 20px;
}

p {
  margin: 10px 0;       /* space between paragraphs */
  line-height: 1.4;     /* readableeee */
}

/* ASIDE = the rounded box (like a lil bubble) */
aside {
  border: 3px solid steelblue; /* rule: rounded steelblue border */
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
}

/* FOOTER = steelblue bar with white text 👌 */
footer {
  background: steelblue; /* rule: steelblue background */
  color: white;          /* rule: white text */
  text-align: center;
  padding: 12px;
}

/* make the small section titles brown-ish */
h3 {
  color: firebrick; /* reddish-brown like the example */
}

/* make Additional resources title brown too */
aside h2 {
  color: firebrick;
}