.speech-bubble {
    background-color: white;
    border: solid 3px black;
    color: black;
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px 20px 20px 20px;
    border-radius: 20px;
}

.centered {
    display: flex;
    justify-content: center;
}

.rel {
    position:relative;
    overflow:hidden;
}

#badguy-1 {
    position:absolute;
    top:0px;
    right:-10%;
}

#speech-bubble-1 {
    position:absolute;
    top: 450px;
    left: 250px;
}

#badguy-2 {
    position:absolute;
    top:0px;
    right:-10%;
}

#speech-bubble-2 {
    position:absolute;
    top: 450px;
    left: 250px;
    font-weight: bolder;
    font-size: 32px;
}

.slide-in {
    animation-name: bg-slide;
    animation-duration: 0.4s;
}


.fade-out {
    opacity: 0.0;
    animation-name: fade-out;
    animation-duration: 0.4s;
}

@keyframes bg-slide {
    from {
        right:100%;
    }

    to {
        right:-10%;
    }
}

@keyframes fade-out {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}