* {box-sizing: border-box; margin: 0; padding: 0}
html, body {
  width: 100%;
  height: 100%;
  font-family: "Noto Sans", Roboto, "Droid Sans", sans-serif;
  font-size: 12pt;
  text-align: center;
  background: #111;
  color: #eee;
}

#workspace {
  padding: 1rem 0.6rem;
}

#screenfield {
  display: inline-block;
  min-width: 240px;
  height: 50vh;
  width: 100%;
  max-width: 800px;
  font-family: "Fira Code", "Droid Sans Mono", monospace;
  font-size: inherit;
  border: 1px solid #ccc;
  border-radius: 2px;
  overflow-y: scroll;
  text-align: left;
  text-wrap: auto;
  white-space: pre-wrap;
}

#keypad {
  display: inline-block;
  width: 50vw;
  min-width: 206px;
  max-width: 400px;
  height: 20vh;
  min-height: 180px;
}

@media only screen and (max-width: 320px) {
  #keypad, #keypad * {
    display:none!important;
  }
#workspace {
    padding: 0.5rem 0!important;
  }
}

#keypad div {
  padding: 1px 0;
  height: 25%;
}

#keypad button {
  background: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: calc(25% - 4px);
  height: calc(100% - 4px);
  cursor: pointer;
}

#keypad button:hover {
  color: cyan;
  border-color: cyan;
}

#keypad #bspc {
  width: calc(50% - 4px);
}

header {padding: 0.6rem 0}
footer {padding-top: 0.6rem}
footer div {padding: 0.6em 0}

#programloadfield {display:none}

a,a:active,a:visited {color: inherit}
a:hover {color:cyan}