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

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('images/beige-paper.png') repeat;
    background-size: 50px 50px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

html,
body {
    height: 100%;
    font-family: "dico-code-one", monospace;
    color: #674D2C;
    /* Consistent font color */
}

body {
    display: flex;
    flex-direction: column;
    background-color: #003D24;
    overflow-x: hidden;
}



/* Full-height sections */
section {
    height: 100vh;
    /* Ensure each section always fills the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    /* Updated padding for consistency */
    text-align: center;
    width: 100%;
    /* Ensure full width */
}

#title {
    /* Remove background-image from here */
    /* background-image: url('images/amsterdamsekrul.png'); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #E3C140;
    transition: opacity 0.3s ease;
    background-color: #002400;
    background-attachment: scroll;
    /* Remove fixed attachment for parallax */
    background-position: center;
    /* Keep the background centered */
    background-size: cover;
    /* Ensure the image covers the entire section */
}

#title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 3, 3, 0.67);
    /* Green transparent overlay */
    opacity: 0;
    /* Start fully transparent */
    animation: fadeInOverlay 1s ease-in forwards;
    /* Fade in after 3 seconds */
    z-index: 1;
    /* Place overlay above the background image */
    transition: background-color 0.6s ease;
    /* Increase duration for smoother transition */

}

#title.solid-overlay::after {
    background-color: rgba(0, 61, 36, 1);
    /* Make the overlay fully solid */
}

@keyframes fadeInOverlay {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#title img {
    display: none;
    /* Hide the img tag as the background image is now set */
}

#title .text-container {
    width: 100%;
    /* Full width */
    text-align: center;
    /* Ensure text is centered */
    margin: 0 auto;
    /* Center horizontally */
    padding: 2rem;
    /* Add padding for spacing */
    position: relative;
    /* Ensure text is above the overlay */
    z-index: 2;
    /* Place the text above the image */
    opacity: 0;
    /* Start fully hidden */
    animation: fadeInText 1s ease-in forwards;
    /* Fade in at the same time as the overlay */
    animation-delay: 0s;
    /* Start the animation immediately, matching the overlay animation */
}

@keyframes fadeInText {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#title .text-container h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* Dynamically adjust font size */
    word-wrap: break-word;
    /* Ensure text wraps properly */
    overflow-wrap: break-word;
    /* Handle long words */
    margin-bottom: 0.5rem;
    /* Add spacing below the title */
    font-family: "nazare", monospace;
}

#title .text-container p {
    font-size: 1.2rem;
    /* Adjust subtitle font size */
    font-family: "dico-code-one", monospace;
    color: #FFF8E7;
    /* Consistent subtitle color */
}

/* Placeholder background colors for sections */
#about {
    background-color: #003D24;
    /* Consistent background color */
    padding: 2rem;
    /* Add padding to ensure content fits */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    /* Adjust height based on content */
    position: relative;
    /* Ensure images are positioned relative to this section */
    color: #FFF8E7;
    /* Consistent text color */
}

#about p {
    text-align: left;
    /* Align text to the left */
    font-size: 1rem;
    line-height: 1.5;
    font-family: "dico-code-one", monospace;
}

#about h2 {
    margin-top: 2rem;
    /* Increase margin above the heading */
}

.drop-cap-image {
    width: 5vw;
    /* Set width relative to viewport width for responsiveness */
    max-width: 3rem;
    /* Ensure it doesn't get too large */
    min-width: 2rem;
    /* Ensure it doesn't get too small */
    height: auto;
    /* Maintain aspect ratio */
    float: left;
    /* Float the image to allow text wrapping */
    margin-right: 0.5rem;
    /* Add spacing between the image and text */
    margin-top: 0.1rem;
    /* Slight adjustment to align with the text */
}

.about-images {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.image-container {
    position: relative;
    /* Ensure the center image stays within the section */
    width: 100%;
    /* Full width */
    height: auto;
    /* Adjust height based on content */
}

#projects {
    background-color: #FFF8E7;
    /* Bisque */
}

#contact {
    background-color: #d3d3d3;
    /* Light gray */
}

/* Header */
header {
    position: relative;
    background-color: #003D24;
}

