/* Global Styles */
* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'WagnerZipChange';
    src: url('wzcc.ttf') format('truetype');
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: #333;
    cursor: url('images/cursor.png'), auto; /* Custom cursor */
}

/* Specific Background for story pages */
body.story-page, body.story2-page, body.story3-page {
    background: url('images/background.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Story Page Styles */
.story-content {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    padding: 2em;
    max-width: 800px;
    margin: auto;
    font-family: 'Roboto Serif', serif; /* Use Roboto Serif font */
}

.story-content h1 {
    font-size: 3em;
    padding: 10px;
    text-align: center !important;
}

.story-content h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
    font-weight: 300;
    padding: 20px; 
    text-align: center !important;
}

.story-content p {
    font-size: 1.2em;
    line-height: 1.6;
    text-align: left;
    margin: 0 auto;
    max-width: 800px;
}

/* Header Styles */
header {
    position: relative; /* Required for the pseudo-element positioning */
    background-size: cover; /* Cover the whole header area */
    color: white;
    padding: 2em 0; /* Increase the padding to make the header larger */
    text-align: center;
    font-family: 'WagnerZipChange';
    height: 200px; /* Make the header larger */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Ensure the image does not repeat */
}

header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay to ensure text readability */
    z-index: 1; /* Ensure it sits above the background but below the text */
}

/* Specific Header Backgrounds */
.header-main {
    background-image: url('images/art1.png');
}

.header-illustrations {
    background-image: url('images/illustration1.png') !important;
}

.header-artwork {
    background-image: url('images/art5.jpg') !important;
}

.header-short-stories {
    background-image: url('images/art7.png');
}

.header-other-projects {
    background-image: url('images/art2.png');
}

.header-publications {
    background-image: url('images/art2.png');
}

.header-author-info {
    background-image: url('images/art6.png');
}

.header-contact {
    background-image: url('images/art9.png');
}

header nav {
    position: relative;
    z-index: 2; /* Ensure the nav sits above the overlay */
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1em;
}

nav ul li a {
    color: white;
    text-decoration: none;
    position: relative;
    font-size: 1.2em; /* Increase font size */
    letter-spacing: 0.1em; /* Increase letter spacing */
}

nav ul li a::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: white;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

nav ul li a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1em;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}

.header-icon {
    width: 50px;
    height: 50px;
    margin-right: 1em;
}

.header-title {
    font-size: 1.5em;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: white; /* Ensure the title is white */
    text-decoration: none;
}

/* Main Styles */
main {
    flex: 1;
    padding: 2em;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    font-family: 'WagnerZipChange';
    font-weight: bold;
    letter-spacing: 0.1em; /* Wider spaced */
    margin-bottom: 0.5em; /* Ensure spacing between heading and content */
    text-align: left;
    padding-left: 4.5em;
}

h1 {
    font-size: 2.5em; /* Larger size for h1 */
}

h2 {
    font-size: 2em; /* Larger size for h2 */
}

h3 {
    font-size: 1.75em; /* Larger size for h3 */
}

h4 {
    font-size: 1.5em; /* Larger size for h4 */
}

h5 {
    font-size: 1.25em; /* Larger size for h5 */
}

h6 {
    font-size: 1em; /* Larger size for h6 */
}

.gallery-section {
    margin-bottom: 2em;
}

/* Gallery Styles */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center; /* Center the items */
}

.gallery-item {
    width: calc(25% - 2em); /* Width for 4 columns layout */
    position: relative; /* Required for absolute positioning of img */
    margin: 1em; /* Add margin for spacing */
    cursor: pointer;
    overflow: hidden; /* Hide overflow to maintain square shape, if needed */
    border: 1px solid #ccc;
    transition: transform 0.3s ease;
    z-index: 1; /* Set z-index for positioning context */
}

.gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Black tint */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Ensure the overlay does not interfere with click events */
    z-index: 2; /* Ensure the overlay is above the image */
}

.gallery-item:hover::before {
    opacity: 1;
}

.gallery-item:hover {
    transform: scale(0.98); /* Slight inward scaling */
}

.gallery-item img {
    position: relative; /* Changed to relative */
    max-width: 100%; /* Limit the width to container */
    max-height: 100%; /* Limit the height to container */
    object-fit: contain; /* Ensure the image covers the square area */
    z-index: 1; /* Ensure the image is below the overlay */
}

