.wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
}

.side-bar-left {
    min-width: 200px;
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}
.side-bar-left .profile {
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5em;
    width: 250px;
    max-width: 100%;
    border-radius: 1em;
    cursor: pointer;
    transition: background-color 150ms;
    margin-bottom: 2em;
}
.side-bar-left .profile:hover {
    background-color: rgb(40, 40, 40);
}
.side-bar-left .profile .profile-picture {
    height: 3em;
    aspect-ratio: 1/1;
    border-radius: 0.75em;
    margin-left: 0.5em;
}
.side-bar-left .profile .profile-usernames {
    font-size: 0.75em;
}
.side-bar-left .profile .profile-usernames .profile-name {
    font-family: NotoSansBold;
}
.side-bar-left .profile .profile-usernames .profile-username {
    color: rgb(139, 139, 139);
}
.side-bar-left .home {
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5em;
    width: auto;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 150ms;
}
.side-bar-left .home:hover {
    background-color: rgb(40, 40, 40);
}
.side-bar-left .home img {
    padding-top: 0.3em;
    padding-left: 1em;
    height: 2em;
}
.side-bar-left .home .home-text {
    padding-left: 0.5em;
}
.side-bar-left .chat {
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5em;
    width: auto;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 150ms;
}
.side-bar-left .chat:hover {
    background-color: rgb(40, 40, 40);
}
.side-bar-left .chat img {
    padding-top: 0.6em;
    padding-left: 1em;
    height: 2em;
}
.side-bar-left .chat .chat-text {
    padding-left: 0.5em;
}