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

body, html {
    height: 100%;
    overflow: hidden; /* Prevent extra scrolling */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Body styles */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

/* Paragraph styles */
p {
    font-family: Arial, sans-serif;
    font-size: 12px; /* Default font size */
    line-height: 1.8; /* Line height for better readability */
    color: #333; /* Text color */
    margin-bottom: 1em; /* Space below each paragraph */
}

.p-contact {
    font-family: 'Courier Prime', monospace; /* Use Courier Prime as the font */
    font-size: 15px; /* Default font size */
    font-weight:500;
    line-height: 1.8; /* Line height for better readability */
    color: #333; /* Text color */
    margin-bottom: 0px;
}

.p-contact a {
    font-family: 'Courier Prime', monospace; /* Use Courier Prime as the font */
    font-size: 15px; /* Match .p-contact font size */
    font-weight: 500;
    line-height: 1.8; /* Match .p-contact line height */
    color: #333; /* Match .p-contact text color */
    text-decoration: none; /* Remove underline */
}

.p-contact a:hover {
    text-decoration: underline;
    text-underline-offset: 3px; /* Adjust the height of the underline */
    text-decoration-thickness: 1px; /* Set the underline thickness */
}

/* Main container */
.container {
    display: grid;
    scroll-snap-type: y mandatory; /* Enable vertical scroll snapping */
    overflow-y: scroll; /* Allow vertical scrolling */
    height: 100vh; /* Full viewport height */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.container::-webkit-scrollbar {
    display: none; /* WebKit browsers */
}

/* Section styles */
.section {
    width: 100%;
    height: 100vh; /* Full viewport height */
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.project-section {
    scroll-snap-align: start; /* Snap to the start of each section */
    height: 100vh; /* Each section takes up the full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ededed; /* Example background color */
    position: relative; /* Set positioning context for child elements */
    overflow: visible; /* Allow content to overflow the section boundaries */
}

.contact-section {
    scroll-snap-align: start; /* Snap to the start of each section */
    height: 100vh; /* Each section takes up the full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ededed; /* Example background color */
    position: relative; /* Ensure relative positioning for child elements */
    overflow: visible; /* Allow content to overflow the section boundaries */
}

/* Project images */
.project-image {
    max-width: 100%;
    transition: transform 0.3s ease;
    position: absolute; /* Keep absolute positioning for precise placement */
    z-index: 1; /* Ensure images appear above other content */
}

.project-image:hover {
    transform: scale(1.02);
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for two images */
    gap: 20px; /* Space between images */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Center the gallery */
}

.project-gallery img {
    max-width: 100%;
}

/* Specific styles for project images */

.project-1 {
    position: absolute; /* Keep the image's absolute positioning */
    max-width:  46vw !important; 
    max-height: 48vh;
    object-fit: contain; 
    top: 16.5vh;
    left: 8vw;
}

/* .project-1 {
    max-width:  46vw !important; 
    max-height: 48vh;
    object-fit: contain; 
    top: 16.5vh;
    left: 8vw;
    position: absolute; 
} */

.project-2 {
    max-width: 30vw !important;
    max-height: 70vh;
    top: 22vh;
    left: 60vw;
    position: absolute;
    object-fit: contain;
}

/* .project-3 {
    width: 15vw;
    height: 25vh;
    top: 40vh;
    left: 60vw;
    position: absolute;
    max-width: 300px;
    max-height: 500px;
    aspect-ratio: 3 / 5;
    object-fit: cover;
} */

.project-4 {
    max-width: 30vw !important;
    max-height: 70vh;
    top: 15vh;
    left: 17.3vw;
    position: absolute;
    object-fit: contain;
}

.project-5 {
    max-width: 48vw !important;
    max-height: 50vh;
    bottom: 5vh;
    left: 51vw;
    position: absolute;
    object-fit: contain;
}

/* Textbox styles */
.text-box {
    width: 25vw; /* Similar to image widths */
    height: 50vh; /* Similar to image heights */
    position: absolute; /* Allows precise placement */
    top: 20vh; /* Vertical position */
    left: 51vw; /* Horizontal position */
    padding: 0px; /* Inner spacing */
    overflow: visible; /* Allow content to overflow */
    z-index: 0; /* Ensure the text box is behind the images */
}

/*
.project-6 {
    width: 20vw;
    height: 30vh;
    top: 50vh;
    left: 70vw;
    position: absolute;
    max-width: 400px;
    max-height: 600px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
} */

.project-10 {
    max-width: 45vw !important;
    max-height: 48vh;
    top: 32vh;
    left: 58vw;
    position: absolute;
    object-fit: contain;
}

.project-11 {
    max-width: 55vw !important;
    max-height: 55vh;
    top: 18.5vh;
    left: 13vw;
    position: absolute;
    object-fit: contain;
}

/* .project-7 {
    width: 16vw;
    height: 26vh;
    top: 15vh;
    left: 20vw;
    position: absolute;
    max-width: 320px;
    max-height: 520px;
    aspect-ratio: 8 / 13;
    object-fit: cover;
}

.project-8 {
    width: 24vw;
    height: 34vh;
    top: 35vh;
    left: 50vw;
    position: absolute;
    max-width: 480px;
    max-height: 680px;
    aspect-ratio: 12 / 17;
    object-fit: cover;
} */

/* Contact page image */
.project-9 {
    flex-shrink: 0; /* Prevent the image from shrinking */
    height: 80vh;
    top: 3vh;
    left: 6.5vw;
    position: absolute; /* Position relative to the contact-section */
    aspect-ratio: 9/10;
    object-fit: cover;
    object-position: center 90%; /* Shift the image upwards within the placeholder */
}

/* Image description styles */
.image-description {
    position: absolute;
    font-family: 'Courier Prime', monospace; /* Use Courier Prime as the font */
    font-size: 10px;
    color: #333;
    z-index: 2;
    pointer-events: none;
    visibility: hidden;
    /* background-color: #ededed97;
    padding: 2px 3px 0px;
    border-radius: 2px; */
    line-height: 1; /* Ensure consistent line height */
    text-align: right; /* Align text to the right */
}

.contact-text-box {

    position: absolute; /* Allows precise placement relative to the parent */
    top: calc(3vh + 80vh); /* Align with the bottom of project-9 */
    left: calc(6.5vw + 72vh + 1rem); /* Align to the right of project-9 with spacing */
    transform: translateY(-95%); /* Adjust to align the last line */
    padding: 0px;
    overflow: visible;
    z-index: 2;
    display: flex; /* Use flexbox for alignment */
    align-items: flex-end; /* Align text to the bottom of the box */
}


.site-footer {
    position: fixed; /* Fix the footer at the bottom of the viewport */
    bottom: 8vh; /* Align it to the bottom */
    left: 8vw;
    width: 100%; /* Full width */
    display: flex;
    justify-content: flex-start; /* Align items to the left */
    gap: 10px; /* Space between sections */
    padding: 0px;
    z-index: 1000; /* Ensure it stays above other content */
}

.footer-section {
    margin-right: 20px; /* Add spacing between sections */
    font-weight: bold;
    font-size: 15px;
    color: #333; /* Text color */
}

.footer-link {
    text-decoration: none; /* Remove default blue underline from links */
}

.footer-link.active .footer-section {
    text-decoration: underline;
    text-underline-offset: 3px; /* Adjust the height of the underline */
}

.footer-section:hover {
    text-decoration: underline;
    text-underline-offset: 3px; /* Adjust the height of the underline */
}

#footer-selection .footer-section {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#footer-selection.no-underline .footer-section {
    text-decoration: none; /* Disable underline when "contact" is visible */
}

/* Site Header */
.site-header {
    position: fixed; /* Fixes the header at the top of the page */
    top: 2vh;
    left: 8vw;
    width: 100%; /* Full width */
    background-color: transparent; /* Transparent background */
    z-index: 1000; /* Ensures it stays above all other content */
    padding: 0px;
    text-align: left;
}

.site-title {
    font-size: clamp(40px, 10vh, 10vh); /* Ensure a minimum font size */
    font-weight: 550;
    color: #222;
    margin: 0;
    letter-spacing: 4px; /* Define the distance between characters */
}

.site-header-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
}

/* Default: Hide phone layout */
#container-phone {
    display: none;
}

