@import 'root.css';

.hover-target {
    position: relative;
    cursor: pointer;
    color: blue; /* Optional: Change color to indicate it's interactive */
    text-decoration: underline; /* Optional: Underline the hover text */
}

.popup-bubble {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    width: 200px; /* Adjust width as needed */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 10;
}

.popup-bubble img{
    max-width: 100%;
}

.popup-bubble .beak {
    position: absolute;
    top: 100%; /* Position the beak below the bubble */
    left: 50%;
    margin-left: -5px; /* Center the beak */
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent; /* Beak color */
}