body { margin: 0; font-family: 'Inter', Arial, sans-serif; background: #fff; color: #333; }
header, footer { background: #fafafa; text-align: center; padding: 16px; font-weight: bold; }
nav { display: flex; justify-content: center; gap: 24px; padding: 12px; background: #f5f5f5; font-size: 16px; }
nav a { text-decoration: none; color: #555; font-weight: 600; }
.container { display: flex; flex-direction: row; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px; gap: 20px; }
.main { flex: 2; }
.infobox { flex: 1; background: #f9f9f9; padding: 20px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); max-width: 300px; }
h1, h2, h3 { margin-top: 0; }
.quote { font-style: italic; text-align: center; margin: 20px 0; padding: 10px 20px; background: #fdf2f2; border-left: 4px solid #e66; border-radius: 6px; }
.toc { background: #f0f0f0; padding: 15px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 30px; }
.toc ul { list-style: none; padding-left: 0; }
.toc li { margin: 8px 0; }
.toc a { text-decoration: none; color: #0077cc; font-weight: 600; }
.toc a:hover { text-decoration: underline; }
img { max-width: 100%; border-radius: 6px; margin: 10px 0; }
@media (max-width: 768px) { .container { flex-direction: column-reverse; } }
img {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 10px;
}

/* RESPONSIVE CHANGE FOR MOBILE */
@media (max-width: 768px) {
  .container {
    flex-direction: column-reverse;
  }
}

/* === NEW STYLES === */

.image-container {
  max-width: 600px; /* This controls maximum width */
  margin: 20px auto; /* Center it */
}

.image-container img {
  width: 100%; /* Make it scale inside the container */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
img {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 10px;
  }
  
  /* RESPONSIVE CHANGE FOR MOBILE */
  @media (max-width: 768px) {
    .container {
      flex-direction: column-reverse;
    }
  }
  
  /* === NEW STYLES === */
  
  .image-container {
    max-width: 600px; /* This controls maximum width */
    margin: 20px auto; /* Center it */
  }
  
  .image-container img {
    width: 100%; /* Make it scale inside the container */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
/* References Section */
.references-list {
    list-style-type: decimal;
    padding-left: 20px;
    font-size: 14px;
    color: #555;
  }
  
  .references-list li {
    margin-bottom: 8px;
  }
  
  .references-list a {
    text-decoration: none;
    color: #0077cc;
  }
  
  .references-list a:hover {
    text-decoration: underline;
  }
  .references-list {
    list-style-type: decimal;
    padding-left: 20px;
    font-size: 14px;
    color: #555;
  }
  h2 {
    border-bottom: 1px solid #ccc; /* light grey line */
    padding-bottom: 8px; /* adds a little space below text before the line */
    margin-bottom: 20px; /* adds space after the line before next content */
  }
  .section-header {
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 20px;
  }
  html {
    scroll-behavior: smooth;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
  }
  
  nav a {
    text-decoration: none;
    color: #0077cc;
    font-weight: 600;
    font-size: 16px;
  }
  
  @media (max-width: 600px) {
    nav {
      flex-direction: column;
      gap: 10px;
    }
  }
  nav a:hover {
    text-decoration: underline;
    color: #005999; /* slightly darker blue on hover */
  }