/* Hamburger Menu */
#menu-toggle {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    width: auto;
    transition: transform 0.3s ease, color 0.3s ease;
}

#menu-toggle:hover {
    transform: scale(1.1);
}

#menu-toggle.light-background {
    color: #003D24;
}

/* Menu Header */
#menu-header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Vertically center content */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #003D24;
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    height: 4rem;
}

#menu-header a {
    position: absolute;
    left: 1rem;
    /* Add spacing between the logo and text */
}

#menu-header img {
    height: 40px;
}

#menu-header h2 {
    margin: 0;
    text-align: center;
    color: #FFF8E7;
    font-family: "nazare", monospace;
}

#menu-header:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Menu */
#menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    top: 4rem;
    right: 0;
    left: 0;
    background-color: #FFF8E7;
    padding: 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    z-index: 998;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}

#menu li {
    border-bottom: 1px solid #372417;
    padding-bottom: 0.5rem;
}

#menu li:last-child {
    border-bottom: none;
}

#menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

#menu:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

#menu a {
    text-decoration: none;
    color: #674D2C;
    font-family: "dico-code-one", monospace;
}

/* Menu Overlay */
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#menu-overlay:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Menu Icon Colors */
.menu-icon-light {
    color: #59714B;
}

.menu-icon-dark {
    color: #E3C140;
}

.menu-icon-blue {
    color: #59714B;
}

.menu-icon-red {
    color: #59714B;
}

.menu-icon-green {
    color: #E3C140;
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .overProject-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Two columns: left and right */
        grid-template-rows: auto auto;
        /* Two rows for the right column */
        gap: 2rem;
        /* Add spacing between grid items */
        align-items: start;
        /* Align content at the top */
        height: fit-content;
        margin-top: 6rem;
    }

    .overProject-grid h1 {
        grid-column: 1 / 2;
        /* Place heading in the left column */
        grid-row: 1 / 2;
        /* First row */
        font-size: 5rem;
    }

    .overProject-grid p {
        grid-column: 1 / 2;
        /* Place text in the left column */
        grid-row: 2 / 3;
        /* Second row */
        margin: 4rem;
        margin-top: 0;
    }

    .about-images {
        grid-column: 2 / 3;
        /* Place images in the right column */
        grid-row: 1 / 3;
        /* Span both rows */
    }
}

@media (min-width: 1024px) {
    #about h2 {
        text-align: center;
        /* Center the heading */
    }

    .education-timeline {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center the timeline items */
        margin: 0 auto;
        /* Center the timeline within the section */
        max-width: 70%;
        /* Limit the width for better readability */
    }

    .timeline-image img {
        height: 80vh;
        /* Set the height to the full screen size */
        width: auto;
        /* Maintain the original aspect ratio */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .overProject-grid {
        grid-template-columns: 1fr;
        /* Single column for smaller screens */
        gap: 1rem;
        /* Adjust gap for smaller screens */
    }

    .overProject-grid h1,
    .overProject-grid p,
    .about-images {
        grid-column: 1 / 2;
        /* Single column layout */
        grid-row: auto;
        /* Adjust rows automatically */
    }
}

/* Project Item */
.project-item {
    text-align: center;
    margin-bottom: 2rem;
}

.project-item h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #333;
}

.image-container {
    position: relative;
    display: block;
    /* Ensure it spans the full width */
    width: 100%;
    /* Full width of the page */
    border: 5px solid #372417;
    /* Light blue border */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensure content stays within the border */
    margin: 0 auto;
    /* Center the container */
}

.about-images .image-container {
    position: relative;
    display: block;
    /* Ensure it spans the full width */
    width: 90%;
    /* Full width of the page */
    border: none;
    /* Light blue border */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensure content stays within the border */
    margin: 0 auto;
    /* Center the container */
}

.image-container img {
    display: block;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Fill the container while maintaining aspect ratio */
    object-fit: cover;
    /* Ensure the image covers the container */
    border-radius: 10px;
    /* Slightly smaller radius for the image */
}

.projects-grid .image-container img {
    aspect-ratio: 16 / 9;
    /* Landscape aspect ratio */
    object-fit: cover;
    /* Ensure the image covers the container */
}

