#mainText {
    font-family:
                    "UD Digi Kyokasho N-R" /* Windows */,
                    "YuKyokasho" /* macOS */,
                    "Noto Sans JP" /* Android & Web-safe */,
                    "Hiragino Kaku Gothic Pro" /* Older Mac fallback */,
                    "Yu Mincho" /* Windows/mac serif fallback */,
                    sans-serif;
    font-size: 1.5em;
    padding-bottom: 0.5em;
    line-height: 2em;
}
.hiragana {
    color: #000;
}
.katakana {
    color: blue;
}
.chisaiKana {
    color: red;
}

.kanji {
    color: #9b0a76;
}

.tooltip {
    position: relative;
    cursor: pointer;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 5px 1em;
    top: -0.2em;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s ease;
    white-space: normal;  /* Allow text to wrap at whitespace (space, line breaks) */
    word-wrap: break-word;  /* Break long words if they don't fit */
    min-width: 3em;
    max-width: 8em;  /* Set a max-width to constrain tooltip size */
    width: auto;  /* Let the tooltip expand based on content, but respect max-width */
    z-index: 9999; /* Ensure the tooltip appears on top */
}

.tooltip:hover::after {
    visibility: visible;
    opacity: 1;
}


.hiragana.tooltip::after {
    background-color: #555;
    color: white;
    z-index: 9;
}
.katakana.tooltip::after {
    background-color: var(--color1);
    color: white;
    z-index: 9;
}
.chisaiKana.tooltip::after {
    background-color: var(--color3);
    color: white;
    z-index: 9;
}
.kanji.tooltip::after {
    background-color: var(--color4);
    color: antiquewhite;
    z-index: 9;
        min-width: 5em;
}
pre {
    white-space: pre-wrap;
    word-wrap:normal;
}

#infobar {
    padding: 0 0.5em 0.2em 0.5em;
    margin: 0;
    background: #333;
    width: inherit;
    display: flex;
    font-size: 1.5em;
    color: white;
    flex-wrap: wrap;
    gap: 4px; /* adjust as needed */
    align-self: baseline;
    max-height: 40vh;
    overflow:scroll;
}

.romaji-container {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    color: yellow;
    top: -0.6em;
    padding-right: 0.5em;
}

.romaji-main {
    font-size: 0.7em;
    position: relative;
    z-index: 2;
    /* Optionally adjust the vertical alignment */
}

.romaji-alt {
    font-size: 0.7em;
    position: absolute;
    top: 70%; /* adjust this percentage to position the alt text where you want it */
    left: 0;
    z-index: 1;
    /* Optionally change font-size or style if needed */
}