body {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin-top: 250px;
}
.textarea {
    width: 890px;
    height: 150px;
    font-size: 20px;
    color: black;
    margin-bottom: 20px;
}
.container {
    width: 890px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.button {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-color: black;
    color: black;
    font-family: Georgia;
    font-size: 20px;
    background-image: -webkit-linear-gradient(45deg, black 50%, transparent 50%);
    background-image: linear-gradient(45deg, black 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    -webkit-transition: background 100ms ease-in-out;
    transition: background 100ms ease-in-out;
    margin: 4px;
}
.active {
    font-size: 25px;
    color: white;
    background-position: 0;
}
.active_but {
    font-size: 25px;
    color: white;
    background-position: 0;
    -webkit-transition: background 75ms ease-in-out;
    transition: background 75ms ease-in-out;
}
.backspace {
    font-size: 20px;
    width: 100px;
}
.tab {
    width: 100px;
}
.capslock {
    width: 100px;
}
.enter {
    width: 100px;
}
.shift {
    width: 150px;
}
.space {
    width: 390px;
}