* {
    --rhythm: 0.75rem;
}

table {
    margin-inline: auto;
    display: table;
    margin-bottom: 4rem;
}

table th,
table td {
    border: 1px solid var(--plain-graphical-fg);
    padding-inline: var(--rhythm);
    padding-block: .5rem;
}

table tr:nth-child(even) {
    background-color: var(--plain-bg);
}

.sort-button:not(#specificity-hack) {
    float: right;
    margin-left: var(--rhythm);
    margin-right: 0;
}

main {
    max-width: fit-content;
}

header .title {
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
}

th button:not(#specificity-hack) {
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
}

th[data-sorted-direction="ascending"] button svg {
    rotate: 180deg;
}

th[data-sorted-direction="descending"] button svg {
    rotate: 0deg;
}

th:not([data-sorted="true"]) button svg {
    opacity: 0;
    display: none;
}

.info-panel {
    display: flex;
    margin-bottom: var(--rhythm);
}

.info-panel span:last-child {
    margin-left: auto;
    margin-right: 0;
}