html, body {
   margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body{
  display: flex;
  align-items: center;
}


h1,
p, a {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: calc(1.3em + .7vw);
  text-wrap: nowrap;
}


.grey{ color: #979797;
}


a:link, a:visited, a:hover, a:active {
  color: black; /* or any other desired color, e.g., #000 for black */
  text-decoration: none;
}



/* ------------------------------- */
/*  TOP & BOTTOM FRAME (titles + footer)
These sit at the top and bottom of the viewport
/* ------------------------------- */
.ui-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes top/ bottom apart */
  pointer-events: none; /* prevents blocking clicks on content */
  z-index: 500; /* most on top */

}

/* Titles list stays interactive */
.project-titles-list {
  display: flex;
  width: 100%;
  column-gap: 50px;
  row-gap:10px;
  flex-wrap: wrap;
  padding: 20px 20px 0px 20px;
  pointer-events: auto; /* re-enable clicks */
}

@media screen and (max-width: 750px) {
      .project-titles-list {
      column-gap: 35px;
       row-gap: 15px;
    
  
    }
}
.project-name {
  display: flex;
  gap: 20px;
  cursor: pointer;
  transition: opacity 0.3s;
}

/* .project-name:hover {
  opacity: 0.6;
} */


.date{
 font-family: "Arial Narrow", Arial, sans-serif;
}


/* Footer stays interactive */
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: calc(1.1em + .7vw);
  pointer-events: auto; /* re-enable clicks */
  padding-bottom: 20px;
  align-items: flex-end;
  text-wrap: nowrap;
}
.about{
  font-size: .7em;
}



.title {
  padding-left: 20px;
}
.email {
  padding-right: 20px;
}



/* ------------------------------- */
/*   MIDDLE CONTENT BLOCK
/* ------------------------------- */

/* PURPLE BOX PROJECT CONTENT IMAGES */
.project-content {
  position: relative;
  width: 100%;
  height: 100vh; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;  /* vertical  */
  bottom: 10vh;
  /* z-index: 100;  */
  /* border: 1px solid purple; */
}



.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70%;
  /* border: 1px solid purple; */
}

@media screen and (max-width: 750px) {
.image-container {
  /* width: calc(100vw-.9em); why no work  */
  width: 90%;
    height: 50vh;
}
}



.image-container img {
  max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pdf-viewer {
  border: 1px solid black;
  z-index: 150; 
}



/* ------------------------------- */
/*   Navigation hit areas
/* ------------------------------- */
.hit-boxes {
  position: absolute;
  top: 8vh;
  left: 0;
  width: 100%;
  height: 94%;
  display: flex;
  z-index: 100;
  justify-content: center;
  cursor: w-resize;

}


 /* GREEN BOX HIT BOXES */   
.left-hit, .right-hit { 
  width: 50%; 
}

.left-hit{
    cursor: w-resize;
}
.right-hit{
    cursor: e-resize;
}

/* ------------------------------- */
/* Pagination
/* ------------------------------- */
.pagination {
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
   /* border: 1px solid blue ; */
   margin-top: 20px;
   z-index: 300;
}

@media screen and (max-width: 750px) {
      .pagination {
     width: 250px;
        margin-top: 20px;
  
    }
}



.press-link { font-style: italic; }


.download-icon
{ max-width: 18px; 
  display: flex; 
}
.download-icon img {
  width: 100%;
  height: auto;
  padding-left: 5px;
}



 .text { display: flex; gap: 5px; align-items: center; 
}


  

span {
    border: 1px solid red;
    margin-left: -5px;
}
span:nth-child(4) {
    margin-left: 15px;
}