.gallery-item .story-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-family: 'WagnerZipChange';
    font-size: 1.5em;
    padding: 1em; /* Add padding for better readability */
    letter-spacing: 0.1em; /* Increase letter spacing */
    text-align: center;
    transition: opacity 0.3s ease; /* Add transition for opacity */
    opacity: 0; /* Start with the title hidden */
    position: absolute; /* Position it absolutely within the relative parent */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the title */
    z-index: 2; /* Ensure it is above the image */
}

.gallery-item a:hover .story-title {
    opacity: 1; /* Show the title on hover */
}

/* Specific styles for book items */
.book-item {
    width: calc(25% - 2em); /* Smaller width similar to other images */
    height: auto; /* Allow the image to keep its natural height */
    position: relative;
    overflow: hidden;
    border: none; /* Remove border */
    padding-bottom: 0; /* Remove any padding that could cause the border */
}

.book-item img {
    position: static; /* Default positioning */
    width: 100%;
    height: auto;
    object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

/* Contact Form Styles */

.contact h1 {
 align-items: left;
 font-family: 'Poppins', sans-serif;
 font-size: 30px;
 padding: 30px;

}

.contact p {
    align-items: left;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    padding: 30px;
   
   }

 .contact-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    margin-top: 5%;
    margin-bottom: 5%;
    font-family: 'Poppins', sans-serif;
    padding-left: 80px;
}

/* Styling for each contact item */
.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between the lines */
    padding: 1rem;
}

/* Styling for the logo images */
.contact-logo {
    width: 50px; /* Adjust the size of the logo */
    height: 50px;
    margin-right: 25px; /* Space between the logo and text */
}

/* Styling for the contact text */
.contact-item span {
    font-size: 20px; /* Adjust the size of the text */
    color: #333; /* Dark text for readability */
}

@media (max-width: 768px) {
    .contact h1,
    .contact p {
        font-size: 22px;
        padding: 15px;
    }

    .contact-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .contact-item span {
        font-size: 18px;
    }

    .contact-logo {
        width: 40px;
        height: 40px;
        margin-right: 15px;
    }

    .contact-text span {
        font-size: 20px;
        color: #333;
        display: inline-block;
    }
}

/* Styles for the short-stories.html page only */
body.short-stories-page .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns per row */
    gap: 30px; /* Space between items */
    padding: 30px;
    margin: 3em;
}

body.short-stories-page h1 {
    align-items: left;
    padding-left: 90px;
    padding-top: 0px;
    font-size: 40px; 
}

/* Ensure gallery items are fully square (no rounded corners) */
body.short-stories-page .gallery-item {
    width: 85%;
    aspect-ratio: 1 / 1; /* Keep the aspect ratio square */
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: auto; /* Ensure the height is set based on the aspect ratio */
    margin: 0; /* Remove any extra margins */
    padding: 0;
}


/* Make images fit the square */
body.short-stories-page .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images fill the square without distortion */
    object-position: center; /* Center the image within the square */
}


/* Publications Styles */
body.publications-page .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns per row */
    gap: 50px; /* Space between items */
    padding: 20px;
    padding-left: 10%;
}

/* Ensure gallery items are fully square (no rounded corners) */
body.publications-page .gallery-item {
    align-items: left;
    width: 85%;
    aspect-ratio: 1 / 1; /* Keep the aspect ratio square */
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    height: auto; /* Ensure the height is set based on the aspect ratio */
    margin: 0; /* Remove any extra margins */
    padding: 0;
}


/* Make images fit the square */
body.publications-page .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images fill the square without distortion */
    object-position: center; /* Center the image within the square */
}

body.publications-page .story-title {
    display: flex; /* Use flexbox for centering */
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 1em); /* Adjust width */
    height: calc(100% - 1em); /* Adjust height */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    padding: 0.5em;
    letter-spacing: 0.1em;
    text-align: center;
    transition: opacity 0.3s ease;
    opacity: 0; /* Start with hidden title */
}

/* Show title on hover */
body.publications-page .gallery-item:hover .story-title {
    opacity: 1;
}





/* Footer Styles */
footer {
    position: relative; /* Required for the pseudo-element positioning */
    background-color: #222; /* Darker background color */
    color: white;
    text-align: center;
    padding: 1em 0;
    width: 100%;
    margin-top: auto;
    background: #222 url('images/canvas-texture.jpg') repeat;
    background-size: 50%; /* Smaller and more zoomed out texture */
}

footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent dark overlay */
    z-index: 1; /* Ensure it sits above the background but below the text */
}

footer p {
    position: relative;
    z-index: 2; /* Ensure the text sits above the overlay */
    font-family: 'WagnerZipChange';
    align-items: left;
    Padding: 10px;
}

/* Overlay styles */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px; /* Add padding to ensure spacing */
}

.overlay-content {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align items to the left */
    width: 90%;
    height: 90%;
    gap: 20px; /* Space between image and text */
    margin-left: 200px; /* Move content slightly to the left */
}

.overlay-text {
    color: white;
    font-family: 'WagnerZipChange';
    max-width: 300px; /* Maximum width of the text box */
    text-align: left;
    flex: 0 0 300px; /* Ensure the text box stays on the left */
}

.overlay-text h1 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    color: white; /* Ensure the title is white */
}

.overlay-text p {
    font-size: 1em;
    margin: 0;
    color: white; /* Ensure the text is white */
}

.overlay-text .download-link {
    color: white;
    text-decoration: none;
    margin-top: 0.5em;
    display: inline-block;
    transition: text-shadow 0.3s ease;
    cursor: url('images/cursor.png'), auto; /* Custom cursor for download link */
}

.overlay-text .download-link:hover {
    text-shadow: 0 0 10px white;
}

.overlay img {
    max-width: 50%; /* Adjust width of the enlarged image */
    max-height: 100%; /* Ensure the image fits within the viewport */
    display: block; /* Ensure the image is centered */
}

.overlay .close {
    position: fixed; /* Use fixed positioning to keep it visible */
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2em;
    cursor: url('images/cursor.png'), auto; /* Custom cursor for close button */
    z-index: 1002; /* Ensure it is above other elements */
}

/* Arrow styles */
.arrow {
    position: fixed; /* Use fixed positioning to keep them visible */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2em;
    cursor: url('images/cursor.png'), auto; /* Custom cursor for arrows */
    user-select: none;
    z-index: 1002; /* Ensure they are above other elements */
}

.arrow.left {
    left: 20px;
}

.arrow.right {
    right: 20px;
}

/* Author Info Page */
.author-info {
    display: flex;
    justify-content: flex-start; /* Align the content to the left */
    padding: 2em;
    padding-bottom: 30px;
}

.author-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1000px;
    margin: 2em auto;
    padding: 2em;
    gap: 2em;
}

.author-text {
    flex: 1 1 400px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
    line-height: 1.6;
}

