tool-tip:hover {
    background: rgba(128, 128, 128, 0.25);
}
tooltip-popup {
    all: initial;

    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    visibility: hidden;
    visibility: visible;
    opacity: 0;

    max-width: 50vw;
    max-height: 15em;
    overflow-x: hidden;
    overflow-y: auto;

    background: rgba(30, 30, 30, 1);
    padding: 0.5em;
    border-radius: 0.5em;
    border: 1px solid gray;

    font-family: sans-serif;
    font-family: 'Inter', sans-serif;
    color: rgb(200, 200, 200);
    font-size: 90%;
    font-size: 100%;

    transform: perspective(100em) rotateX(-45deg) translate(-50%, 5em);
    transition: 0.25s transform ease, 0.25s opacity ease;
}

tooltip-popup[pre_visible] {
    display: block;
}

tooltip-popup[visible] {
    /*visibility: visible;*/
    opacity: 1;

    /*transition: transform 2.2s;*/
    transform: rotate(90deg);
    transform: perspective(100em) rotateX(0deg) translate(-50%, 0);
}

/* temporary, popups inside popups */
tooltip-popup tooltip-popup,
tooltip-popup tooltip-popup[pre_visible],
tooltip-popup tooltip-popup[visible] {
    display: none;
}