body {
  background-color: #E0F8FF;
  font-family: Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  padding: 0 1em;
}

/* "Title Block" includes page header and hamburger menu */

/* ========== Header Layout ========== */
header {
  background: lightblue;
  padding: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header h1 {
  margin: 0;
  font-size: 1.5em;
}
/* The title block, inside the page header, contains
	<h3>The Kings of Israel</h3> (optional), and
	<h1>Page Title</h1>
*/
.title-block {
  display: flex;
  flex-direction: column; /* stack h3 above h1 */
}
.title-block h3,
.title-block h1 {
  margin: 0;           /* remove all default margin */
  line-height: 1.2;    /* optional: tightens line spacing */
}
.title-block h3 {
  margin-bottom: 0.2em; /* add a little space below h3 only */
}
/* ========== Hamburger Menu ========== */
.menu-toggle {
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 0px;
}
.menu-toggle span {
  width: 25px;
  height: 3px;
  margin: 4px 0;
  background-color: black; /* sets the hamburger bar color */
}
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  margin: 0.5em 1em;
}
nav {
  background-color: #444;
}
.menu a {
  color: white;
  text-decoration: none;
}
/* Current page menu link highlight */
.menu a.active::before {
  content: "★ "; /* star icon */
  color: #ffd700;
}

/* ========== Responsive (to screen size) menu ========== */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  .menu li {
    text-align: center;
    margin: 1em 0;
  }
  .menu.show {
    display: flex;
  }
  .menu-toggle {
    display: flex;
  }
}

hr {
  margin: 1em 0;
}

/* Two-column layout for larger screens, single column on phones */
.content-sections {
  display: flex;
  gap: 2em; /* space between right and left sections */
  margin: 3px;
  flex-wrap: wrap;
}
/* Each section (left and right column) */
.section {
  flex: 1 1 45%;
  background-color: #E0F8FF;
  box-sizing: border-box;
}
/* On smaller screens, stack vertically */
@media (max-width: 768px) {
  .content-sections {
    flex-direction: column;
  }
  .responsive-divider {
    display: block;
    margin: 1em 0;
    border: none;
    height: 2px;
    background-color: gray;
  }
  table {
    font-size: 14px;
  }
}
/* Divider only shown on mobile */
.responsive-divider {
  display: none;
}


/* Padding for content inside */
.section-inner {
  padding: 0em;
}

th, td {
  padding: 0.5em;
  text-align: center;
}
th  {
  background-color: lightblue;
}

.table-scroll {
  overflow-x: auto;
  margin: 1em 0;
  max-width: 100%;
}
.table-scroll table {
  border-collapse: collapse;
  /* should add "min-width: XXXpx;" to HTML */
}