.author-photo {
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 250px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.author-buttons {
    align-items: center;
    margin: 2em 0;
}

.author-button {
    display: inline-block;
    padding: 0.75em 1.5em;
    background-color: #333;
    color: white;
    text-decoration: none;
    margin: 0.5em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.author-button:hover {
    background-color: #555;
}


/* Mobile view: Image appears first, above the text */
@media screen and (max-width: 768px) {
    .author-info-container {
        padding: 1rem;
        text-align: center; /* Optional: center the text */
    }

    .author-info-image {
        width: 100%; /* Full width for image on mobile */
        margin-bottom: 10px; /* Optional: add space between image and text */
    }

    .author-info-text {
        width: 100%;
        padding: 0 1rem; /* or more */
        text-align: left;
    }
}

/* Style for the buttons container */
.author-info-buttons {
    display: flex; /* Use flexbox to align the buttons side by side */
    justify-content: flex-start; /* Align buttons to the left */
    padding-left: 80px; /* Padding to the left */
    padding-bottom: 60px; /* Padding at the bottom */
    margin-top: 20px;
    gap: 40px; /* Space between the buttons */
}

/* Button style */
.author-button {
    background: linear-gradient(to bottom, #494949, #171717); /* Grey with slight gradient */
    color: rgb(231, 231, 231);
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px; /* Space between buttons */
    transition: background-color 0.3s;
    width: 150px; /* Fixed width for buttons */
    font-family: 'WagnerZipChange', sans-serif; /* Set font-family to 'WagnerZipChange' */
}

.author-button:hover {
    background: linear-gradient(to bottom, #616161, #777777); /* Darker grey on hover */
}

/* Button behavior in mobile view */
@media screen and (max-width: 768px) {
    .author-info-buttons {
        padding-left: 1rem;
        align-items: center;
        width: 100%;
    }

    .author-button {
        margin: 10px 0;
        width: 80%; /* Full width buttons on mobile */
    }
}


/* Short Stories Page */

.story-title {
    display: none; /* Hide the title by default */
    position: absolute;
    width: calc(100% - 1em); /* Subtract padding from the width */
    height: calc(100% - 1em); /* Subtract padding from the height */
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    padding: 10px; /* Add padding around the text */
    letter-spacing: 0.1em; /* Increase letter spacing */
    text-align: center;
    transition: opacity 0.3s ease; /* Add transition for opacity */
    opacity: 0; /* Start with the title hidden */
    display: flex;
    justify-content: center;
    align-items: center; 
}



/* Gallery Styles for Other Projects */
.other-projects-gallery .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center; /* Align items horizontally */
    align-items: flex-start; /* Align items vertically */
}


.other-projects-gallery .gallery-item {
    width: calc(25% - 2em); /* Width for 4 columns layout */
    padding-bottom: calc(25% - 2em); /* Same as width to maintain square aspect ratio */
    position: relative; /* Required for absolute positioning of img */
    margin: 1em; /* Add margin for spacing */
    cursor: pointer;
    overflow: hidden; /* Hide overflow to maintain square shape */
    border: none;
    z-index: 1; /* Set z-index for positioning context */
}

.other-projects-gallery .gallery-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Black tint */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Ensure the overlay does not interfere with click events */
    z-index: 2; /* Ensure the overlay is above the image */
}

.other-projects-gallery .gallery-item:hover::before {
    opacity: 1;
}

.other-projects-gallery .gallery-item:hover {
    transform: scale(0.98); /* Slight inward scaling */
}

.other-projects-gallery .gallery-item img {
    position: absolute; /* Absolute positioning to cover the container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the image fits within the tile without cropping */
    z-index: 1; /* Ensure the image is below the overlay */
}

.other-projects-gallery .gallery-item .story-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-family: 'WagnerZipChange';
    font-size: 1.5em;
    padding: 1em; /* Add padding for better readability */
    letter-spacing: 0.1em; /* Increase letter spacing */
    text-align: center;
    transition: opacity 0.3s ease; /* Add transition for opacity */
    opacity: 0; /* Start with the title hidden */
    position: absolute;
}

.other-projects-gallery .gallery-item a:hover .story-title {
    opacity: 1; /* Show the title on hover */
}

/* Style for NSFW blur overlay */
.gallery-item.nsfw {
    position: relative; /* Ensure the overlay is positioned correctly */
}

.gallery-item.nsfw img {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.gallery-item.nsfw .nsfw-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* Light overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    color: #000; /* Dark text color */
    opacity: 1;
    z-index: 2; /* Ensure it is on top */
}

.gallery-item.nsfw .nsfw-overlay span {
    background: rgba(255, 255, 255, 0.8); /* Ensure text is clearly visible */
    padding: 0.2em 0.5em;
    border-radius: 0.2em;
}

.gallery-item.nsfw.lightbox-open img {
    filter: none;
}

.gallery-item.nsfw.lightbox-open .nsfw-overlay {
    display: none;
}




.websites-container {
    display: flex;
    justify-content: center; /* Align horizontally */
    align-items: center; /* Align vertically */
    flex-wrap: wrap; /* Allow wrapping if necessary */
    gap: 1em; /* Add spacing */
}

.web1 {
    width: calc(25% - 2em); /* Match the width of other items */
    height: auto; /* Maintain aspect ratio */
    margin: 1em; /* Add consistent spacing */
    align-self: center; /* Align within the flex container */
}

/* Lightbox Overlay */
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    z-index: 1000;
}

#lightbox-overlay.hidden {
    display: none;
}

/* Lightbox Text Styles */
.lightbox-container h2 {
    padding-right: 7%;

}
.lightbox-container p {
    color: white;
    text-align: center; /* Center the text */
    font-family: 'Poppins', sans-serif;
    margin: 10px auto;
}

/* Title-specific styles */
.lightbox-container h2 {
    font-size: 1.5em;
    font-weight: 600; /* Bold heading */
}

/* Description-specific styles */
.lightbox-container p {
    font-size: 1em;
    line-height: 1.5; /* Improve readability */
}

.overlay-content {
    position: relative;
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    overflow: auto;
}

