body {
  background: white; 
  }
  

/* PROJECTS BOX */

.project-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem; /* same as footer; keep horizontal padding for spacing */
  margin: 2rem auto;
  background: lightcyan;
  text-align: left;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;      /* reduce line height */
}

.project-box p {
  margin: 0;           /* remove paragraph margins */
}

/* PROJECTS GRID PAGE */

.projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 3rem;
    list-style: none;
    margin: 0 auto;       /* center the grid */
    padding: 0 2rem;    /* space from left and right edges */
    max-width: 1100px;    /* optional: limit overall width */
  }

  .projects li img {
    max-width: 250px;   /* limits size */
    width: 100%;
    height: auto;
    display: block;     /* ensures margin auto works */
    margin: 0 auto;     /* centers the image horizontally */
  }
  
  
  

  /*

  @media screen and (max-width:900px) {
    .projects {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media screen and (max-width: 400px) {
    .projects {
      grid-template-columns: 1fr !important;
    }
  }

  */

  




.projects figure {
    margin: 0;
    text-align: center; /* centers caption and any inline content */
    color: black;
    font-style:normal;
    text-decoration: underline;       /* add underline */
    text-decoration-color: black; /* explicitly set underline color */
  }

.projects figcaption {
    margin-top: 0.5rem; /* optional spacing from image */

  }
  


/* PROJECT PAGE */

.project-data {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 3rem auto; /* center and add space below */
}

.project-data h1 {
  margin-bottom: 0.5rem;
}

.project-data p {
  margin: 0.25rem 0 1rem 0;
  font-style: italic;
  color: #444;
}

.project-data .project-text,
.project-data .project-text p {
  font-style: normal;
  /*   text-align: justify;  */
  color: #444;
  margin: 0.25rem 0 1rem 0; /* optional spacing for paragraphs inside */
}

.project-data .project-text {
  margin-top: 1.5rem;
}


.project-links {
  text-align: center;
  margin-top: 1rem;
}

.project-links a {
  margin: 0 1rem;
  text-decoration: underline;
}



/* PROJECT AUDIO */

.project-audio {
  list-style: none;
  padding: 0;
  margin: 2rem auto;
  text-align: center;
}

.project-audio li {
  margin-bottom: 1.5rem;
}

.project-audio audio {
  display: block;
  margin: 0 auto;
}



/* PROJECT IMAGES */
  
  .project-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 3rem;
    list-style: none;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 1100px;
  }

  
  .project-images li img {
    max-width: 250px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .project-images img {
    width: 100%;
    max-width: 250px;  /* normal grid size */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  

  .image-credit {
    text-align: center;
    font-size: 0.7rem;
    color: #444;
    margin-top: 0.25rem;
  }
  

  
  /* Enlarged state */

  .img-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    z-index: 9999;
  }
  .img-overlay img {
    display: block;
    max-width: 90%;
    max-height: 90%;
  }
  



  /* PROJECT VIDEOS */

  .project-videos {
    list-style: none;
    width: 100%;
    max-width: 600px;  /* center box that shrinks down to fit */
    margin: 2rem auto 0 auto;
    padding: 0;        /* remove default ul padding */
    box-sizing: border-box;
  }
  
  .project-videos li {
    margin-bottom: 2rem;
  }
  
  .project-videos video {
    width: 100%;   /* fills the li completely */
    height: auto;
    display: block;
  }



/* FOOTER */

  .footer {
    display: flex;
    justify-content: space-around; /* or space-between */
    padding: 0.5rem 0;
    margin-top: 2rem;     /* space above footer */
    /* background: #fffdbf; optional */
    background: lightcyan; /* optional */
    text-align: center;
  }
  
  .footer a {
    /* text-decoration: none; */
    /* color: #333; */
  }






/* ABOUT PAGE */

.about-data h1 {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 3rem auto; /* center and add space below */
}

.about-text {
  margin: 1.5rem auto 0 auto;
  max-width: 650px;
  text-align: center;
}


.about-text p {
  margin: 0.25rem 0 1rem 0;
  line-height: 1.5;
  color: #444;
}