*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#efe2b5;
    display:flex;
    justify-content:center;
    padding:40px;
    margin-top:60px;
}

.leaderboard{
    width:900px;
    background:#4c250b;
    border-radius:10px;
    padding:15px;
    box-shadow:0 4px 0 #7b5726;
}

.headers{
    background:#4c250b;
    color:#f5dba3;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.headers h1{
    text-transform:uppercase;
    letter-spacing:3px;
}

.headers p{
    font-size:14px;
    color:#d2b98c;
}

.tabs{
    display:flex;
}

.tabs a{
    text-decoration:none;
    color:#d9b56a;
    padding:10px 25px;
    border:1px solid #b18335;
    background:#5b3110;
    transition:.3s;
}

.tabs a:first-child{
    border-radius:8px 0 0 8px;
}

.tabs a:last-child{
    border-radius:0 8px 8px 0;
}

.tabs a.active{
    background:#d2911d;
    color:white;
}

.table-head{
    display:grid;
    grid-template-columns:70px 2fr 2fr 1fr 1fr;
    background:#dbc79c;
    padding:12px;
    font-weight:bold;
    color:#7d5728;
}

.row{
    display:grid;
    grid-template-columns:70px 2fr 2fr 1fr 1fr;
    align-items:center;
    padding:18px;
    margin-top:12px;
    background:#f5e7c8;
    border-radius:12px;
    border:2px solid #c79647;
    transition:.2s;
}

.row:hover{
    transform:translateY(-2px);
}

.gold{
    background:#fff0ba;
}

.silver{
    background:#e9e9ef;
}

.bronze{
    background:#ead7ca;
}

.rank{
    font-weight:bold;
    font-size:22px;
    color:#8a6020;
}