:root {
 --css-version: 7;
}
html {
/* max-width: 80ch;*/
}
body   {
  background-color:  #000000;
}

.stimulus {
	display: grid;
 place-items: center;
 height: 100dvh;
}
.instructionScreen {
 display: inline-block;
 height: 100dvh;
}
.flexi1 {
  display: flex;
  gap: 1% 5%;
}
/* vkbd */
.vkbd {
  max-width: 25rem;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: normal;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  grid-template-rows: 2fr repeat(4, 1fr);
}
.vkbd > div {
  border: 0.2rem solid white;
  border-radius: 0.5rem;
  background-color: rgb(169, 169, 169, 0.8);
  padding: 0.1rem 0.5rem;
  color: rgb(250, 235, 215, 1);
}
#smallKbd {
  background-color:  #333333;
  border: 0.1rem solid white;
}
#instruct {
  grid-column: 1 / 6;
  grid-row: 1;
}
#entry {
  grid-column: 1 / 6;
  grid-row: 2;
}
.keys  {
  font-size: 2rem;
 /* filter: drop-shadow(0.2rem 0.2rem 0.2rem white);*/
  filter: contrast(200%);
}
.keys:active, .keys:hover  {
  color: black;
  background-color: lightblue;
}
.keys.zero {
  grid-column: 1;
  grid-row: 3;
}
.keys.one {
  grid-column: 2;
  grid-row: 3;
}
.keys.two {
  grid-column: 3;
  grid-row: 3;
}
.keys.three {
  grid-column: 4;
  grid-row: 3;
}
.keys.four {
  grid-column: 5;
  grid-row: 3;
}
.keys.five {
  grid-column: 1;
  grid-row: 4;
}
.keys.six {
  grid-column: 2;
  grid-row: 4;
}
.keys.seven {
  grid-column: 3;
  grid-row: 4;
}
.keys.eight {
  grid-column: 4;
  grid-row: 4;
}
.keys.nine {
  grid-column: 5;
  grid-row: 4;
}
.keys.delete {
  grid-column: 1 /3;
  grid-row: 5;
}
.keys.submit {
  grid-column: 4 / 6;
  grid-row: 5;
  color: black;
}