@import url("main.inc.css");

/*
This stylesheet handles styles specific for project.inc.php.
It is included by index.php.


***************************
** Begin Default Styling **
*/

/* Arrow navigation */
#project #gallery-prev, #gallery-next {
    position: absolute;
    top: calc(50% - 58px);  /*  Accounts for thumbnail height in mobile. */
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--color3);
    font-size: 18px;
    border: none;
    cursor: pointer;
    z-index: 10;
}

#project #gallery-prev {
    left: 0;
    transform: translateY(-50%);
}

#project #gallery-next {
    right: 0;
    transform: translateY(-50%);
}

/* Gallery Slideshow container */
#project .gallery-slideshow-container {
    position: relative;
    width: 100%;
}

/* Hide all slides by default */
#project .gallery-slide {
    display: none;
}

#project .gallery-slide img {
    width: 100%;
    height: auto;
}

/* Thumbnail navigation */
#project .gallery-thumbnail-container {
    text-align: center;
    margin-top: 10px;
}

#project .gallery-thumbnail-container a {
    display: inline-block;
}

#project .gallery-thumbnail {
    width: 80px;  /* Adjust the width to your preference */
    height: auto;  /* Automatically adjusts height to maintain aspect ratio */
    margin: 5px;
    opacity: 0.6;
    cursor: pointer;
    transition: var(--transition);
}

#project .gallery-thumbnail:hover {
    opacity: 1;
}

/* Active slide thumbnail */
#project .gallery-thumbnail.active {
    border: 2px solid #fff;
}

#project .project-title {
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}

#project h1 {
    margin-bottom: unset;
}

#project .project-textcontainer {
    margin-top: 20px;
    margin-bottom: 20px;
}

#project .project-textcontainer h2 {
    font-size: 125%;
}

#project .project-title > p {
    color: gray;
    font-size: 150%; /* 24px */
    font-weight: 600;
}

#project .left-side {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#project p + h2, #project .right-side {
    margin-top: 20px;
}

@media screen and (min-width: 800px) {

    #project .project-text {
        display: flex;
        justify-content: space-between;
    }

    #project .left-side {
        display: block;
        width: 33%;
    } 
    
    #project .right-side {
        width: 66%;
        margin-top: unset;
    }

} /* End of 800px */

@media screen and (min-width: 924px) {

    #project .project-textcontainer {
        max-width: 900px;
        padding-left: unset;
        padding-right: unset;
        margin-left: auto;
        margin-right: auto;
    }

} /* End of 924px */