.bio {
    margin-top: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 0.1rem solid var(--highlight-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.data {
    margin: 1rem 0;
}

.metadata {
    display: flex;
    justify-content: space-evenly;
    padding-top: 1rem;
    border-top: 0.1rem solid var(--highlight-color);
}

::deep {
    .field {
        display: flex;
        column-gap: 0.5rem;
        margin: 0.2rem 0;
    
        .field-name {
            font-weight: 600;
            width: 10rem;
            word-wrap: break-word;
            
            .ph {
                vertical-align: text-bottom;
            }
        }
    }
}

::deep .field .field-value {
    width: calc(100% - 10.5rem);
    word-wrap: break-word;
}

.fields {
    margin: 1rem 0;
}

.section {
    text-align: center;
    .field-data {
        font-weight: 600;
    }
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.badge {
    display: inline-block;
    padding: 0 0.5rem;
    background-color: var(--highlight-color);
    border-radius: 0.5rem;
}

::deep {
    .badge .ph {
        display: inline-block;
        vertical-align: text-bottom;
    }
}

::deep {
    /* For some reason ph-lock aligns differently than the other icons. This fixes that */
    .badge .ph-lock {
        vertical-align: middle;
    }
}

@media (max-width: 640px) {
    ::deep .field {
        flex-direction: column;
        
        .field-name {
            width: auto;
        }
    }
    
    ::deep .field .field-value {
        width: auto;
    }
    
    ::deep {
        .field + .field {
            margin-top: 0.5rem;
        }
    }
}