.keyboard-input{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--footer-height) + 24px);
  z-index: 2000;
  
  width: var(--textinput-width);
  height: var(--textinput-height);

  padding: 0 12px;
  
  background-color: var(--panel-color);
  outline: none;
  
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2); 

  font-family: "Courier New",monospace;
  font-size: 2rem;
  color: var(--text-color);

  transition:
    background-color var(--theme-transition),
    border-color var(--theme-transition),
    box-shadow var(--theme-transition);
}

.keyboard-input:focus {
  outline: 2px solid var(--glyph-color);
  outline-offset: 2px;
}