#chart td {
    vertical-align: middle;
    padding: 5px;
}

#chart th {
    padding-top: 20px;
    padding-bottom: 5px;
}

#chart table td {
    padding-bottom: 12px;
}

th {
    text-align: left !important;
}

td h2 {
    border-bottom: 1px solid var(--titan-blue);
}

@media screen and (max-width:600px) {

    td h2{
        font-size:1.1rem;
        text-align:center;
    }

    tr {
        display: grid;
        grid-template-areas:
            "top1 top2"
            "bot bot";
        grid-template-rows: 1fr min-content;
        grid-template-columns: 1fr 1fr;
        margin: 10px auto;
        row-gap:5px;
    }

    td:first-child{
        grid-area:top1;

    }
    td:nth-child(2){
        grid-area:top2;
    }


    td.category-header {
        grid-area: top1 / top1 / top2 / top2;
    }

    tr:nth-child(even){
        background-color:#EEE;
    }

}