@font-face {
    font-family: "learning-teochew-custom-font";
    src: url("/fonts/learning-teochew-custom-font.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;

    /* Yes, these are very specific Unicode characters that most system CJK
     * fonts don't seem to include. This is a hack-y way of making sure it will
     * show up (without having to always load the font). I'll
     * probably have to expand this more later */
    unicode-range: U+20895, U+30291;
}

/* I just took the default font-family from Bootstrap, and modified it to
 * include one custom font. I also rearranged this a bit */
body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        "Noto Sans",
        Arial,
        "Liberation Sans",
        sans-serif,
        "learning-teochew-custom-font",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

.play-teochew {
    cursor: pointer;
    color: white;
    border-radius: 50%;
    height: 1em; width: 1em;
    background-color: midnightblue;
    display: inline-block;
    line-height: 1;
    text-align: center;
}

/* Make the audio icon larger in tables */
.table-responsive .play-teochew {
    font-size: 1.5em;
}

tbody.table-group-divider { border-top-color: var(--bs-border-color); }

#toggle-off, .dark-mode #toggle-on {
    display: unset;
}

.dark-mode #toggle-off, #toggle-on {
    display: none;
}

.flipped {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.nowrap {
    white-space: nowrap;
}