.overlay-content img {
    max-width: 100%;
    max-height: 60vh;
    margin-bottom: 15px;
    border: 2px solid #ccc;
    border-radius: 4px;
}

.overlay-text {
    text-align: left;
}

.overlay-text h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.overlay-text p {
    font-size: 1em;
    color: #333;
}

.download-link {
    display: block;
    margin-top: 15px;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.download-link:hover {
    text-shadow: 0 0 5px white;
    text-decoration: underline;
}

/* Lightbox container styles */
.lightbox-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Lightbox image styles */
.lightbox-image {
    max-width: 90%;
    max-height: 70%;
    border: 5px solid white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    margin-bottom: 20px; /* Add space between image and text */
}


/* Close button styles */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    z-index: 1001;
}

.lightbox-close:hover {
    color: #ccc;
}

/* Lightbox title styles */
.lightbox-title {
    align-items: center;
    color: white;
    font-size: 1.2em;
    text-align: center;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400; /* Optional: adjust the weight for boldness */
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    border: none;
    font-size: 2rem;
    padding: 10px;
    cursor: pointer;
    z-index: 1001;
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

.lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.9);
}


/* Article Page Styles */

body.article-page, body.article2-page {
    background: url('Images/canvas-texture.JPG') no-repeat center center fixed;
    background-size: cover;
}

.article-content {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    padding: 2em;
    max-width: 800px;
    margin: auto;
    font-family: 'Roboto Serif', serif; /* Use Roboto Serif font */
}

.article-content h1 {
    font-size: 3em;
    padding: 10px;
    text-align: center !important;
}

.article-content h2 {
    font-size: 1.5em;
    margin-bottom: 0em;
    font-weight: 300;
    padding: 10px; 
    text-align: center !important;
}

.article-content p {
    font-size: 20px;
    font-family: 'Roboto Serif', serif;
    line-height: 1.6;
    text-align: left;
    margin: 0 auto;
    max-width: 800px;
}


.article2-content {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    padding: 2em;
    max-width: 800px;
    margin: auto;
    font-family: 'Roboto Serif', serif; /* Use Roboto Serif font */
}

.article2-content h1 {
    font-size: 3em;
    padding: 10px;
    text-align: center !important;
}

.article2-content h2 {
    font-size: 1.5em;
    margin-bottom: 0em;
    font-weight: 300;
    padding: 10px; 
    text-align: center !important;
    font-family: 'Roboto Serif', serif;
}

.article2-content h3 {
    font-size: 1.5em;
    margin-bottom: 0em;
    font-weight: 300;
    padding: 10px; 
    text-align: center !important;
    font-family: 'Roboto Serif', serif;
}

.article2-content p {
    font-size: 20px;
    font-family: 'Roboto Serif', serif;
    line-height: 1.6;
    text-align: left;
    margin: 0 auto;
    max-width: 800px;
}


body.publications-page {
    background: white; /* Change background to white */
}
.gallery-section {
    margin-bottom: 2em;
    text-align: center;
}
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center; /* Center the items */
}
.gallery-item {
    width: calc(25% - 2em); /* Width for 4 columns layout */
    position: relative; /* Required for absolute positioning of img */
    margin: 1em; /* Add margin for spacing */
    cursor: pointer;
    overflow: hidden; /* Hide overflow to maintain square shape */
    border: 1px solid transparent;
    transition: transform 0.3s ease;
    z-index: 1; /* Set z-index for positioning context */
}
.gallery-item img {
    width: 100%;
    height: auto;
    display: block; /* Ensure images are displayed as block elements */
}
.gallery-item:hover {
    transform: scale(0.98); /* Slight inward scaling */


/* Gallery Container: Make it a grid */
#illustrations .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Creates a responsive grid */
    gap: 15px; /* Adds space between images */
}

/* Ensure the gallery items have square format */
#illustrations .gallery-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 100%;  /* This makes the height equal to the width (square aspect ratio) */
}

#illustrations .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* Ensure each image fits within the square and is centered */
#illustrations .gallery-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* This will crop the image to fit the square without distortion */
    transform: translate(-50%, -50%);
}

}
.article-titles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    margin-top: 0.5em; /* Add margin to position the titles below the images */
}
.article-title {
    font-size: 1.5em; /* Larger font size for titles */
    color: black; /* Black color for titles */
    text-align: center;
    font-family: 'Poppins', sans-serif; /* Ensure Poppins font */
    width: calc(25% - 2em); /* Match the width of the gallery items */
    margin: 1em; /* Match the margin of the gallery items */
}


