body.ru .textEn, body.en .textRu {
  display: none;
}

input {
  height: 200px;
  width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
  text-align: start;
  font: 400 15px Arial;
  border-color: black;
  padding: 1rem;
  margin: 10px auto 10px;
  box-sizing: border-box;
}

.first-keybord-row {
width: 100%;
height: 40px;
margin: 0 auto;
padding: 5px;
padding-left: 0;
padding-bottom: 0;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(13, 1fr) 2fr;
}

.two-keybord-row {
  width: 100%;
  height: 40px;
  margin: 0 auto;
  padding: 5px;
  padding-left: 0;
  padding-bottom: 0;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1.5fr repeat(13, 1fr);
  }

.three-keybord-row {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    padding: 5px;
    padding-left: 0;
    padding-bottom: 0;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 1.75fr repeat(10, 1fr) 2fr;
    }

.four-keybord-row {
      width: 100%;
      height: 40px;
      margin: 0 auto;
      padding: 5px;
      padding-left: 0;
      padding-bottom: 0;
      border-radius: 5px;
      display: grid;
      grid-template-columns: 1.2fr repeat(10, 1fr) 1.1fr 1.2fr;
      }
    
.five-keybord-row {
        width: 100%;
        height: 40px;
        margin: 0 auto;
        padding: 5px;
        padding-left: 0;
        padding-bottom: 0;
        border-radius: 5px;
        display: grid;
        grid-template-columns: repeat(2, 1.1fr) 4.4fr repeat(2, 1.1fr) repeat(3, 1fr);
        }

.button {
  height: 40px;
  margin-left: 6px;
  font-weight: 500;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  background: #444444;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: border-radius 0.3s, background-color 0.3s;
}





/* .keyboard-app { 
    display:grid;grid-gap: 1rem;
    justify-content: center}

.text {
  
  height: 200px;
  max-width: 850px;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
  text-align: start;
  font: 400 15px Arial;
  border-color: black;
  padding: 1rem;
}

.keyboard {

  display: grid;
  padding: 1rem;
  grid-gap: 0.4rem;
  grid-template-columns: repeat(14, 1fr);
  max-width: 850px;
  background-color: #eee2e2;

}
    
    
.keyboard 
.button
{
  color: #000;
  letter-spacing: normal;
  word-spacing: normal;
  display: inline-block;
  text-align:center;
  align-items:flex-start;
  background-color: #fff;
  box-sizing: border-box;
  margin: 0em;
  font: 400 16px Arial;
  padding: 16px 12px;
  border-width: 0px;
  position: relative;
}

.keyboard 
.button 
.button-item 

{
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 11px;
  color: #c1aaaa;;
}

.keyboard 
.button 
.button-item.active-shift {
  position: static;
  font-size: 16px;
  color: black;
}
        
.keyboard 
.button:focus {
  outline:-webkit-focus-ring-color auto 0px
}
        
.keyboard 
.active-button,
.keyboard 
.button:active {
  background-color: #eaa88a;
}
*/