/* style.css */
img {
    max-width: 100%;
    height: auto;
  }
  
  body {
    font-family: 'Times New Roman', serif;
    background-color: #f9f2e7;
    color: #000;
    font-size: 1.8rem;
    margin: 1em auto;
    padding: 0;
    max-width: 100%;            /* stretch to full width */
    width: 90%;                 /* or: 90% of screen width */
  }
    
  a {
    color: #006400;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  
  #header-table {
    width: 100%;
    border-collapse: collapse;
  }
    
  #school-logo {
    width: 80px;
    vertical-align: middle;
  }
  
  section {
    margin: 1.2em 0;
  }
  
  @media (max-width: 720px) {
    body {
      max-width: 95%;
      margin: 1em auto 0 auto;
    }
  }
  
  .container {
    max-width: 1000px;  /* or 900px, or whatever you prefer */
    margin: 0 auto;     /* centers it horizontally */
    padding: 0 1em;     /* prevents text from touching the edges */
  }

/* Header flex layout */
#header {
  display: block;
  overflow: hidden;      /* clears floats so header has height */
  padding-bottom: 0em; /* add spacing below header */
}


#photo-cell {
  float: left;        /* photo sits left of text */
  margin-right: 0.5em; /* spacing between photo and text */
}

/* Desktop profile picture */
#photo-cell img {
  height: 8.5em;
  width: auto;
  border: 2px solid #000;
}

/* Mobile adjustments */
@media (max-width: 720px) {
  body {
    font-size: 1.4rem;       /* slightly smaller text for phones */
  }

  #header {
    display: block;           /* stack header elements vertically */
    overflow: hidden;
    padding-bottom: 1em;      /* spacing below header */
  }

  #photo-cell {
    float: none;              /* cancel float */
    margin: 0 auto 1em auto;  /* center photo above text */
    text-align: center;
  }

  #photo-cell img {
    width: 120px;             /* smaller photo on phone */
    height: auto;             /* preserve aspect ratio */
    border: 2px solid #000;
  }

  #info-cell {
    text-align: center;       /* center the text under the photo */
    font-size: 0.9em;         /* slightly smaller than desktop text */
  }

  p, h1 {
    margin: 0.3em 0;          /* tighter spacing for mobile */
  }
}