/* =========================================
   BODY
========================================= */

body{

    margin:0;

    font-family:Arial;

    background:#f5f7ff;

    color:#111827;

}



/* =========================================
   HERO
========================================= */

.leaderboard-hero{

    text-align:center;

    padding:35px 20px 20px;

}



.leaderboard-hero h1{

    font-size:58px;

    margin-bottom:12px;

}



.leaderboard-hero p{

    font-size:18px;

    color:#6b7280;

}



/* =========================================
   LEADERBOARD BOX
========================================= */

.leaderboard-box{

    width:72%;

    margin:auto;

    background:white;

    border-radius:28px;

    padding:22px;

    box-shadow:0 8px 25px rgba(0,0,0,0.06);

    margin-bottom:60px;

}



/* =========================================
   ROW
========================================= */

.leader-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    border-bottom:1px solid #f1f5f9;

    transition:0.3s;

}



.leader-row:last-child{

    border-bottom:none;

}



.leader-row:hover{

    background:#f8fafc;

    border-radius:18px;

}



/* =========================================
   TOP RANK
========================================= */

.top-rank{

    background:linear-gradient(
    135deg,
    #2563eb,
    #4f46e5
    );

    color:white;

    border-radius:22px;

    margin-bottom:12px;

}



.top-rank:hover{

    background:linear-gradient(
    135deg,
    #2563eb,
    #4f46e5
    );

}



/* =========================================
   TEXT
========================================= */

.rank{

    font-size:24px;

    font-weight:bold;

    width:140px;

}



.user{

    flex:1;

    font-size:22px;

    font-weight:600;

}



.wpm{

    font-size:22px;

    font-weight:bold;

    color:#2563eb;

}



.top-rank .wpm{

    color:white;

}