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 {
    max-width: 90%;
    margin: auto;
    padding-top: 5em;
}

.bio .text,
#awards {
    width: 700px;
    margin: auto;
    text-align: justify;
    padding-bottom: 4em;
}

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