/* Reset default list styling */
ul.menu-bar {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style horizontal menu items */
ul.menu-bar li {
    display: inline; /* Display items side by side */
    margin-right: 10px; /* Add spacing between items */
}

/* Style hyperlinks */
ul.menu-bar li a {
    text-decoration: none; /* Remove underlines from links */
    color: #333; /* Text color */
}

/* Add hover effect */
ul.menu-bar li a:hover {
    color: #007bff; /* Color on hover */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.centered-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;
    text-align: left; /* Center text horizontally within each div */
    max-width: 800px;  /* Optional: Limit the maximum width of the container */
    overflow: auto;
}

.menu, .content {
    padding: 20px;
    margin: 10px;
}

.menu {
    background-color: aliceblue;
    border: 1px solid #333;
}

/* Add background color to the highlighted headings */
h3.highlighted {
    background-color: aliceblue; /* Set your desired background color */
    display: block; /* Makes the <h3> element a block-level element */
    width: 100%; /* Makes it span the entire width of the container */
    padding: 5px; /* Adjust padding as needed */
}

.about-me-image {
    max-width: 100%;
    max-height: 100%;
}

#aboutme-wrapper {
    display: flex;
    align-items: center; /* Vertically center the inner divs */
}

#about-me-text-wrapper {
    flex: 1; /* Allow this div to grow and take remaining space */
    margin-right: 10px;
}

#about-me-img-wrapper {
    width: 30%;
}

/* Mobile styles for screens up to 768px (adjust as needed) */
@media (max-width: 15cm) {
    #about-me-text-wrapper, #about-me-img-wrapper {
        width: 100%; /* Full width for mobile devices */
        margin: 10px 0; /* Adjust as needed */
    }

    #aboutme-wrapper {
        display: block;
    }
}