.image-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    /* Semi-transparent background */
    padding: 0.5rem;
    font-size: 0.9rem;
    color: #333;
    border-radius: 5px;
    transform: rotate(-10deg);
    /* Slight rotation */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Add a subtle shadow */
}

/* Two Columns for Projects */
.project-columns {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.column {
    flex: 1;
    /* Ensure equal width for both columns */
}

.column a {
    display: block;
    margin-bottom: 1rem;
    /* Add vertical gap between images */
}

.image-container {
    position: relative;
    display: block;
    width: 100%;
    /* Full width of the column */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
}

.image-container img {
    display: block;
    width: 100%;
    /* Fill the container width */
    height: 100%;
    /* Fill the container height */
    object-fit: cover;
    /* Ensure the image covers the container */
    border-radius: 10px;
    /* Slightly smaller radius for the image */
}

.image-container.red-border {
    border: 5px solid #59714B;
    /* Tomato red border */
}

.image-container.green-border {
    border: 5px solid #AD8200;
    /* Lime green border */
}

.image-container.blue-border {
    border: 5px solid #BAA22B;
    /* Dodger blue border */
}

.image-container.yellow-border {
    border: 5px solid #372417;
    /* Gold border */
}

/* Projects Carousel */
.projects-carousel {
    display: flex;
    overflow-x: scroll;
    /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory;
    /* Snap scrolling */
    gap: 1rem;
    /* Space between items */
    width: 100%;
    scroll-behavior: smooth;
    /* Smooth scrolling */
    height: fit-content;
    /* Adjust height based on contents */
}

.carousel-item {
    display: flex;
    flex-direction: column;
    /* Arrange items in a column */
    justify-content: flex-start;
    /* Align items to the top */
    align-items: center;
    /* Center items horizontally */
    text-align: center;
    gap: 0.5rem;
    /* Add spacing between items */
    flex: 0 0 100%;
    /* Each item spans full screen width */
    scroll-snap-align: center;
    /* Snap to center */
    border-radius: 15px;
    /* Rounded corners */
    overflow: hidden;
    /* Ensure content stays within the border */
    margin-bottom: 2rem;
    /* Match project item spacing */

}

.carousel-item img {
    width: 100%;
    /* Full width */
    height: 100%;
    /* Match the height of the project item */
    object-fit: cover;
    /* Ensure the image covers the container */
    aspect-ratio: 16 / 9;
}

.carousel-item:nth-child(1) {
    border: 5px solid #59714B;
    /* Tomato red border */
}

.carousel-item:nth-child(2) {
    border: 5px solid #AD8200;
    /* Lime green border */
}

.carousel-item:nth-child(3) {
    border: 5px solid #BAA22B;
    /* Dodger blue border */
}

.carousel-item:nth-child(4) {
    border: 5px solid #372417;
    /* Gold border */
}

.carousel-item h3 {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #333;
}

.carousel-item.back-to-beginning {
    display: none;
    /* Ensure the item is not visible */
    scroll-snap-align: none;
    /* Prevent snapping */
}

/* Navigation Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #333;
}

/* Contact Form */
form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

input,
textarea,
button {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    font-family: "dico-code-one", monospace;
}

button {
    background-color: #59714B;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "dico-code-one", monospace;
}

button:hover {
    background-color: #59714B;
}

/* Contact Section */
.contact-image {
    position: relative;
    width: 100%;
    /* Full width */
    height: 50%;
    /* Flexible height based on contents */
    overflow: hidden;
    border: none;
    /* Removed border */
    border-radius: 0;
    /* Removed border radius */
}

.contact-image img {
    display: block;
    width: 100%;
    /* Fill the container width */
    height: 100%;
    /* Fill the container height */
    object-fit: cover;
    /* Ensure the image covers the container */
}

.contact-columns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    color: #fff;
    /* Text color */
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Ensure rows span the full width */
    margin-bottom: 1rem;
    /* Space between rows */
}

.left-column img {
    display: block;
    width: 50px;
    /* Icon size */
    height: 50px;
}

.right-column a {
    display: block;
    color: #fff;
    /* Link color */
    text-decoration: none;
    font-family: "dico-code-one", monospace;
}

