.dialogue-container {
    position: absolute;

    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center;

    border: 5px solid white;
    border-radius: 45px;
    background:rgba(255, 255, 255, 0.811);
}
.dialogue {
    position: relative;

    color: black;
    font-family: monospace;
    font-size: 16px;
    font-variant: normal;
    font-style: normal;
    
    padding: 15px 15px;
}
.dialogue-options-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}
@media screen and (max-width: 1000px) {
    .dialogue-options-container {
        margin-top: 0px;
        flex-direction: column;
        align-items: start;
        gap: 3px;
    }
}
.dialogue-option {
    color: black;
    position: relative;
    background-color: rgba(222, 222, 222, 0);
    padding: 0px;
    text-align: center;

    border: 25px solid transparent;
    border-image: url("/img/border-bubble.png") 50 fill round;

    animation: fade-appear 2s ease-in-out 1 both; 
        /* dialogue-hover 2s infinite ease-in-out alternate; */

    transition: filter 1s, color 1s;
}
.dialogue-option:hover {
    color:rgb(176, 176, 176);
    cursor: url('/img/pawcursor_highlight.png'), auto;
    transition: filter 1s, color 1s;
    filter: drop-shadow(0px 0px 15px white);
}
.dialogue-option.activated {
    animation: dialogue-option-activated 1s 1 both;
}
.dialogue-option.disappearing {
    animation: fade-disappear 1s 1 both;
}
@keyframes dialogue-hover {
    0% { transform:translateY(0px); }
    100% { transform:translateY(-5px); }
}
@keyframes fade-appear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fade-disappear {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes dialogue-option-activated {
    0% { 
        opacity: 1;
        scale: 1;
    }
    100% {
        opacity: 0;
        scale: 2;
    }
}
/* TEXT ANIMATIONS */



/* Mini popup dialogues */

.dialogue-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    width: fit-content;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-color: rgba(255, 255, 255, 0.85);
    color: black;
    padding: 15px;
    border: 5px solid white;
    border-radius: 45px;
}
@keyframes dialogue-wiggle {
    0% {
        rotate: -5deg;
    }
    100% {
        rotate: 5deg;
    }
}
@keyframes dialogue-stretchy {
    0% {
        scale: 1.5 1;
    }
    100% {
        scale: 0.5 1;
    }
}
/* .dialogue-popup-arrow {
    position: absolute;
    width: 200px; 
    height: 150px; 
    background-color: rgb(255, 255, 255); 
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        75% 100%, 
        25% 100%
    ); 

} */