@font-face {
    font-family: "HelveticaNeue-Light";
    src: url(fonts/HelveticaNeue-Light.woff);
  }


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    font-size: 12px;
}

a {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

header {
    cursor: pointer;
}

.header-logo {
    position: fixed;  /* Keeps it fixed on the viewport */
    top: 30px;       /* Adjust the top position as needed */
    left: 50%;       /* Center horizontally */
    transform: translateX(-50%); /* Ensures perfect centering */
    width: 200px;
    z-index: 1000;   /* Ensures it stays on top */
    cursor: pointer;
}



.navbar-bottom {
    position: fixed;    
    bottom: 0;            
    left: 0;              
    width: 100%;              
    text-align: center;   
    padding: 40px 0;   
     
}

/* NAVBAR STYLES */
.navbar-bottom ul {
    list-style: none;   
    margin: 0;
    padding: 0;
    display: flex;     
    justify-content: center; 
    gap: 100px;     
}

.navbar-bottom li {
    display: inline;   
    font-size: 12px;     
    cursor: pointer;
    text-decoration: none;
    background-color: white;
    padding: 0 5px 0 4px;
   /* text-shadow:
    .6px .6px 0 #fff,
    -.6px .6px 0 #fff,
    -.6px -.6px 0 #fff,
    .6px -.6px 0 #fff; */
}
.navbar-bottom li:hover {
    text-decoration: underline;
}

.filter-item:hover {
    text-decoration: underline;
}

.index-nav {
    grid-column-start: 1;
    grid-column-end: 2;
    margin-top: auto;
    margin-bottom: auto;
    justify-self: left;
    padding-left: 30px;
}

.index-nav:hover {
    text-decoration: underline;
}




.contact-nav {
    grid-column-start: 6;
    grid-column-end: 7;
    margin-top: auto;
    margin-bottom: auto;
    justify-self: right;
    padding-right: 30px ;
}

.contact-nav:hover {
    text-decoration: underline;
}




.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px; 
    height: 100vh;
    margin-right: 20px;
    margin-left: 20px;
    justify-items: center;
    align-content: start;

}

.grid-item {
    display: flex;
    justify-content: center;
}


/* INDEX GRID */
.index-grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    height: 100vh;
    padding-top: 100px;
    margin-right: 20px;
    margin-left: 20px;
    justify-items: center;
    align-content: start;
}

.index-grid-item {
    display: flex;
    justify-content: center;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Instead of removing items, just make them invisible */
.index-grid-item[style*="opacity: 0"] {
    opacity: 0;
    visibility: hidden;
}

.index-grid-item figure {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    height: 100%; 
}

.index-grid-item img {
    width: 100%;
    display: block;
}

.index-grid-item figcaption {
    font-size: 8px;
    padding-top: 10px;
    text-align: left !important; 
}







.project-container {
    display: grid;
    grid-template-columns: 1fr 5fr; /* 1fr for nav, 5fr for content */
    gap: 20px; /* Space between nav and grid */
    align-items: start; /* Prevents grid from stretching */
}

/* Sidebar (Left Nav Bar) */
.project-index-nav {
    padding: 20px;
    height: 100vh; 
    display: flex;
    align-items: center;
    justify-self: left;
    padding-left: 40px;
    position: sticky; 
    top: 0; 
}

.project-index-nav:hover {
    text-decoration: underline;
}

/* Grid Container (Right Side) */
.project-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Adjust column count as needed */
    gap: 20px; /* Space between grid items */
    margin-right: 20px;
    justify-content: center;
    padding-top: 40px;
}

.project-grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-grid-item figure {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    height: 100%; 
}
/* Grid Items */
.project-grid-item img {
    width: 100%; 
    display: block;
    justify-content: center; 
}

.project-grid-item figcaption {
    font-size: 8px;
    padding-top: 10px;
    text-align: left !important; 
}




.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
    text-align: center;
}

/* Project Index Navigation */
.text-index-nav {
    position: absolute;
    top: 0; /* Adjust position */
    left: 20px;
}

.text-index-nav:hover {
    text-decoration: underline;
}

/* Centered Text */
.text-content {
    max-width: 600px; /* Limit text width */
    margin-left: -17.5vw;

}

.text-content a {
   text-decoration: underline;

}

.text-content a:hover {
    color: grey;
 
 }




.image-stack {
    grid-column-start: 2;
    grid-column-end: 6;
    height: 100vh;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    position: relative; 
    width: 350px; 
    margin: auto; /* Centers within the grid */
    cursor: pointer;
}



.stacked-image {
    position: absolute;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%); /* Centers both horizontally & vertically */
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}

.stacked-image:nth-child(odd) {
    transform: rotate(-5deg); /* Slight rotation */
}

.stacked-image:nth-child(even) {
    transform: rotate(5deg); /* Opposite direction */
}




/* Lightbox Styling */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85); /* 50% transparent white */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    display: flex;
    align-items: center;
}

#lightbox-img {
    max-width: 100%;
    max-height: 78vh;
}


#lightbox-caption {
    font-size: 8px;
}



button {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font: inherit; /* Inherits the font from the parent */
    cursor: pointer;
}



.navbar-lightbox {
    position: fixed;    
    bottom: 0;            
    left: 0;              
    width: 100%;              
    text-align: center;   
    padding: 40px 0;   
    background: white;  /* Match page background */
}

.navbar-lightbox ul {
    list-style: none;   
    margin: 0;
    padding: 0;
    display: flex;     
    justify-content: center; 
    gap: 100px;      
}

.navbar-lightbox li {
    display: inline;   
    font-size: 12px;     
    cursor: pointer;
}

.navbar-lightbox li:hover {
    text-decoration: underline;
}




.contact-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.contact-info a:hover {
    color: grey;
}

/* When contact is open, maintain the original image-stack styling */
.image-stack.contact-view {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 350px; 
    height: 100vh;
    margin: auto;
}



@media (max-width: 768px) {

    .grid-container {
        gap: 0px;
    }

    .index-grid-container, 
    .project-grid-container {
        grid-template-columns: repeat(2, 1fr); /* Change to 2 columns */
    }

    .image-stack {
     width: 60vw;
    }


    .index-nav {
        padding-left: 5px;
    }
    
    
    
    .contact-nav {
        padding-right: 5px ;
    }

    .navbar-bottom ul {
        gap: 50px;      
    }


    .navbar-lightbox ul {
        gap: 50px;      
    }

    .contact-info {

        width: 60vw;
        height: 100%;
    }


    .image-stack.contact-view {
        width: auto; 
    }

    .navbar-lightbox li:hover {
        text-decoration: none;
    }

  

    .project-index-nav:hover {
        text-decoration: none;
    }
    

    .index-nav:hover {
        text-decoration: none;
    }
    


}