@import "https://unpkg.com/chota@latest";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";

#msg {
    color: green;
    font-weight: bold;
}

html {
    font-family: 'Open Sans', sans-serif;
    background-color: #2F353E;
}

body {
    background-color: hsl(216, 14%, 91%);
}

span[data-username]::after{
    content: attr(data-username);
}
span[data-nickname]::after{
    content: attr(data-nickname);
}
span[data-email]::after{
    content: attr(data-email);
}
span[data-avatar]::after{
    content: attr(data-avatar);
}


h1 {
    cursor: pointer;
    font-weight: 300;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 10px;
}

.status_header {
    color: gray;
}

.role{
    text-transform: capitalize;
}

.no-break {
    white-space: nowrap;
}

#userList li {
    flex-basis: clamp(16em, 25%, 20em);
    width: 18em;
    overflow: hidden;
    padding: 1em;
}

#userList img {
    max-width: 25%;
}

#userList {
    display: flex;
    flex-wrap: wrap;
}