/* Header Styles */
header {
    position: relative; /* Required for the pseudo-element positioning */
    background-size: cover; /* Cover the whole header area */
    color: white;
    padding: 2em 0; /* Increase the padding to make the header larger */
    text-align: center;
    font-family: 'WagnerZipChange';
    height: 200px; /* Make the header larger */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Ensure the image does not repeat */
}

header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay to ensure text readability */
    z-index: 1; /* Ensure it sits above the background but below the text */
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1em;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}

.header-icon {
    width: 50px;
    height: 50px;
    margin-right: 1em;
}

.header-title {
    font-size: 1.5em;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: white; /* Ensure the title is white */
    text-decoration: none;
}

/* Responsive Design for Mobile Devices */

@media (max-width: 768px) {

    .gallery-item {
        width: 100%; /* Make items full-width on mobile */
        padding-bottom: 10%; /* Maintain square aspect ratio */
        margin: 0; /* Add vertical margin for spacing */
        gap: 10px; /* Reduce the gap to 10px (adjust as needed) */
        padding: 20px; /* You can also adjust padding if necessary */
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ensure the image covers the square area */
    }

    .story-title {
        font-size: 1em; /* Smaller font size for mobile */
        padding: 0.5em; /* Adjust padding for mobile */
    }
}

/* Global CSS Rule for Headings on Mobile Devices */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important; /* Force text alignment to center */
        margin: 0 auto !important; /* Ensure the heading is horizontally centered */
        padding: 0 !important; /* Remove any additional padding */
    }
}



@media (max-width: 768px) {
    header {
        height: auto;
        padding: 1em 0;
    }


    .header-content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .header-icon {
        margin-right: 0;
        margin-bottom: 0.5em;
    }

    .header-title {
        font-size: 1.2em;
        letter-spacing: 0.1em;
    }

    nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5em 0;
    }

    nav ul li a {
        font-size: 1em;
    }

    .gallery {
        flex-direction: column;
    }

    .gallery-item {
        width: 90%;
        padding-bottom: 10%; /* Maintain aspect ratio */
        margin: 0.5em auto;
    }

    .article-titles {
        flex-direction: column;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
    }

    .article-titles h1 {
        margin: 0.5em 0;
    }


    .other-projects-gallery .gallery-item,
    .publications-gallery .gallery-item {
        width: 100%;
        padding-bottom: 45%;
        margin: 1em auto;
        align-items: center !important;
    }

    .publications-gallery .gallery-item .text {
        position: relative; /* Ensure the title is placed correctly */
        align-items: center !important;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        padding: 0.5em;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        text-align: center;
        font-family: 'WagnerZipChange';
        font-size: 1.2em;
        opacity: 1; /* Ensure the title is always visible */
    }


    .author-content {
        flex-direction: column;
        max-width: 100%;
        text-align: center; /* Optional: center the text */
    }

    .author-h1 {
        align-items: center;
    }

    .author-photo {
        order: 1; /* Move the image to the bottom */
        max-width: 40%; /* Make the image larger */
        margin:0; /* Add margin for spacing */
        padding: 0px;
        width: 100%; /* Full width for image on mobile */
        margin-bottom: 10px; /* Optional: add space between image and text */
    }

    .author-info-text {
        width: 100%; /* Full width for text on mobile */
        margin: 0;
    }

    body.publications-page .gallery {
        gap: 50px; /* Adjust gap for publications page */
        padding: 50px; /* Adjust padding if necessary */
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    /* Override the grid for mobile */
    body.short-stories-page .gallery {
        display: block; /* Stack items vertically */
        padding: 0;
        margin: 0;
    }

    /* Make gallery items take full width but keep aspect ratio */
    body.short-stories-page .gallery-item {
        width: 90%; /* Make items take up 90% of the screen width */
        height: auto; /* Height will be determined by aspect ratio */
        margin: 20px auto; /* Center the items with some margin */
        padding: 20px; /* Add padding around the items */
        box-sizing: border-box; /* Include padding in the width and height */
    }

    body.short-stories-page .gallery-item img {
        width: 100%; /* Ensure the image takes full width */
        height: 100%; /* Ensure the image takes full height */
        object-fit: contain; /* Maintain aspect ratio and fit the image within the container */
    }
}