blockquote {
    margin: 1rem;
    white-space: normal;
}

caption, td { text-align:right }

dd { margin: 1rem }

dt { font-weight: bold }

main p:not(:first-child) { margin-top: 1rem }

table {
    caption-side: bottom;
    margin-top: 1rem;
    max-width: 100%;
    width: 22rem;
}

th:first-child { width: 100% }

#langs {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

    > a {
        background: var(--color);
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 2px;

        &:hover { text-decoration: none }

        &:hover > :is(h2, span) {
            background: var(--color);
            color: var(--background);
        }

        > :is(h2, span) {
            background: var(--light-grey);
            color: var(--color);
            overflow: hidden;
            padding: 0 .375rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        > h2 {
            font-size: 1.25rem;
            line-height: 1.75rem;
        }

        > span {
            font-size: .75rem;
            line-height: 1.25rem;
        }

        > svg {
            color: var(--background);
            grid-row: span 2;
            height: 2rem;
            margin: .5rem;
            margin-right: calc(.5rem + 2px);
            width: 2rem;
        }
    }

    > p {
        grid-column: 1 / -1;
        margin: 0;
    }
}
