/* speech bubble container */
#comic-container .text-layer {
    position: absolute;
    left: 5%;
    pointer-events: none;
    z-index: 2;       /* sit above the image */
}
/* keep your bubbles inside the container */
#comic-container .bubble {
    position: absolute;
    pointer-events: auto;  /* so clicks reach them */
    cursor: pointer;
}
#comic-container .bubble:hover {
    background: rgba(168, 168, 168, 0.4);
}

#comic-container .bubble.active {
    background: rgba(168, 168, 168, 0.4);
    border-width: 3em;
}


/* !*For Debugging Speech Bubbles *!*/
/*#comic-container .bubble.ellipse {*/
/*    background: rgb(255, 0, 0, 0.4) !important;*/
/*}*/

/*#comic-container .bubble.polygon {*/
/*    background: rgb(0, 0, 255, 0.4) !important;*/
/*}*/


.audio-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
    cursor: pointer;
    z-index: 900;
}


/* for mobile (small screen sizes) */
@media (max-width: 768px) {
    #comic-container .text-layer {
        position: absolute;
        left: -2.5%;
        pointer-events: none;
        z-index: 2;       /* sit above the image */
    }
}