body {
    max-width: 820px;
    font-family: Arial, sans-serif;
    margin: 1rem auto;
    padding: 0rem 1rem;
    background-color: #FFF;
    border: 3px double #618;
}

html {
    background-color: #EDF;
    padding: 0 0.5rem;
}

dfn {
    font-weight: bold;
    font-style: normal;
}

table > * > :is(td, th),
table > * > * > :is(td, th) {
    border: 1px solid;
    padding: 1px 2px;
    text-align: center;
}

table > * > :is(td:empty, th:empty),
table > * > * > :is(td:empty, th:empty),
.unassigned {
    background-color: #DDD;
}

.nowrap {
    white-space: nowrap;
}

.swatch {
    width: 1em;
    height: 1em;
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
}

header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    > h1 {
        flex: 1 0 100%;
        margin-bottom: 0;
    }
}

.intro {
    > :first-child {
        margin-top: 0;
    }
}

hr.full {
    clear: both;
}

.dictionary-wrapper {
    container: dict-wrap / inline-size;
}

@container dict-wrap (width <= 368px) {
    .sm-hidden {
        display: none;
    }
}

@container dict-wrap (width <= 418px) {
    #dictionary {
        font-size: 0.75em;
    }
}

@container dict-wrap (418px <= width <= 488px) {
    #dictionary {
        font-size: 0.85em;
    }
}