/* General Styles */
body {
    font-family: 'Gentium Book Plus', sans-serif; /* Set font to Helvetica */
    margin: 0;
    padding: 0;
    background-color: white; /* Set background to white */
    color: #555; /* Slightly gray text for the details */
    display: flex;
    font-weight: normal; /* Unbold the font */
}

/* Header */
header {
    background-color: white; /* White background for the header */
    color: #555; /* #555 text in the header */
    padding: 20px 20px 20px 50px; /* Add more left padding (40px) */
    width: 250px; /* Set fixed width for the header */
    display: flex;
    flex-direction: column; /* Stack the items vertically */
    align-items: flex-start; /* Align to the left */
}
header a {
    color: #555; /* Keep text #555 */
    text-decoration: none; /* Remove underline */
    font-weight: normal; /* Ensure font is not bold */
}
/* Navigation */
nav {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack nav links vertically */
    align-items: flex-start; /* Align links to the left */
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 10px 0; /* Add some vertical spacing between links */
}

nav ul li a {
    color: #555; /* Keep links #555 */
    text-decoration: none;
    font-weight: normal; /* Unbold the navigation links */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Change font color to gray on hover */
nav ul li a:hover {
    color: #888; /* Change text color to gray on hover */
}

/* Main Content */
main {
    margin: 40px auto;
    padding: 20px;
    background: white; /* White background for the main content */
    border-radius: 8px;
    flex: 1; /* Make the main content flexible */
}

/* Works Section */
.works {
    display: grid;
    grid-template-columns: 1fr; /* One image per row */
    align-items: flex-start;
    gap: 50px;
    width: 90%; /* Restrict the works section width to 95% */
    overflow-y: scroll;
    max-height: 80vh; /* Optional: limit the height of the works section */
}

.work-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left-align content */
    border-radius: 8px;
    padding: 5px;
    width: 75%; /* Let it take full width of its container */
    max-width: 70vw; /* Limit to 70% of screen width */
    /* max-height: 70vh; /\* Limit to 70% of screen height *\/ */
}

.work-item img {
    display: block; /* Removes inline spacing issues */
    width: auto; /* Let width adjust dynamically */
    height: auto; /* Let height adjust dynamically */
    max-width: 100%; /* Ensures image never exceeds container */
    max-height: 100%; /* Ensures image never exceeds container */
    object-fit: contain; /* Ensures full image is visible without cropping */
}

/* Work Details */
.work-details {
    margin-top: 10px;
}

.work-details .title {
    font-size: 14px;
    margin: 5px 0;
}

.work-details .year,
.work-details .material,
.work-details .dimensions {
    font-size: 14px;
    margin: 2px 0;
    color: #555;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: white; /* White background for the footer */
    color: #555; /* #555 text in the footer */
    margin-top: 40px;
}

/* Unbold all heading elements */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal; /* Unbold all headings */
}

/* Responsive */
@media (max-width: 768px) {
    body {
        flex-direction: column; /* Stack content vertically on small screens */
    }

    header {
        width: 100%; /* Full width header on smaller screens */
        padding: 10px 20px; /* Reduced padding for smaller screens */
    }

    main {
        max-width: 100%; /* Allow main content to take full width on small screens */
    }
}

/* Science format */
.tab { 
    margin-left: 30px; 
    margin-right: 30px;}
.photo { 
    padding: 4px;
    border: 1px solid #688770;
}
.profile {
    padding: 3px;
    border: 1px solid #688770;
    margin-right: 50px;
}
.photo-box {
    padding: 20px;
}
.box {
    border-width: 1px;
    border-color: #688770;
    padding: 25px;
    background-color:white;
}
table {
    font-size: 14px;
    border-spacing: 0px;
}
td {
    padding: 5px;
}