@import url('../main.css');

.main 
{

    display: grid;
    gap: clamp(36px, 6vw, 64px);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(28px, 5vw, 48px) var(--page-pad);

}

.users 
{

    padding: clamp(18px, 3vw, 28px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

}

.users__list 
{

    padding-bottom: 16px;
    display: flex;
    justify-content: center;
    gap: var(--gap);
    margin-top: 20px;
    overflow: auto;
    flex-wrap: wrap;

}

.users__list::-webkit-scrollbar { height: 10px; }

.users__list::-webkit-scrollbar-track { background: var(--bg); }

.users__list::-webkit-scrollbar-thumb { background: var(--surface-3); }

.users__list li 
{

    flex: 0 0 auto;
    scroll-snap-align: start;

}

.user-card 
{

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 168px;
    padding: 20px 14px;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--ease), background-color var(--ease);

}

.user-card:hover 
{ 
    
    border-color: var(--border); 
    background: var(--surface-2); 

}

.user-card__pfp 
{

    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);

}

.su_no_avatar 
{

    width: 80px;
    height: 80px;
    background-color: var(--surface);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.su_no_avatar font 
{

    color: var(--text-faint);
    font-size: 20pt;

}

.user-card__name 
{

    max-width: 100%;
    overflow: hidden;
    color: var(--primary);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;

}

.footer { margin-top: 650px; }