.right-column a:hover {
    text-decoration: underline;
    /* Add underline on hover */
}

.center-image {
    position: relative;
    /* Ensure the smaller image can be positioned relative to the center image */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    /* Make the center image large */
    margin: 0 auto;
    /* Center the image horizontally */
}

.center-image img {
    width: 100%;
    /* Fill the container */
    height: auto;
    /* Maintain original aspect ratio */
    object-fit: contain;
    /* Prevent cropping */
    border: none;
    /* Remove border */
    border-radius: 0;
    /* Remove border radius */
    box-shadow: none;
    /* Remove drop shadow */
}

.center-image img,
.top-right-image {
    width: 100%;
    /* Set width to fill the container */
    height: auto;
    /* Maintain original aspect ratio */
    object-fit: contain;
    /* Prevent cropping and preserve the original ratio */
    box-shadow: none;
    /* Remove drop shadow */
    border-radius: 0;
    /* Remove border radius */
}

@keyframes rotateImage {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

@keyframes rotateImageBottomLeft {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes rotateImageTopLeft {
    0% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    100% {
        transform: rotate(-10deg);
    }
}

@keyframes rotateImageLeft {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.top-right-image,
.top-left-image,
.bottom-left-image,
.left-image {
    display: none;
    /* Ensure these images are no longer visible */
}

/* Footer Icons */
.footer-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Space between icons */
    margin-top: 3.5rem;
}

.footer-icon {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Smooth transition for hover effects */
}

.footer-icon:hover {
    transform: scale(1.2);
    /* Slightly enlarge the icon */
    opacity: 0.8;
    /* Slightly reduce opacity */
}

/* Scroll to Top Icon */
.scroll-to-top {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.scroll-to-top a {
    font-size: 2rem;
    text-decoration: none;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}

.scroll-to-top a:hover {
    color: #59714B;
}

/* New Rows in Contact Section */
.full-width-column {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.contact-columns .row p,
.contact-columns .row a {
    margin: 0;
    font-size: 1rem;
    color: #fff;
    /* Text color */
    word-wrap: break-word;
    /* Break long words */
    overflow-wrap: break-word;
    /* Ensure text wraps properly */
    text-align: center;
    /* Center-align text */
    font-size: clamp(0.8rem, 2vw, 1rem);
    /* Shrink text dynamically */
}

/* Education Timeline */
.education-timeline {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.education-timeline li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.timeline-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #E3C140;
    background-color: #003D24;
    border-radius: 50%;
    margin-right: 1rem;
}

.timeline-content {
    max-width: 600px;
}

.timeline-content h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #E3C140;
}

.timeline-date {
    font-size: 0.9rem;
    color: #674D2C;
    margin-bottom: 0.5rem;
    display: block;
}

.timeline-content p {
    margin: 0;
    font-size: 1rem;
    color: #FFF8E7;
}

.timeline-item {
    opacity: 0;
    /* Start hidden */
    transform: translateY(20px);
    /* Start slightly below */
    transition: opacity 0.5s ease, transform 0.5s ease;
    /* Smooth animation */
}

.timeline-item.visible {
    opacity: 1;
    /* Fully visible */
    transform: translateY(0);
    /* Move to original position */
}

.timeline-image img {
    width: 100%;
    /* Full width */
    border-radius: 10px;
    /* Optional: Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional: Add subtle shadow */
    margin-top: 1rem;
    /* Add spacing above the image */
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    position: relative;
    margin-top: 1.5rem;
    /* Push it further down */
    font-size: 0.9rem;
    color: #003D24;
    border-top: #003D24 1px solid;

}

.footer-icon-small {
    display: block;
    margin: 0.5rem auto;
    width: 30px;
    /* Small size */
    height: auto;
}

footer p {
    text-align: center;
    color: #674D2C;
}

/* Project Description */
.project-description {
    font-size: 0.9rem;
    color: #674D2C;
    text-align: center;
    margin-top: 0.3rem;
    /* Reduce top margin */
    padding: 0.3rem;
    /* Reduce padding */
}

/* Image Wrapper */
.image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Text Wrapper */
.text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    /* Add spacing between text elements */
    height: 100%;
}

/* External Link Section */
#external-link {
    height: fit-content;
    text-align: center;
    padding: 2rem;
    background-color: #FFF8E7;
    /* Consistent background color */
    position: relative;
    /* Ensure the image can overlap slightly */
    color: #674D2C;
    /* Consistent text color */
}

.full-width-button {
    display: inline-block;
    width: 100%;
    max-width: 300px;
    padding: 0.6rem 1.1rem;
    background-color: #003D24;
    /* primary green background */
    color: #FFF8E7;
    /* light text on green */
    border: 1px solid #FFF8E7;
    /* white border */
    border-radius: 0px;
    /* rectangle */
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-family: "dico-code-one", monospace;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease, border-color 0.2s ease;
    box-sizing: border-box;
    margin: 1rem;
}

.full-width-button a {
    color: inherit;
    /* let the link inherit button color */
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: normal;
    font-family: inherit;
}

/* Hover / focus: white background, green border and green text */
.full-width-button:hover,
.full-width-button:focus {
    background-color: #FFF8E7;
    /* white */
    color: #003D24;
    /* green text */
    border-color: #003D24;
    /* green border */
    transform: translateY(-2px);
    outline: none;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .full-width-button {
        transition: none;
    }

    .full-width-button:hover,
    .full-width-button:focus {
        transform: none;
    }
}

/* Project Details Section */
#project-details {
    padding: 2rem;
    background-color: #FFF8E7;
    /* Consistent background color */
    text-align: left;
    /* Align text to the left */
    height: fit-content;
    color: #674D2C;
    /* Consistent text color */
}

