:root {
 --css-version: 6;
}

/* stimulus section */
.stimulus {
	display: grid;
	place-items: center;
 line-height: 0.8;
 height: 100dvh;
}
.stimulus[data-status="noVkbd"]
{
 grid-template-rows: 2fr 2fr 1fr 1fr;
	grid-template-columns: 1fr 4fr 1fr;
}
.stimulus[data-status="hasVkbd"]
{
 grid-template-rows: 1fr 2fr 1fr 1fr;
	grid-template-columns: 1fr 4fr 1fr;
}

/* dummy section */
#dummy {
	 grid-row: 1;
	 grid-column: 2;
		align-self: end;
	 color: #00ff00;
	}

/* action section */
#action {
	 grid-row: 2;
	 grid-column: 2;
	}
.unboxedStimulus {
  font-family: monospace;
  font-size: 12em;
}
.boxedStimulus {
  font-family: monospace;
  font-size: 12em;
  border: 3px solid white;
  padding: 1px;
}
.fixChar {
  font-family: monospace;
  font-size: 5em;
}
/* feedback section (within action group id*/
.noFB { color: #FFFFFF; font-size: 1.5em; }
.goodFB { color: #00FF00; font-size: 1.5em; }
.warnFB { color: #FFFF00; font-size: 1.5em; }
.badFB { color: #FF0000; font-size: 1.5em; }
 
/* prompter section */
#prompter {
	 grid-row: 3;
	 grid-column: 2;
  align-self: center;
  justify-self: center;
  color: #FFFFFF;
  width: 100%;
	}

/* vkbd section */
.vkbd {
  color: #FFFFFF;
  font-family: monospace;
  font-size: 5rem;
  background-color: rgb(169, 169, 169, 0.8);
  color: rgb(250, 235, 215, 1);
  border: 0.2rem solid rgb(250, 235, 215, 1);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}
#vkbdO
{
  grid-row: 4;
	 grid-column: 3;
  line-height: 1;
  background-color: rgb(169, 169, 169, 0.8);
}
#vkbdO.is-hot:hover {background-color: rgb(169, 169, 169, 1);}
#vkbdX
{
  grid-row: 4;
	 grid-column: 1;
  line-height: 1;
  background-color: rgb(169, 169, 169, 0.8);
}
#vkbdX.is-hot:hover {background-color: rgb(169, 169, 169, 1);}
/* block summary section */
#blockSummary {color: #FFFFFF;}
 
/* block summary section */
#blockStartScreen {
 color: #FFFFFF;
 font-size: 1.5rem;
}
 
/* block summary section */
#instructionScreen {color: #FFFFFF;}