body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFC5;
}

.header {
    display: flex;
    padding: 10px;
}

.bio {
    background-color: #5E716A;
    display: flex;
    padding: 20px;
    gap: 24px;
}

.picture {
    /* image styles for the profile picture */
    max-width: 150px;
    height: fit-content;
}

/* Container for header and description */
.bio-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.bioHeader {
    margin: 0;
}

.bioDescription {
    margin: 0;
}

.links {
    display: flex;
    gap: 10px;
    padding: 10px;
}

.projects {
    display: flex;
    padding: 10px;
    gap:12px;
    flex-direction: column;
}

.projectsHeader {
    margin-bottom: 6px;
}

.proj1, .proj2, .proj3, .proj4 {
    padding: 8px;
    border-radius: 6px;
}

/* Make project links display as inline-block to contain the underline */
.projects a {
    display: inline-block;
    text-decoration: none;  /* Remove default underline */
    border-bottom: 1px solid;  /* Add custom underline that matches text width */
    line-height: 1.2;  /* Adjust space between text and underline */
}