:root{

    --bgcolour: #003459;

    --txtcolour: #4c4c4c; 

    --accent-colour: #00a7e1;

    --txtcolour2: white;

    --margin: 5%;

    --txtHeight: 15%;

}

@font-face {

    font-family: nexa-bold;

    src: url(/fonts/Nexa_Bold.otf);

}

@font-face {

    font-family: nexa-light;

    src: url(/fonts/Nexa_Light.otf);

}

@font-face {

    font-family: roboto;

    src: url(/fonts/Roboto-Regular.ttf);

}



@font-face {

    font-family: roboto-bold;

    src: url(/fonts/Roboto-Bold.ttf);

}



#leaderboard{

    padding-top: var(--margin);

    text-align: center;

    width: 50%;

    margin:auto;

}

body{

    margin:0px;

}



#leaderboard .header{

    color: var(--txtcolour2);

    background-color: var(--bgcolour);

    font-family: nexa-bold;

    font-size: 30px;

    padding: 40px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

}



#leaderboard ul{

    list-style: none;

    padding: 0px;

}



#leaderboard li{

    cursor: pointer;

    pointer-events: all;

    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);

    border-radius: 5px;

    margin-bottom: 20px;

    padding: 8px 30px;

    justify-content: space-between;

    display: flex;

}



#leaderboard ul>li:nth-child(1)> span.name{

    color: #FFD700;

}



#leaderboard ul>li:nth-child(2)> span.name{

    color: #C0C0C0;

}



#leaderboard ul>li:nth-child(3)> span.name{

    color: #CD7F32;

}







#leaderboard .labels{

    border: var(--bgcolour) solid 1px;

    cursor: default;

    border-radius: 0px;

    padding: 4px 30px;

    background-color: var(--accent-colour)

}



#leaderboard span{

    font-family: roboto-bold;

    font-size: 18px;

    margin-right: 20px;

    color: var(--txtcolour);

}



#leaderboard ul .wordCount{

    color: var(--accent-colour);

}



@media(min-width: 900px){

    #leaderboard ul li:hover {

        z-index: 5;

        transform: scale(1.3);

        box-shadow: 0px 0px 16px 13px rgba(0, 0, 0, 0.1);

    }

}



@media(max-width: 900px){

    #leaderboard{

        width: 90%;

    }

    #leaderboard span{

        font-size: 15px;

        margin-right: 15px;

        color: var(--txtcolour);

    }

    #leaderboard ul li:active  {

        z-index: 5;

        transform: scale(1.1);

        box-shadow: 0px 0px 16px 13px rgba(0, 0, 0, 0.1);

    }

}