:root {
    --background-color: #ffffff;
    --prompt-color: #000;
    --input-color: #000;
    --input-background-color: #e9ecef;
    --submit-background-color: #6c757d;
    --submit-color: #ffffff;
    --clear-background-color: #6c757d;
    --clear-color: #ffffff;
    --keyboard-key-color: #000;
    --keyboard-key-background-color: #fff;
    --keyboard-background-color: #ececec;
    --prompt-font: 'prompt-default';
    --submit-font: "submit-default";
    --clear-font: 'clear-default';
    --input-font: "input-default";
    --prompt-font-adjust: 0;
    --input-font-hint-color:#776767;
}

html {
    touch-action: manipulation;
    word-wrap: break-word;
    overflow-y: hidden;
    height: 100%;

    /* Disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  body {
    overflow-x: hidden;
    height: 100%;
    background: var(--background-color);
    background-size: cover;
    background-position: center
  }
  .annotatedInput{
    position:relative;
  }
  #inputField {
    font-size: 3vmax;
    font-family: var(--input-font);
    background-color: var(--input-background-color);
    color: var(--input-color);
  }
  #characterCount{
    position: absolute;
    top: 1.25rem;
    right: 2rem;
    font-size: 2vmax;
    font-family: var(--input-font);
    color: var(--input-font-hint-color);
  }
  #clearButton {
    font-size: 3vmax;
    font-family: var(--clear-font);
    color: var(--clear-color);
    background-color: var(--clear-background-color);
    border-color: var(--clear-background-color);
  }
  /* Modify these to change the keyboard key height */
  .hg-button {
    height: 6vh!important;
    font-size: 3.5vmin;
    color: var(--keyboard-key-color);
    background-color: var(--keyboard-key-background-color)!important;
  }
  .hg-standardBtn {
    height: 6vmin!important;
    color: var(--keyboard-key-color);
    background-color: var(--keyboard-key-background-color)!important;
  }
  .hg-functionBtn {
    height: 6vmin!important;
  }
  .hg-theme-default {
    background-color: var(--keyboard-background-color)!important;
  }
  #inputContainer {
    margin-top: calc(15vmin - var(--prompt-font-adjust)*1vmin);
  }
  #promptContainer {
    margin-top: calc(15vmin - var(--prompt-font-adjust)*1vmin);
  }
  #promptText {
    font-size: calc(10vmin + var(--prompt-font-adjust)*1vmin);
    text-align: center;
    font-family: var(--prompt-font);
    font-weight: bold;
    color: var(--prompt-color);
  }
  #simple-keyboard {
    height: 600px;
  }
  #submitButton {
    font-size: 3vmax;
    font-family: var(--submit-font);
    background-color: var(--submit-background-color);
    border-color: var(--submit-background-color);
    color: var(--submit-color);
  }
  @font-face {
    font-family: prompt-default;
    src: url(../_fonts/OpenSans-Bold.ttf);
  }
  @font-face {
    font-family: submit-default;
    src: url(../_fonts/OpenSans-Regular.ttf);
  }
  @font-face {
    font-family: clear-default;
    src: url(../_fonts/OpenSans-Regular.ttf);
  }
  @font-face {
    font-family: input-default;
    src: url(../_fonts/OpenSans-Regular.ttf);
  }