body {
    margin:0;
    background:#0b0f14;
    color:white;
    font-family:Arial, sans-serif;
}


header {
    padding:20px;
    display:flex;
    justify-content:space-between;
    background:#111820;
}


nav a {
    color:white;
    margin-left:20px;
    text-decoration:none;
}


.hero {
    padding:80px 20px;
    text-align:center;
}


.card {

    background:#151d27;
    border-radius:15px;
    padding:20px;
    margin:15px;

}


#members {

    display:flex;
    flex-wrap:wrap;

}


.profile-card {

    max-width:700px;
    margin:40px auto;
    background:#151d27;
    padding:30px;
    border-radius:20px;

}


.mugshot {

    width:220px;
    height:220px;
    object-fit:cover;
    border-radius:15px;

}


.badges span {

    display:inline-block;
    background:#202c3a;
    padding:8px 12px;
    margin:5px;
    border-radius:20px;

}


section {

    margin-top:30px;

}


li {

    margin:8px;

}


.stats {

    display:flex;
    gap:15px;
    flex-wrap:wrap;

}


.stats div {

    background:#202c3a;
    padding:15px;
    border-radius:15px;
    min-width:100px;
    text-align:center;

}


.stats strong {

    display:block;
    font-size:24px;

}


.stats span {

    opacity:.8;

}


.cards {

display:flex;
gap:20px;
flex-wrap:wrap;

}


.card {

background:#151d27;
padding:25px;
border-radius:20px;
transition:.2s;

}


.card:hover {

transform:translateY(-5px);

}


button {

background:#202c3a;
color:white;
border:none;
padding:12px 25px;
border-radius:10px;
cursor:pointer;

}


#search {

width:90%;
max-width:500px;

padding:15px;

margin:20px 0;

background:#151d27;

border:1px solid #333;

border-radius:10px;

color:white;

font-size:16px;

}


.member-card {

cursor:pointer;

min-width:200px;

}