<!-- to use this same style file for sub-pages, put it in the root directory with the index html, then link via href="/root-dir/styles.css"-->
/* Ensure the body uses a serif font and respects user's default font size -- moved all this to container */

/* Make H1 larger using a relative unit that scales with the browser/screen; H1 is bolded by default? */
h1 {
    font-size: 1.5rem;
    margin-bottom: 1em /* em is scaled to the font size */
}
h2 {
    color: red; /* Or color: #ff0000; or color: rgb(255, 0, 0); */
    font-size: 1.2rem;
}
h3 {
    color: blue; 
    font-size: 1.1rem;
}

/* this scales the image while keeping the aspect ratio -- don't need this with the image-text-section below */
.responsive-image {
  width: 80%;      /* Makes the image take 80% width of its container, like the body text */
  height: auto;     /* Automatically calculates the height to maintain aspect ratio */
  max-width: 300px; /* Optional: Sets a maximum size for the image */
}

/* to put text beside an image 2026-02-25  */
.image-text-section {
  display: flex; /* Makes the section a flex container */
  align-items: center; /* Vertically centers the items (image and text) */
  gap: 20px; /* Adds space between the image and text */
  /* Additional styling for presentation */
  padding: 20px;
  border: 1px solid #ccc;
  max-width: 800px;
  margin: 20px auto;
  border: none;
  outline: none;
}
.section-image {
  display: flex; /* the missing piece 2026-02-28 */  
  flex: 1 1 0; /* grow-shrink-basis: should be same as flex: 1; */
  max-width: 50%; /* this is 50% of whole page, yes? */
  min-width: 0; /* required to allow image to shrink? */
  height: auto; /* preserves aspect ratio of image */
}
.section-text {
  display: flex;
  flex: 2 1 0; /* the text container is 2x as big as the image */
  flex-shrink: 1;  /* not sure this is needed 2026-02-28 */
}

/* main definitions for the body go at the end so they are not over-written */
.container {
    width: 80%;       /* Sets the width to 80% of the viewport or parent element */
    margin: 0 auto;   /* Centers the block; 0 says no top or bottom margins; can also give 4 values */     
    max-width: 800px; /* Limits width on desktop */
    /* Optional: Add some padding for better readability - buffer on mobile edges */
    padding: 0 10px;
    /* font-family: Verdana, Geneva, sans-serif; This fails to separate 1,l,I */
    font-family: "Times New Roman", Times, serif;
    /* Optional: Sets a default size, but still allows scaling */
    font-size: 1rem;
}