.keyboardbutton {
    width: 11%;
    height: 9%;
    font-size: 4vw;
    border-radius: 30px;
    opacity: 0;
    outline-style: none !important;
    z-index: 50;
}

.speechbutton {
    opacity: 0;
    width: 11%;
    height: 9%;
    font-size: 4vw;
    border-radius: 30px;
    outline-style: none !important;
    z-index: 50;
}

.textcontainer {
    display: none;
    background: #10448F;
    border: 5px solid #fff;
    border-radius: 20px;
    width: 59%;
    height: 20%;
    top: 81%;
    left: 21%;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    opacity: 0;
    z-index: 50;
}

.textcontainer .keyboard-text-input {
    position: absolute;
    top: 7%;
    left: 13%;
    width: 75%;
    font-size: 2vw;
    border: 5px solid #026881;
}

.textcontainer .enterbutton {
    width: 7%;
    height: 28%;
    left: 90%;
    font-size: 2vw;
    top: 11%;
}

.textcontainerspeech {
    display: none;
    background-color: rgba(183, 183, 181, 0.7);
    border-radius: 20px;
    width: 59%;
    height: 20%;
    top: 81%;
    left: 21%;
    z-index: 50;
    opacity: 0;
}

.textcontainerspeech .text-speech-paragraph {
    position: absolute;
    top: 31%;
    left: 13%;
    width: 75%;
    font-size: 2vw;
    text-align: center;
}

.keyboard-speech-animation {
    animation: keyboard-mic 0.7s;
    animation-iteration-count: 3;
}

@keyframes keyboard-mic {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}