#project-details h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #003D24;
    /* Dark text color */
    font-family: "nazare", monospace;
}

#project-details ul {
    list-style-type: none;
    /* Remove default list styling */
    padding: 0;
}

#project-details li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #674D2C;
    /* Slightly lighter text color */
    font-family: "dico-code-one", monospace;
}

#project-details li strong {
    color: #59714B;
    /* Highlighted text color */
}

/* Gallery Section */
#gallery {
    padding: 2rem;
    background-color: #FFF8E7;
    /* Consistent background color */
    text-align: center;
    height: fit-content;
    color: #674D2C;
    /* Consistent text color */
}

#gallery h2 {
    font-size: 5rem;
    margin-bottom: 1rem;
    color: #003D24;
    /* Dark text color */
    font-family: "nazare", monospace;
    margin-top: 6rem;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: none;
    /* Remove box shadow */
    object-fit: cover;
}

.image-description {
    text-align: center;
    font-size: 0.9rem;
    color: #674D2C;
    /* Match text color with gallery section */
    margin-top: 0.5rem;
    /* Add spacing above the description */
    font-family: "dico-code-one", monospace;
}

/* Footer */
footer {
    background-color: #FFF8E7;
    /* Consistent background color */
    padding: 1rem;
    color: #003D24;
    /* Consistent text color */
}

.footer-icon {
    width: 40px;
    /* Set icon size */
    height: 40px;
    /* Ensure consistent size */
}

.footer-icon-small {
    display: block;
    margin: 0.5rem auto;
    width: 4rem;
    /* Small size */
    height: auto;
}

.scroll-to-top {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.scroll-to-top a {
    font-size: 1rem;
    text-decoration: underline;
    color: #59714B;
    cursor: pointer;
    transition: color 0.3s ease;
}

.scroll-to-top a:hover {
    color: #674D2C;
}

@media (min-width: 1024px) {

    /* Styles for laptop and desktop screen sizes */
    #menu-toggle,
    #menu-overlay,
    #menu {
        display: none;
    }

    #extra-section h2 {
        font-size: 6rem;
    }

    #desktop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        background-color: #003D24;
        color: #FFF8E7;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        pointer-events: auto;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        /* Smooth transition for background and shadow */
    }

    #desktop-header.transparent {
        background-image: none;
        background-color: transparent;
        /* Make background invisible */
        box-shadow: none;
        /* Remove shadow */
    }

    #desktop-header:not(.transparent) {
        background-color: #003D24;
        /* Visible background */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        /* Add subtle shadow */
    }

    #desktop-header h2 {
        margin: 0 auto;
        /* Center horizontally */
        font-size: 1.5rem;
        font-family: "nazare", monospace;
        position: absolute;
        /* Position it absolutely */
        left: 50%;
        /* Move to the center */
        transform: translateX(-50%);
        /* Adjust for centering */
        color: #FFF8E7;
    }

    #desktop-header img {
        height: 50px;
    }

    #desktop-header nav {
        display: flex;
        gap: 2rem;
    }

    #desktop-header nav a {
        text-decoration: none;
        color: #FFF8E7;
        font-family: "dico-code-one", monospace;
        font-size: 1rem;
    }

    #desktop-header nav a:hover {
        text-decoration: underline;
    }

    #project-details h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
        margin-top: 7rem;
    }

    #project-details ul {
        margin-bottom: 7rem;
        width: 50%;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        justify-items: center;
        align-items: start;
    }
}


