/* Ensure the layout is responsive */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
}

#container {
    font-family: 'Courier Prime', monospace;
    width: 100%;
    max-width: 900px;
    min-width: 0; /* Allow shrinking so content can wrap on narrow viewports */
    margin: 0 auto;
    padding: 16px; /* Add padding for better readability */
    background-color: #fdffff;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

header {
    padding-bottom: 20px;
}

#menu {
    border-bottom: 1px solid #757575;
    padding: 8px 16px; /* Adjust padding for mobile */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for mobile */
    align-items: center;
    justify-content: space-between; /* Better alignment for menu items */
}

.header-img {
    padding: 4px; /* Reduce padding for smaller screens */
    max-width: 24px;
}

#menu-left {
    display: flex;
    align-items: center;
    gap: 8px; /* Add spacing between elements */
}

#menu-right {
    display: flex;
    align-items: center;
    gap: 8px; /* Add spacing between icons */
}

#logo-title {
    font-size: 18px; /* Reduce font size for smaller screens */
    font-weight: 500;
    display: flex;
    align-items: center;
    text-align: left;
}

.logo {
    padding: 4px; /* Reduce padding for smaller screens */
    max-width: 24px;
}

.section {
    padding-bottom: 32px;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.job, .bullet {
    font-size: 14px; /* Slightly smaller font size for better fit */
    line-height: 1.6; /* Improve readability */
}

/* Responsive styles for smaller screens */
@media (max-width: 600px) {
    #menu {
        flex-direction: column; /* Stack menu items vertically */
        align-items: center;
    }

    #menu-left, #menu-right {
        width: 100%; /* Make menu items span full width */
        justify-content: center; /* Center align for better appearance */
    }

    #logo-title {
        font-size: 16px; /* Adjust font size for smaller screens */
    }

    .job, .bullet {
        font-size: 13px; /* Reduce font size for smaller screens */
    }

    .section {
        padding-bottom: 24px; /* Reduce padding for better fit */
    }
}