.portfolio-entry {
    background-color: #f9f9f9;
    border: 1px inset #808080; /* The sunken 90s look */
    margin-bottom: 20px;       /* Space between projects */
    padding: 10px;
}

.portfolio-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
}

.port-img-cell {
    width: 50%;             /* Aim for half the space */
    vertical-align: top;    /* Align image to top of cell */
    padding-right: 15px;    /* Space between image and text */
}

.port-thumb {
    width: 100%;            /* Force image to fit the cell width */
    max-width: 480px;       /* ...but never larger than 480px */
    height: auto;           /* Calculate height automatically */
    aspect-ratio: 4 / 3;    /* Lock the shape to 4:3 */
    object-fit: cover;      /* Crop edges if image isn't perfect 4:3 */
    border: 2px solid #000; /* nice solid border */
}

.port-text-cell {
    vertical-align: top;
    text-align: left;
}

.port-title {
    font-size: 16pt;
    font-weight: bold;
    color: #800000;         /* Dark Red Title */
    border-bottom: 1px solid #c0c0c0;
    display: block;
    margin-bottom: 8px;
}

.details-btn {
    display: inline-block;
    background-color: #c0c0c0;
    color: #000 !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 10pt;
    border: 2px outset #ffffff; /* 3D effect */
    margin-top: 10px;

    padding: 3px 10px;
    border: 4px outset #ffffff; 
}

.details-btn:active {
    border: 4px inset #ffffff;
    padding: 4px 9px 2px 11px;
}