.challenge-header{
    margin: 10px 10px;
    border-radius:5px;
    padding: 10px 10px;
    /* border: 1px solid var(--green); */
    background-color: var(--ultra-white);
    margin-bottom: 40px;
}

.challenge-title{
    text-align: center;
    color: var(--blue);
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
}

.challenge-description{
    margin-top: 5px;
    color: var(--light-ink);
    text-align: left;
    font-size: 13px;
    font-family: 'Times New Roman', Times, serif;
    white-space: pre-line;
}

.challenge-meta{
    margin-top: 10px;
    display: flex;
}

.challenge-left{
    color: var(--green);
    font-size: 15px;
}

.challenge-first{
    margin-left: auto;
    color: var(--red);
    font-size: 13px;
}

.top-user{
    color: var(--green);
}

.leaderboard-block{
    margin-top: 10px;
}

.leaderboard-title{
    margin: 2px 10px;
    border-radius:5px;
    padding: 5px 5px;
    /* border: solid 1px var(--light-ink-glass); */
    /* background-color: var(--text-light-background); */
    font-size:18px;
    font-weight: 500;
    color: var(--green);
}
.max-attempts{
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    color: var(--blue);
}

.leaderboard-list{
    margin: 2px 10px;
    padding: 5px 10px;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--mobile-nav-height-more);
}

.leaderboard-row{
    display: flex;
    gap:20px;
}

.leaderboard-rank{
    text-align: center;
    width:30px;

}
.ranking-num{
    color: var(--blue);
}

.leaderboard-user{

    font-weight: 400;
}

.leaderboard-score{

    margin-left: auto;
    color: var(--red);

}

.challenge-welcome-image {
    display: flex;
    justify-content: center;
    margin: 0px 0;
    padding: 10px;
}

.challenge-welcome-image img {
    width: 40%;
    border-radius: 10px;
    display: block;
}

/* =========================
   RESPONSIVE RULES
========================= */
@media (max-width: 768px) {
    .challenge-welcome-image img {
       width: 100%;  
    }
}