style.css

* {
    transition: 1s;
    color: #fff;
    border: transparent;
}

body {
    display: grid;
    place-items: center;
}

main {
    height: fit-content;
    display: grid;
    min-width: 700px;
    max-width: 95vw;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: min-content 1fr 100px;
    gap: 0.5rem;
    grid-auto-flow: row;
    grid-template-areas:
        "question question question"
        "input input input"
        "control-back control-messages control-submit";
}

main>* {
    background-color: var(--background2-color);
    border-radius: 1rem;
}

.question {
    grid-area: question;
    font-size: 2rem;
    padding: 0.5rem;
    user-select: none;
}

.input {
    grid-area: input;
    font-size: 2rem;
    padding: 0.5rem;
}

.control-back {
    grid-area: control-back;
}

.control-submit {
    grid-area: control-submit;
}

.control-back i,
.control-submit i {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    border-radius: 1rem;
}

.control-back i:hover,
.control-submit i:hover {
    transform: translate(2%, 2%);
    background-color: var(--background3-color);
}

.control-back:hover,
.control-submit:hover {
    background-color: var(--background2-color);
}

.control-messages {
    grid-area: control-messages;
    background-color: transparent;
}

.small {
    font-size: 1rem;
    display: block;
}

textarea {
    font-size: 1.5rem !important;
    resize: vertical;
    transition: 0s;
}