/* Show phone layout on small screens */
@media (max-width: 768px) {
    #container-desktop {
        display: none; /* Hide desktop layout */
    }
    #container-phone {
        display: block; /* Show phone layout */
        margin: 0; /* Remove any margin */
        padding: 0; /* Remove any padding */
        overflow: hidden; /* Prevent vertical scrolling */
        width: 100vw; /* Restrict to viewport width */
        height: 100vh; /* Full viewport height */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        background-color: #ededed; /* Match the background color */
    }

    #container-phone::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit browsers */
    }

    .phone-scroll-container {
        display: flex; /* Enable horizontal scrolling */
        flex-direction: row;
        overflow-x: scroll; /* Allow horizontal scrolling */
        scroll-snap-type: x mandatory; /* Snap to each image */
        height: 100%; /* Full viewport height */
        width: 100vw; /* Full viewport width */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
    }

    .phone-scroll-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for WebKit browsers */
    }

    .phone-project-image-container {
        flex: 0 0 100%; /* Each container spans the full viewport width */
        height: 96vh; /* Full viewport height */
        top: 2vh;
        display: flex;
        justify-content: center; /* Center the image within the container */
        align-items: center;
        scroll-snap-align: start; /* Snap to the start of each container */
        position: relative;
    }

    .phone-project-image {
        width: auto; /* Image width is 84% of the viewport width */
        max-width: 94vw;
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Ensure the image fits within the container */
    }

    .phone-project-image.landscape {
        width: 94vw !important;
        height: auto !important; /* Maintain aspect ratio */
    }

    .phone-project-image.portrait {
        width: 100% !important; /* Portrait images fill the height */
    }

    .phone-image-description {
        display: none; /* Temporarily hide image descriptions on phone layout */
        position: absolute;
        bottom: 10px;
        right: 10px;
        font-size: 12px;
        color: #333;
        background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a background for better readability */
        padding: 5px;
        border-radius: 3px;
    }

    .phone-contact-section {
        flex: 0 0 100%; /* Ensure it spans the full viewport width */
        height: 96vh; /* Match the height of other scrollable items */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ededed; /* Match the background color */
        scroll-snap-align: start; /* Snap to this section */
        position: relative; /* Ensure proper positioning context */
    }

    .phone-contact-text-box {
        text-align: left; /* Center the text */
        width: 100%;
        left: 8vw;
        top: 35vh;
        position: absolute; /* Remove absolute positioning */
        z-index: 2; /* Ensure it appears above other elements */
    }

    .phone-contact-text-box .p-contact {
        font-size: 14px; /* Adjust font size for smaller screens */
        line-height: 1.6;
        color: #333; /* Ensure text color is visible */
    }
}

/* Responsive styles for tablets */
@media (max-width: 1024px) {

    .project-gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
        gap: 15px; /* Adjust gap */
    }

    .project-image {
        max-width: 90%; /* Adjust image size */
        position: static; /* Remove absolute positioning */
        margin: 0 auto; /* Center images */
    }

    .text-box {
        width: 80%; /* Adjust text box width */
        height: auto; /* Allow dynamic height */
        position: static; /* Remove absolute positioning */
        margin: 20px auto; /* Center text box */
    }
}