* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}  
    
body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: #333;
}
  
header {
    background-color: #f4d8e2;
    text-align: center;
    padding: 1rem 0;
}

header h1  {
    /* Was rgb(214,179,4), which came out at 1.53:1 on the pink header and was
       close to unreadable. Same gold hue, darkened to 4.57:1. */
    color: #746102;
    margin: 0;
    font-size: 2rem;
}

.topnav {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #d5e3f0;
    overflow: hidden;
    z-index: 1000;
}

.topnav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    gap: 1.5rem;
}
  
.topnav ul li {    
    padding: 10px; 
}
    
.topnav ul li a {
    text-decoration: none;
    color: #333 ;
}

.topnav ul li a:hover,
.topnav ul li a:focus-visible {
      /* Was rgb(187,133,133) at 2.36:1 on the blue bar; same rose, now 4.50:1 */
      color: #935252;
}

/* Every interactive control gets the same visible focus ring. Browsers vary a
   lot in how obvious their default is, especially over coloured backgrounds. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #7a3b6b;
    outline-offset: 2px;
    border-radius: 2px;
}

.topnav .icon {
  display: none;
  /* Reset the button back to looking like the plain icon it replaced */
  background: none;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  color: #333;
}

/* The three bars, drawn in CSS. This used to be a Font Awesome glyph, which
   cost an entire icon font download on every page for one symbol. */
.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 22px;
  height: 3px;
  background-color: currentColor;
  border-radius: 2px;
}

.hamburger {
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

/* Sits off-screen until it receives keyboard focus, then drops into view as
   the first stop on the page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: 0.6rem 1rem;
  background-color: #fff;
  color: #333;
  font-weight: bold;
  text-decoration: underline;
}

.skip-link:focus {
  left: 0;
}

/* Available to screen readers, invisible on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The skip link targets <main tabindex="-1">; without this it would draw a
   focus ring around the entire page body when jumped to. */
main:focus {
  outline: none;
}

main {
    display: flex;
    flex-direction: column;
    padding: 30px;
}

h2 {
    margin: 10px;
    font-size: 1.5em;
    text-align: center;
}

h3 {
    font-size: 1.3rem;
    text-align: center;
}

.content-container {
    display: flex;
    gap: 1rem;
}

.content {
    flex: 2;
}

p {
    padding: 10px;
    font-size: 1.3rem;
}

/* These are the float images. The ones who are in between paragraphs on several pages */

.float-image1, .float-image2, .float-image3 {
  margin: 0 0 1rem 1rem;
  max-width: 40%;
  height: auto;
}

.float-image1, .float-image3 {
    float: right; /* or left depending on preference */
}

.float-image2 {
    float: left; /* or left depending on preference */ 
    padding-right: 10px;
  }

.float-image4 {
    float: right;
    max-width: 40%;
    height: auto;
}
.image-set {
    display: flex;
    justify-content: space-between;
}


/* These are the images that are next to each other. */

.childhood-gallery, .childhood-gallery-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.childhood-gallery img, .childhood-gallery-2 img {
  width: 350px;
  height: 350px;
  padding: 10px;
}


        /* Hover-Enlarge Gallery */
        .hover-gallery {
          display: flex;
          gap: 10px;
          justify-content: center;
      }

      .hover-gallery img {
          max-width: 100%;
          height: auto;
          object-fit: cover;
          transition: transform 0.3s ease;
      }

      .hover-gallery img:hover {
          transform: scale(1.1);
      }

    /* Auto-Transitioning Gallery */
      .slideshow-container {
        position: relative;
        width: 900px;
        height: 250px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin: 0 auto;
      }

      .slideshow {
        display: flex;
        width: 200%;
        transition: transform 1s ease-in-out;
      }

      .slide {
        display: flex;
        gap: 10px;
        width: 100%;
        justify-content: center;
        flex-shrink: 0;
      }

      .slide img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
      }

      .hover-gallery, .slideshow-container {
        clear: both;
      }

.sidebar {
    flex: 1;
    background-color: #e8f4e1;
    padding: 1rem;
    border-radius: 8px;
}

.sidebar h3 {
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.sidebar ul {
    list-style-type: none;
    font-size: 1.2rem;
    padding: 5px;
    margin: 10px;
}

footer {
    background-color: #f4d8e2;
    /* Was rgb(180,152,13) at 2.12:1; matches the header gold now */
    color: #746102;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

footer small {
    font-size: 0.9rem;
}



  /* Responsive Styles */


@media screen and (max-width: 600px) {

    header h1 {
      font-size: 1.8rem;
      padding: 0.5rem;
    }

    .topnav ul {
      display: none;
      flex-direction: column;
      gap: 1rem;
    }

    .topnav .icon {
      display: block;
      float: right;
    }
  
    .topnav.responsive ul {
      display: flex;
    }

    .topnav.responsive ul li {
      float: none;
      text-align: left;
    }

    main {
      padding: 10px;
    }

    .content-container {
      flex-direction: column;
      gap: 0;
    }

        /* Adjust floating images */
    .float-image1, .float-image2, .float-image3, .float-image4 {
      float: none;
      max-width: 100%;
      margin: 1rem 0;
    }
  
      /* Adjust childhood gallery images */
    .childhood-gallery {
      flex-direction: column;
    }
  
    .childhood-gallery img {
      width: 100%;
      margin: 0.5rem 0;
      height: auto;
    }
  
    .hover-gallery {
      flex-direction: column;
      align-items: center;
    }

    .hover-gallery img {
      width: 90%;
      height: auto;
    }

    .slideshow-container {
      width: 100%;
      height: auto;
    }

    .slide {
      flex-direction: column;
      align-items: center;
    }

    .slide img {
      width: 90%;
      height: auto;
    }

    h2, h3 {
      font-size: 1.3em;
      text-align: center;
    }
  
    p {
      padding: 8px;
      font-size: 18px;
    }
  }

/* For Tablets and screens (601px to 1024px) */

@media screen and (min-width: 601px) and (max-width: 1024px) {
  header h1 {
    font-size: 2.2rem;
  }

  .topnav ul {
    flex-direction: row;
    gap: 1rem; 
  }

  .topnav ul li {
    padding: 8px; /* Reduce padding for better fit */
  }

  .content-container {
    flex-direction: row;
    gap: 1rem;
  }

  .childhood-gallery {
    flex-wrap: wrap;
  }

  .childhood-gallery img {
    width: 45%;
    margin: 0.5rem;
    height: auto ;
  }

  .sidebar h3 {
    font-size: 1.2rem;
  }

  p {
    font-size: 1rem;
  }

  .hover-gallery img {
    width: 45%;
  }

  .slideshow-container {
    width: 90%;
  }

  .slide img {
    width: 45%;
  }
}

/* For desktop screens */

@media screen and (min-width: 1025px) {
  header h1 {
    font-size: 2.5rem;
  }

  .content-container {
    flex-direction: row;
    gap: 2rem;
  }

  .topnav ul {
    gap: 1.5rem;
  }

  .childhood-gallery img {
    justify-content: space-between;
    height: auto;
  }

  .sidebar h3 {
    font-size: 1.3rem;
  }

}