main {
    display: flex;
    height: calc(100vh - 90px);
}

@media (min-width: 1200px) {
    main {
        height: calc(100vh - 100px);
    }
}

main .right {
    width: 45%;
    height: 100%;
    display: flex;
    padding-left: 120px;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

main .left {
    width: 55%;
    height: 100%;
    position: relative;
    overflow: hidden;
    user-select: none;
}

main .right .col {
    height: 100%;
    width: 135px;
    transform: skewX(15deg);
    background-color: #000;
}

main .right .cols {
    display: flex;
    height: 100%;
}

main .right .col .card {
    width: 135px;
    border-radius: 0 20px;
    overflow: hidden;
    border: 8px solid #000;
    box-sizing: border-box;
    height: 186px;
    position: relative;
    margin: -5px 0;
    display: flex;
}

main .right .col .card:hover {
    animation: border-color-4e4dd17e 1s linear .3s infinite alternate;
    border-color: #fbfe00;
    z-index: 999;
}


main .right .col .card .avatar {
    width: 160px;
    height: 160px;
    border-radius: 0 20px;
    overflow: hidden;
    margin-left: -20px;
    transform: skewX(-15deg);
}


main .right .col .card .avatar img {
    width: 100%;
    height: 100%;
}

main .right .col .card .name {
    width: calc(100% - 10px);
    text-align: end;
    padding: 0 10px;
    transform: skewX(-15deg);
    color: #fff;
    font-size: 15px;
    background-color: #000c;
    position: absolute;
    bottom: 0;
    left: -5px;
    backdrop-filter: blur(5px);
    user-select: none;
}

main .right .col:nth-child(2) {
    transform: skewX(15deg) translateY(-75px);
}

main .right .col .card.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a2a;
}

main .right .col .card.empty img {
    width: 110px;
    height: 120px;
}

main .left .avatar {
    border-radius: 100%;
    width: 900px;
    height: 900px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-40%, 40%);
}

main .left .name {
    font-size: 100px;
    color: #fff;
    margin: 20px 50px;
    word-wrap: break-word;
    text-wrap: wrap;
    word-break: break-word;
}

main .right .col .card.empty:hover {
    border-color: #000;
}

.bg {
    background-image: url(/img/friends-bg.jpg);
    background-repeat: round;
}