#input {
    display: none;
}

#hatResult {
    color: yellow;
    height: 12%;
    line-height: 20px;
    position: fixed;
    bottom: 2%;
    background-color: black;
    left:10px;
    transition-property: height, bottom;
    transition-duration: 1s, 1s;
}

#options_wrap {
    display: inline;
    position: fixed;
    width: 96%;
    height: 5%;
    bottom: 95%;
}

#options_wrap2 {
    display: inline;
    position: absolute;
}

/*        #options_wrap {
    display: inline;
    width: 96%;
    height: 5%;
    bottom: 95%;
}*/

#voicecode {
    position: fixed;
    width: 94%;
    height: 5%;
    bottom: 85%;  
}

#editor {
    position: fixed;
    width: 96%;
    height: 64%;
    bottom: 18%;
    transition-property: height, bottom;
    transition-duration: 1s, 1s;
}

#speechBtnStop {
    display: none;
    position: relative;
}

#speechBtnStart {
    display: none;
    position: relative;
}

#example, #blank {
    display: none;
}

#project_name {
    width: 150px;
    height: 24px;
    margin-top: 4px;
}

.container {
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center; /* Вертикальное центрирование */
}



body {
    font: 20px monospace;
    background-color: #EEE;
}

input {
    font: 20px monospace;
}

label {
    font: 16px monospace;
}

button {
    background-color: #5DF;
    height: 30px;
}

select {
    height: 32px;
    margin: 4px;
    background-color: white;
    font: 20px monospace;
}

textarea {
    width: 94%;
    transition-property: height;
    transition-duration: 1s;
/*    font: 12px monospace;*/
}