.z {
    background-color: white;
}

.a {
   background: radial-gradient(circle, blue, lightblue, yellow);
}

.p {
    background: radial-gradient(circle, green, lightgreen, yellow);
}

.c {
    background: radial-gradient(circle, red, orange, yellow);
}

.w {
    background-color: whitesmoke;
}

.vibrant {
    filter: brightness(120%) saturate(3)
}

.sickly {
    filter: opacity(55%) brightness(95%) 
}

td {
    position: relative;
    display: table-cell;
    cursor: pointer;
}

.popupText {
    visibility: hidden;
    position: absolute;
    text-align: center;
    bottom: -125%;
    left: 50%;
    width: 120px;
    z-index: 2;
    background-color: rgb(255, 241, 43);
    opacity: 0.9;
    border-radius: 5px;
}

.showStats {
    visibility: visible;
}

.metricsGrid {
    display: grid;
    grid-template-columns: 15% 15% 15% 15% 15% 25%;
    width: 50%;
}

.metricsItem {
    margin-right: 15px;
}