body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the main-screen horizontally */
    align-items: stretch; /* Ensure full height */
    min-height: 100vh; /* Ensure the body takes up the full viewport height */
}
.main-screen {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
    width: auto; /* Allow the width to adjust based on content */
    max-width: 100%; /* Prevent overflow */
    gap: 0;
    text-align: left;
}
.side-screen {
    height: 100vh;
    overflow-y: auto; /* Allow scrolling if content overflows */
    flex: 0 0 280; /* Fixed width of 400px */
}
.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Take up the remaining space between side-screens */
    max-width: 900px; /* Optional: Limit max width */
    margin: 0 25px;
}
.header {
    display: flex;
    justify-content: space-between; /* Space between the title and navigation */
    align-items: center; /* Align items vertically in the center */
    width: 100%;
    padding-right: 0px; /* Dont make room for hamburger icon since the menu is displayed no matter what */
}
.title-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: center; 
}
.site-title {
    flex-grow: 0;
    flex-shrink: 1;
    margin: 0; 
    font-size: 2.5rem;
    word-break: normal;
}
.site-logo {
    flex-grow: 0; /* Change from 1 to 0 */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.site-logo img {
    height: 50px;
}
.navigation {
    flex-grow: 3;
    display: flex;
}
.presentation, .side-content-column > * {
    background-color: var(--entry);
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.center-content, .side-content-column {
    display: flex;
    flex-grow: 1; /* Allow it to grow */
    gap: 20px; /* Optional: Add spacing between child elements */
}
.presentation, .side-content-column {
    flex: 1; /* Make both elements take up equal width */
}
.presentation {
    max-width: 100%; /* Ensure it doesn't exceed its container */
}
.presentation a {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.side-content-column {
    max-width: 100%; /* Ensure it doesn't exceed its container */
    flex-direction: column;
}
.excerpt {
    display: flex;
    align-items: center; /* Align items vertically in the center */
    gap: 10px; /* Add spacing between text and image */
}
.excerpt-text {
    flex: 1; /* Allow text to take up remaining space */
}
.excerpt img {
    flex-shrink: 0; /* Prevent the image from shrinking */
    max-width: 150px; /* Ensure the image doesn't exceed its intended size */
    height: auto; /* Maintain aspect ratio */
    border-radius: var(--radius);
    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.3);
}
@media (max-width: 1400px) {
    .side-screen {
    display: none; /* Hide side-screens on smaller screens */
    }
    .main-screen {
    justify-content: center; /* Center main-content when side-screens are hidden */
    }
}
/* Media query for when main-content is less than 700px wide */
@media (max-width: 700px) {
    .center-content, .header{
        flex-direction: column; /* Stack elements vertically */
    }
    .presentation, .side-content-column, .site-title, .navigation{
        flex: none; /* Reset flex property */
        width: 100%; /* Make them take full width */
    }
    .header {
        padding: 10px 0; /* Reduce padding on mobile */
    }
    .title-wrapper {
        width: 100%;
        justify-content: space-between; /* Change from space-between to flex-start */
    }
    .site-title {
        font-size: 2.5rem; /* Reduce title size on mobile */
        max-width: 65%; /* Further limit width on mobile */

    }
}