.onlyspeech {
    display: none;
    background-color: rgba(183, 183, 181, 0.8);
    width: 42%;
    height: 20%;
    top: 46%;
    left: 47%;
    border-radius: 20px;
    z-index: 30;
    opacity: 0;
}

.onlyspeech .onlyspeech-output {
    text-align: center;
    position: relative;
    margin: auto;
    width: 90%;
    font-size: 2vw;
    height: auto;
    top: 36%;
}

.onlyspeech .backtokeyboard {
    left: 92%;
    top: 3%;
    font-size: 2vw;
    height: auto;
    width: auto;
    color: red;
    cursor: pointer;
    transition: all 0.3s ease;
}

.onlykeyboard {
    display: none;
    background: #10448F;
    width: 42%;
    height: 20%;
    top: 46%;
    left: 47%;
    border: 5px solid #fff;
    border-radius: 20px;
    opacity: 0;
    z-index: 30;
}

.onlykeyboard .onlykeyboard-input {
    position: relative;
    top: 33%;
    left: 13%;
    width: 75%;
    font-size: 2vw;
    border: 5px solid #026881;
}

.onlykeyboard .onlykeyboardenter-button {
    position: relative;
    width: 7%;
    height: 28%;
    left: 15%;
    font-size: 2vw;
    top: 35%;
}

.onlykeyboard .backtospeech {
    width: auto;
    height: auto;
    cursor: pointer;
    font-size: 2vw;
    color: red;
    left: 93%;
    top: 6%;
    transition: all 0.3s ease;
}


/* HOVER */

.onlyspeech .backtokeyboard:hover,
.onlykeyboard .backtospeech:hover {
    transform: scale(1.2);
    filter: drop-shadow(0px 0px 9px rgb(255, 165, 0));
}