/*

FORMATS THE LOOK FOR PROJECT PAGES

*/
.content {
    display: flex;
    flex-direction: column;
    gap: 200px; /* Space between each project block */
    margin: 0 auto;
    max-width: 800px; /* Set a max width for the content */
}

.project-item {
    position: relative; /* Needed for the image to position itself relative to this block */
    padding-right: 10px; /* Leave space on the right for the image */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 150px; /* Set a fixed height for each block */
    border-bottom: 1px solid #ccc; /* Optional separator */
    padding-bottom: 20px;
}

.project-item h3 {
    margin: 0;
    font-size: 1.5em;
    flex: 1;
}

.project-item p {
    margin: 0;
    flex: 2;
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Optional: Show ellipsis if text overflows */
}

.project-item img {
    position: absolute;
    right: -600px; /* Float the image to the right outside the page wrapper */
    top: -20px; /* Adjust this value to raise or lower the image */
    height: auto; /* Maintain aspect ratio */
    width: 450px; 
    object-fit: cover;
    margin-left: 20px;
    align-self: center; /* Vertically align the image in the middle */
    
    cursor: default; /* Shows the pointer on hover to indicate it's clickable */

    transform: scale(1);
    transition: transform 0.5s ease; /* Graceful transition */
}


.project-item img:hover {
    transform: scale(1.03);
    transition: transform 0.5s ease; /* Graceful transition */
}

.video-container {
    position: absolute;
    right: -800px; /* Float the image to the right outside the page wrapper */
    top: -20px; /* Adjust this value to raise or lower the image */
    height: 360px;
    width: auto; /* Maintain aspect ratio */
    object-fit: cover;
    margin-left: 20px;
    align-self: center; /* Vertically align the image in the middle */
}