.stats {
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'IM Fell English SC', serif;
    font-weight: bold;
    font-size:1.5rem;
    position: relative;
    margin:auto;
    width: 50rem;
}

.progress-bar {
    height: 2rem;
    margin: auto;
    margin-left: 0;
    margin-top: 1rem;
    background-color: #4CAF50; /* Fallback color */
    background-image: linear-gradient(135deg, #4CAF50, #81C784); /* Modern gradient effect */
    opacity: 0.9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* subtle shadow for depth */
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Smooth transition for width and background color change */
    position: relative;
    overflow: hidden; /* Ensures that anything beyond the border-radius is hidden, especially for the pseudo-elements */
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1)); /* subtle inner highlight for a glossy effect */
    opacity: 0; /* initially hidden */
    transition: opacity 0.3s ease-in-out;
    border-radius: 8px; /* Ensure it matches the border radius of the progress bar */
}

.progress-bar:hover::after {
    opacity: 1; /* Show the inner highlight on hover for an interactive effect */
}

#cardStats{
    margin-top:1rem;
}


@media only screen
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
    .stats {
        width: 35rem;
    }
}

@media only screen
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
    .stats {
        width: 42rem;
    }
}