#jsonList {
    padding: var(--m);
    background: var(--clrSurface);
    border: 1px solid var(--clrOutline);
    border-radius: var(--xs);
    box-shadow: var(--boxShadow);
    width: 100%;
    max-width: 600px;
    margin: var(--l) auto;
}

#search {
    padding: var(--xs);
    font: var(--fontP);
    background: var(--clrSurface);
    border: 1px solid var(--clrOutline);
    border-radius: var(--xs);
    outline: none;
}

#list {
    display: flex;
    flex-direction: column;
    gap: var(--xs);
    max-height: 70vh;
    overflow-y: auto;

    padding: var(--xs);
    background: var(--clrSurface);
    border-radius: var(--xs);
}

.entry {
    padding: var(--s);
    background: var(--clrSurface);
    border: 1px solid var(--clrOutline);
    border-radius: var(--xs);
    font: var(--fontP);
    text-align: center;
}

.entry:hover,
#search:hover {
    box-shadow: var(--boxShadow);
    background-color: var(--clrAccentLight);
}

/* #region dictionary*/

.toggleButton {
    padding: var(--xs);
    font: var(--fontP);
    background: var(--clrSurface);
    border: 1px solid var(--clrOutline);
    border-radius: var(--xs);
    outline: none;
}

.toggleButton:hover {
    background-color: var(--clrAccentLight);
}

.hanzi {
    font-weight: 700;
    font-size: var(--m);
}

.hide-hanzi .hanzi {
    display: none;
}

.hide-pinyin .pinyin {
    display: none;
}

.hide-english .english {
    display: none;
}

/* #endregion dictionary*/
/* #region terminology*/

.term {
    font-weight: 500;
    font-size: var(--s);
}

/* #endregion terminology*/