div.tags {
    display: flex; /* or display: block; */
    flex-wrap: wrap; /* Enables wrapping for flex items */
    width: 100%; /* Already set in your HTML */
}

a.tag {
    text-decoration: none !important;
    color: unset !important;
    display: inline-block; /* Allows wrapping while maintaining block-like properties */
    /* Optional: Add margin or padding for spacing */
    /* margin: 5px; */
}

.bio {
    width: 90%;
    max-width: 800px;
    margin: auto;
    padding: 3em 0;
}

.bio .text,
#awards {
    width: 100%;
    float: none;
    /* margin: auto 0.5em; */
    text-align: justify;
}

.bio .text {
    padding-left: unset;
    padding-right: unset;
    padding-bottom: unset;
    padding: 0 0.5em;
}

#awards {
    padding-top: unset;
}

@media (max-width: 1199px) {
    .bio {        
        width: 100%;
        padding-top: 1em;
        padding-left:0;
        padding-right:0;
    }
}

@media (max-width: 799px) {
    .bio {
        max-width: 100%;
        width: 100%;
        padding-top: 1em;
        /* font-size: 0.8rem; */
    }
    .bio .text,
    #awards {
        width: 100%;
        margin: auto;
        text-align: justify;
    }

    .bio .text {
        padding: 0;
    }
}