@media (max-width: 1023px) {
    #desktop-header {
        display: none;
        /* Hide desktop header on mobile screens */
    }

    /* Force the mobile menu header to always be visible and interactive */
    #menu-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4rem !important;
        padding: 0.5rem 1rem !important;
        background: #003D24 !important;
        color: #FFF8E7 !important;
        z-index: 1400 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        transition: none !important;
    }

    /* Ensure the menu-toggle remains above the header and tappable,
       and vertically centered within the header using the measured header height.
       Use the JS-set --menu-header-height (fallback: 64px). */
    #menu-toggle {
        display: inline-flex !important;
        position: fixed !important;
        /* center vertically relative to header height (set by JS as --menu-header-height) */
        top: calc(var(--menu-header-height, 64px) / 2) !important;
        transform: translateY(-50%) !important;
        right: 1rem !important;
        width: 48px !important;
        height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        color: #FFF8E7 !important;
        z-index: 1600 !important;
        cursor: pointer !important;
        transition: transform 0.3s ease, color 0.3s ease !important;
    }

    /* Ensure light-background variant does not change the color on mobile */
    #menu-toggle.light-background {
        color: #FFF8E7 !important;
    }

    /* Keep menu overlay/menu hidden state behavior intact but ensure header is not hidden by .hidden */
    #menu-header.hidden {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        max-height: none !important;
    }
}

.footer-text p {
    text-align: center;
    font-size: 2rem;
    color: #003D24;
    margin-bottom: 1rem;
    font-family: "dico-code-one", mono;
}

#extra-section {
    color: #FFF8E7;
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#fullscreen-image-wrapper {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

#fullscreen-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.6s;
    pointer-events: none;
    user-select: none;
}

/* Overlay for fullscreen eindresultaat */
#fullscreen-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 11, 2, 0.748);
    /* dark transparent overlay */
    z-index: 2;
    pointer-events: none;
}

#extra-section>*:not(#fullscreen-image-wrapper) {
    position: relative;
    z-index: 2;
}

.timeline-content a {
    color: #E3C140;
}

.gallery-item {
    margin-bottom: 2.5rem;
}

/* Desktop: visually emphasize the content-block nearest the horizontal center.
   Using transform: scaleY keeps widths untouched while increasing visible height. */
.pgl-content-grid .content-block {
    /* preserve layout, animate only visual transform */
    transition: transform 260ms cubic-bezier(.22, .9, .27, 1), box-shadow 260ms ease;
    will-change: transform;
    transform-origin: 50% 100%;
    /* grow upward from the bottom */
}

/* Active center block — slightly taller visually, subtle elevation */
.pgl-content-grid .content-block.center-active {
    transform: translateY(-12px) scaleY(1.10);
    z-index: 3;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}

/* Reduce effect on small screens (JS also disables the class on narrow viewports) */
@media (max-width: 1023px) {

    .pgl-content-grid .content-block,
    .pgl-content-grid .content-block.center-active {
        transition: none;
        transform: none;
        box-shadow: none;
    }

    #menu-header h2 {
        display: none;
    }

    #menu-header.hidden:after {
        content: "";
        position: fixed;
        inset: 0;
        background: url(images/beige-paper.png) repeat;
        background-size: 50px 50px;
        opacity: 0.5;
        pointer-events: none;
        z-index: 1;
    }
}