#zoom-hint-wrapper
{
    position: fixed;
    top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none; /* without, blocks click events for closing the piece info panel */
    text-align: center; /* if hint overflows to multiline, center justify the next */
    visibility: hidden; /* fade in/out animation starts with fade in, so don't show text before animation starts */

}

#zoom-hint
{
    background-color: rgba(0, 0, 0, 0.8);
    border: 5px solid #800080;
    border-radius: 25px;
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
}