body{
    margin:0;
    background:#0f1115;
    color:white;
}

.app{
    max-width:430px;
    margin:auto;
    padding:20px;
}

.topbar{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.topbar h2{
    margin:0;
    font-size:22px;
}

.topbar i{
    font-size:20px;
}

.search-box{
    background:#171c24;
    height:55px;
    border-radius:16px;
    display:flex;
    align-items:center;
    padding:0 18px;
    gap:12px;
    margin-bottom:25px;
}

.search-box input{
    flex:1;
    background:none;
    border:none;
    color:white;
    outline:none;
    font-size:15px;
}



.search-box i{
    color:#8b93a3;
}

.users{
    display:flex;
    flex-direction:column;
    gap:15px;
    
}

.user-card{
    background:#171c24;
    border-radius:18px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:15px;
    color: #fff;
}

.avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#222936;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#3b82f6;
}

.info{
    flex:1;
}

.info h3{
    margin:0;
    font-size:16px;
}

.info p{
    margin-top:5px;
    color:#8b93a3;
    font-size:13px;
}

.user-card .fa-chevron-right{
    color:#8b93a3;
}

.fab{
    position:fixed;
    bottom:85px;
    right:25px;
    width:65px;
    height:65px;
    border:none;
    border-radius:50%;
    background: var(--cor-gradiente-software-hover);
    color:white;
    font-size:22px;
    box-shadow:0 10px 30px rgba(37,99,235,.35);
    cursor:pointer;
}