.scores__title {
    font-size: 3em;
    /* text-decoration: underline; */
    color: var(--btn-primary-color);
    margin-bottom: 0.5em;
}

.scores__filters {
    display: flex;
    flex-direction: row;
    gap: 1em;
    margin-bottom: 2em;
}

.scores__filter {
    border-radius: 0.8em;
    font-size: 0.9em;
    border: 1px solid var(--btn-primary-color);
  
    padding: 0.5em 0.7em;
    display: flex;
    align-items: center;
    font-weight: bold;
    
    text-wrap: nowrap;
    max-height: 2em;
    cursor: pointer;
}

.scores__filter--selected {
    color: var(--btn-primary-color-font);
    background-color: var(--btn-primary-color);
}

.scores__list {
    margin-bottom: 3em;
    width: 50vw;
}

@media screen  and (max-width: 480px)  {
    .scores__list {
        width: 85vw;
    }
}

.scores__home-link {
    width: 7em;
    height: 2em;

    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 2em;
    border: 2px solid var(--btn-primary-color);
    font-weight: bold;
    text-wrap: nowrap;
    
    font-size: 1em;
    background-color: var(--btn-secondary-color);
    margin-bottom: 1em;

    padding: 0.5em 2em;
}

.scores__home-link:hover {
    background-color: var(--btn-secondary-color-hover);
}

.scores__home-link:focus {
    background-color: var(--btn-color-focus);
}

.scores__home-link:visited {
    color: var(--font-color);
    text-decoration: none;
}

.scores__score-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0.5em;
    font-size: 1.5em;
    color: var(--btn-primary-color);
    text-align: center;
    /* text-wrap: nowrap; */
}

.scores__score-item--placeholder {
    background-color: var(--btn-secondary-color);
    font-style: italic;
    height: 2em;
    border-radius: 40px;
    animation: loading 1s infinite ease-in-out;
}

.score__rank-medal::after {
    content: '';
    width: 12px;
    height: 12px;
    display: flex;
    border-radius: 10px;
    left: -1em;
    bottom: 0.8em;
    flex-direction: row;
    position: relative;
    /* transform: translate(-1em, -0.8em); */
}

.score__rank-1::after { background-color: gold; }
.score__rank-2::after { background-color: silver; }
.score__rank-3::after { background-color: #CD7F32; }


/* Add loading animation to .scores__score-item--placeholder */
@keyframes loading {
    0% {
        background-color: #f8f8f8;
    }
    50% {
        background-color: #ddd;
    }
    100% {
        background-color: #f8f8f8;
    }
}

/* TODO: Add more specific style for each column */
.score__rank { }
.score__name { }
.score__score { }