.gold.ranking-number {
    display: flex;
    opacity: 0.2;
    font-size: 72px; /* Adjust the font size according to your needs */
    color: black; /* Set the color of the digit */
    text-shadow: 5px 5px 8px rgba(0, 0, 0, 1); /* Add a shadow effect */
    transform: rotate(0deg); /* Rotate the digit */
    position: absolute;
    left: 5px;
    pointer-events: none; /* Ensures the watermark doesn't interfere with mouse interactions */
    font-weight: 600 !important;
}

.bronze.ranking-number {
    display: flex;
    opacity: 0.2;
    font-size: 72px; /* Adjust the font size according to your needs */
    color: black; /* Set the color of the digit */
    text-shadow: 5px 5px 8px rgba(0, 0, 0, 1); /* Add a shadow effect */
    transform: rotate(0deg); /* Rotate the digit */
    position: absolute;
    left: 5px;
    pointer-events: none; /* Ensures the watermark doesn't interfere with mouse interactions */
    font-weight: 600 !important;
}

.silver.ranking-number {
    display: flex;
    opacity: 0.2;
    font-size: 72px; /* Adjust the font size according to your needs */
    color: black; /* Set the color of the digit */
    text-shadow: 5px 5px 8px rgba(0, 0, 0, 1); /* Add a shadow effect */
    transform: rotate(0deg); /* Rotate the digit */
    position: absolute;
    left: 5px;
    pointer-events: none; /* Ensures the watermark doesn't interfere with mouse interactions */
    font-weight: 600 !important;
}

.gold {
    background-image: url('/images/golden.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.bronze {
    background-image: url('/images/bronze.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.silver {
    background-image: url('/images/silver.png');
    background-repeat: no-repeat;
    background-size: cover;
}