:root{
    --translateX: 10px;
    --translateXneg: -10px;
}

.animation{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 12;
    /*background-color: rgba(192,144,6,0.23);*/
    overflow: hidden;
    pointer-events: none;
}
.spchbubble, .spchbubble2{
    position: absolute;
    z-index: 10;
    background-color: white;
    width: 365px;
    height: 125px;
    user-select: none;
    border-radius: 36px;
    font-size: 32px;
    font-weight: 500;
    color: #3E110C;
    text-align: center;
    padding: 25px 0;
}

.animation .spchbubble:nth-child(odd){
    animation: ease-in-out 5s Speech;
}


.animation .spchbubble:nth-child(even){
    animation: ease-in-out 5s SpeechReverse;
}
.spchbubble2:nth-child(odd){
    animation: ease-in-out 5s Speech2;
}

.spchbubble2:nth-child(even){
    animation: ease-in-out 5s SpeechReverse2;
}

.spchbubble:nth-child(1){
    left: -5%;
    top: 125%;
}
.spchbubble:nth-child(2){
    left: 5%;
    top:112%
}
.spchbubble:nth-child(3){
    left:  15%;
    top: 115%;
}
.spchbubble:nth-child(4){
    left:  25%;
    top:108%
}
.spchbubble:nth-child(5){
    left: 35%;
    top: 122%;
}
.spchbubble:nth-child(6){
    left: 45%;
    top:115%
}
.spchbubble:nth-child(7){
    left: 55%;
    top: 124%;
}
.spchbubble:nth-child(8){
    left: 65%;
    top:105%
}
.spchbubble:nth-child(9){
    left: 75%;
    top: 118%;
}
.spchbubble:nth-child(10){
    left: 85%;
    top:109%
}
.spchbubble:nth-child(11){
    left:95%;
    top: 122%;
}
.spchbubble:nth-child(12){
    left:  105%;
    top:113%
}
.spchbubble2:nth-child(13){
    left: 0%;
    top: 142%;
}
.spchbubble2:nth-child(14){
    left: 10%;
    top:135%
}
.spchbubble2:nth-child(15){
    left:  20%;
    top: 139%;
}
.spchbubble2:nth-child(16){
    left:  30%;
    top:127%
}
.spchbubble2:nth-child(17){
    left: 40%;
    top: 135%;
}
.spchbubble2:nth-child(18){
    left: 50%;
    top:128%
}
.spchbubble2:nth-child(19){
    left: 60%;
    top: 143%;
}
.spchbubble2:nth-child(20){
    left: 70%;
    top:134%
}
.spchbubble2:nth-child(21){
    left: 80%;
    top: 137%;
}
.spchbubble2:nth-child(22){
    left: 90%;
    top:132%
}
.spchbubble2:nth-child(23){
    left:100%;
    top: 144%;
}
.spchbubble2:nth-child(24){
    left:  55%;
    top:135%
}
.spchbubble2:nth-child(25){
    left: 20%;
    top:164%
}
.spchbubble2:nth-child(26){
    left: 50%;
    top: 167%;
}
.spchbubble2:nth-child(27){
    left: 60%;
    top:162%
}
.spchbubble2:nth-child(28){
    left:30%;
    top: 160%;
}
.spchbubble2:nth-child(29){
    left:  40%;
    top:158%
}

.spchbubble span, .spchbubble2 span{
    font-weight: 700;
}

@keyframes Speech{
    0%{
        transform: translateX(var(--translateX));
    }
    20%{
        transform: translateX(var(--translateXneg));
    }
    40%{
        transform: translateX(var(--translateX));
    }
    60%{
        transform: translateX(var(--translateXneg));
    }
    80%{
        transform: translateX(var(--translateX));

    }
    100%{
        top: -50%;
        transform: translateX(var(--translateXneg));
    }
}

@keyframes SpeechReverse{
    0%{
        transform: translateX(var(--translateXneg));
    }
    20%{
        transform: translateX(var(--translateX));
    }
    40%{
        transform: translateX(var(--translateXneg));
    }
    60%{
        transform: translateX(var(--translateX));
    }
    80%{
        transform: translateX(var(--translateXneg));
    }
    100%{
        top: -60%;
        transform: translateX(var(--translateX));
    }
}

@keyframes Speech2{
    0%{
        transform: translateX(var(--translateX));
    }
    20%{
        transform: translateX(var(--translateXneg));
    }
    40%{
        transform: translateX(var(--translateX));
    }
    60%{
        transform: translateX(var(--translateXneg));
    }
    80%{
        transform: translateX(var(--translateX));
    }
    100%{
        top: -25%;
        transform: translateX(var(--translateXneg));
    }
}

@keyframes SpeechReverse2{
    0%{
        transform: translateX(var(--translateXneg));
    }
    20%{
        transform: translateX(var(--translateX));
    }
    40%{
        transform: translateX(var(--translateXneg));
    }
    60%{
        transform: translateX(var(--translateX));
    }
    80%{
        transform: translateX(var(--translateXneg));
    }
    100%{
        top: -40%;
        transform: translateX(var(--translateX));
    }
}

@media screen and (width < 900px){
    .spchbubble, .spchbubble2{
        font-size: calc(32px/var(--ratio_1));
        width: calc(400px/var(--ratio_1));
        height: calc(125px/var(--ratio_1));
        padding: calc(30px/var(--ratio_1));
    }
}

@media screen and (width < 600px){
    .spchbubble, .spchbubble2{
        font-size: calc(32px/2);
        width: calc(400px/2);
        height: calc(125px/2);
        padding: calc(30px/2);
    }
}