.bad {
    color: var(--color-text-bad);
}

.medium {
    color: var(--color-text-medium);
}

.good {
    color: var(--color-text-good);
}
.perfect {
    color: var(--color-text-perfect);
}
.marks {
    background: rgba(var(--color-primary-dark-rgb), 0.6);
    width: fit-content;
    padding: 1% 7%; 
}

.stats {
    width: fit-content;
    padding: 2% 3%; 
}

.info-tooltip { 
    transition: opacity 0.3s ease-in-out; 
    color: white; 
    display: flex;
    opacity: 0;
    z-index: 2;
    margin: 0;
    font-size: 50%;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translatex(-50%);
}

*:hover > .info-tooltip {
    opacity: 1;
}