.lab-details {
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Space out the columns evenly */
    width: 100%; /* Make the container full width */
    background-color: #393939;
    color: white;
    padding-top: 10px;
    flex-wrap: wrap;
}
/* Adjust column properties */
.column {
    flex: 1;
    text-align: center;
    padding: 0 10px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .lab-details {
        font-size: calc(12px + 0.5vw); /* Responsive font size */
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center align content */
    }

    .column {
        width: 100%; /* Full width for each column */
        margin-bottom: 10px; /* Add spacing between columns */
    }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
    .lab-details {
        font-size: calc(10px + 1vw); /* Smaller font size */
    }

    .column {
        text-align: left; /* Align text to the left for better readability */
        margin-bottom: 5px;
    }
}

.lab {
    width: 100%; /* Make the person container full width */
}
body { 
    font-family: Arial, sans-serif; 
    padding: 20px; 
    background-color: #000000;
}
.header { 
    background: #393939; 
    color: white; 
    padding: 10px; 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: nowrap; 
    align-items: center; 
    text-align: center; 
}
.header h1, .header h4 { 
    color: white; 
    margin: 0; /* Remove default margins */
}
h3 {
    font-size: 1.5em; /* Adjust this value to match the size of h2 */
    color: #E65C00; /* Orange color, already defined */
    text-align: center; /* Center the text */
    border: 2px solid #E65C00; /* Orange border */
    padding: 5px; /* Padding inside the border */
    margin: 20px auto; /* Center the box and add margin for spacing */
    display: inline-block; /* Make the border wrap the text only */
    background-color: #000000; /* Assuming a black background */
}

.header img {
    width: 7%; /* Divide screen width equally among the three components */
    height: auto;
    object-fit: cover;
}

.header-text {
    width: 10%;
    height: auto;
    object-fit: cover;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: calc(8px + 1vw);
}

.header-center {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .header img, .header-text, .header-center {
        flex: 1 1 100%; /* Each takes full width of the screen one below the other */
        text-align: center;
        margin: 5px 0; /* Add some margin for spacing */
    }
}
.header-text p {
    margin: 0;
}
nav { 
    text-align: center; 
    margin-top: 20px; 
}
nav a {
    text-decoration: none;
    color: white;
    margin: 0 10px;
    font-size: 16px;
}
.sub-nav { /* New sub-nav section */
    background: #393939; /* Same orange as header */
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 40px; /* Extra space after the original nav */
}
.sub-nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}
.publication img {
    width: 100px; /* Placeholder size, adjust as needed */
    height: 100px;
    background-color: #ccc; /* Placeholder background for the image */
    margin-right: 20px;
}
.publication {
    margin-bottom: 15px;
}
.key-figure {
    margin-bottom: 5px;
}
.abstract, .citation {
    margin-bottom: 10px;
}
.image-container {
    text-align: center; /* Center the image */
    margin: 20px 0; /* Space before and after the image */
}

.section { margin-bottom: 20px; }
h1, h2, h3 { color: #E65C00; }

/* For Persons Page */
.person {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}
.person img {
    width: 100px;
    height: 100px;
    background-color: #ccc;
    margin-right: 20px;
}
.person-details {
    display: flex;
    flex-direction: column;
}
.person-details strong {
    margin-bottom: 5px; /* Adjust margin to match the line spacing */
    display: block; /* Ensure the margin applies properly */
    color: white;
    
}
.person-details p {
    margin-top: 5px; /* Adjust margin to match the line spacing */
    margin-bottom: 5px; /* Adjust margin to match the line spacing */
    color: white;
}


/* For Publications Page */
.publication {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* Align the top of each profile picture with the top of the publication-details */
    background: #393939; /* Extend the background color to cover the entire publication section */
    padding: 10px; /* Add padding to match the background color */
}
.publication img {
    width: 25%; /* One fourth of the page horiz*/
    height: auto;
    background-color: #ccc; /* Placeholder background for the image */
    margin-right: 20px;
    align-self: flex-start;
}

.publication-details {
    width: 75%;
    color: white;
}
.publication-details2 {
    width: 100%;
    color: white;
}

/*remove default top margin*/
.publication-details p { 
    margin-top: 0; 
} 
.key-figure {
    margin-bottom: 5px;
}
.abstract, .citation {
    margin-bottom: 10px;
}

/* Footer */
footer {
    text-align: center; /* Center footer content */
    margin-top: 20px;
}
footer h2, footer h3 {
    color: #E65C00; /* Keeping the footer text styled similarly to the body */
}

/* Light blue colored links */
a {
    color: #5692ce; /* Light blue color */
}

/* Light purple colored links */
a:hover {
    color: #c671c6; /* Light purple color */
}

/* add highlight to button pressed in ribbon*/
.btn-home {
    display: inline-block;
    padding: 10px 20px;
    background-color: white;
    color: #393939;
    border-radius: 5px;
    text-decoration: none;
}
.btn-home:hover {
    background-color: #F0F0F0;
}

/* add stuff for slideshow */
/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: 50px auto; 
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }

  /* Play/Pause button styles */
.playPause {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: white;
    cursor: pointer;
    display: none; /* Hidden by default */
    z-index: 10;
}

.slideshow-container:hover .playPause {
    display: block; /* Show only on hover */
}