:root {
    /* colors */
    --one: #F6D4D3;
    --two: #FFFCF9;
    --three: #D8D0DC;
    --four: #82688D;
    --five: #201A23;
    --lowOpacity: rgba(66, 27, 87, 0.5);
    --lowOpacityBG: rgba(66, 27, 87, 0.7);
    /* other vars general */
    --border: 5px;
    --fontDisplay: "Titillium Web", sans-serif;
    --fontTimes: "Times New Roman", Times, serif;
    --sliderPadding: 10px;
    /* prj container vars */
    --borderRad: 5%;
    --shadowDark: rgba(0, 0, 0, 0.2);
    --shadowLight: rgba(240, 225, 248, 0.166);
    --shadowPx: 20px;
}

.Projects {
    /* width: 90vw; */
    margin: auto;
    padding: auto;
    display: flex;
    flex-direction: row;
}

#buttons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}

#buttons button {
    width: 125px;
    padding: 0;
    margin: 5px;
    border: var(--one);
    font-size: medium;
    text-decoration: none;
    background-color: var(--four); /* Adjust hover background color */
    color: var(--one);
    font-weight: bold; /* Optional: Adjust font weight */
    padding: 5px 10px; /* Optional: Adjust padding for each link */
    transition-property: background-color;
    transition-duration: .3s;
    border-radius: var(--border);
}

#buttons button:hover {
    background-color: var(--three);
    color: var(--five); /* Link color */
    border-radius: var(--border);
}

#projects-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 15px; /* Space between items */
    justify-content: center; /* Align items to the start of the row */
    align-content: center;
    margin: 0 auto; /* Center the container */
    padding: 0; /* Remove any padding */
}

.project {
    position: relative;
    width: 220px; /* Fixed width for consistent layout */
    border-radius: var(--borderRad);
    overflow: hidden;
    box-shadow: var(--shadowPx) var(--shadowPx) var(--shadowPx) var(--shadowDark);
    display: flex;
    flex-direction: column; /* Stack image and overlay vertically */
    align-items: center;
    margin: 0; /* Remove any margin to avoid extra height */
    background: transparent; /* Ensure background is transparent */
}

.projectImage {
    width: 100%; /* Fit the width of the project container */
    aspect-ratio: 1.5;
    display: block;
    border: 5px ridge var(--one);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Cover the entire project container */
    background-color: var(--lowOpacity);
    color: rgba(255, 255, 255, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0; /* Hide the overlay initially */
    transition: opacity 0.3s ease; /* Smooth transition */
    z-index: 1;
}

.project:hover .overlay {
    opacity: 1; /* Show the overlay on hover */
    color: white;
    font-size: 20px;
    font-family: var(--fontDisplay);
    text-align: center;
    white-space: pre-wrap;
    background-color: var(--lowOpacityBG);
}

@media screen and (max-width: 779px) {
    .Projects {
        display: block;
        flex-direction: row;
    }

    #buttons {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 25px;
    }
}

@media screen and (max-width: 769px) {

    #projects-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .project {
        position: relative; /* Ensure the positioning is relative */
        max-width: 100%; /* Ensure the project fits within the viewport */
    }

    .projectImage {
        width: 100%; /* Ensure the image fits the container width */
        height: auto; /* Maintain aspect ratio */
    }

    .overlay {
        position: static; /* Position the overlay below the image */
        opacity: 1; /* Always visible on mobile */
        background-color: transparent; /* Background color for overlay */
        color: white; /* Text color */
        display: block; /* Ensure overlay is displayed as a block */
        padding: 10px; /* Padding for text */
        white-space: pre-wrap; /* Preserve new lines and spaces */
    }

    .project a {
        text-decoration: none; /* Remove underline from links */
        text-align: center;
        text-wrap: auto;
    }
}