main{
    padding: 12px;
    max-width: 1200px;
    margin: auto;
}

#searchbar input{
    width: 100%;
    padding: 8px 20px;
    outline: none;
}

#cards{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap);
}

.userCard{
    padding: 12px;
    display: flex;
    min-width: 320px;
    flex: 1;
}

.userCard img{
    height: 120px;
    width: 120px;
    margin-right: 12px;
    border-radius: 50%;
}

.userCard p{
    word-break: break-word;
}

#btnLoadMore{
    margin: auto;
}

#zeromatches{
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: var(--red);
    font-style: italic;
}

.positive{
    color: var(--green);
}

.negative{
    color: var(--red);
}