/* Please define your custom styles here */
html, body {
  font-size: 16px;
  padding: 0;
    margin: 0px;
  height: 100vh;
  width: 100vw;
}

.container {  display: grid;
  grid-template-columns: 10% 20% 20% 20% 20% 10%;
  grid-template-rows: 20% 20% 10% 10% 20% 20%;
  gap: 0px 0px;
  grid-auto-flow: column;
  grid-template-areas:
    ". . . . . ."
    ". stim1 stim2 stim3 stim4 ."
    ". . . . . ."
    ". . errorarea errorarea . ."
    ". . . . . ."
    "instructions instructions instructions instructions instructions instructions";
    border: 1px solid #000;
  height: 90vh;
  width: 90vw;
  justify-content: center;

}

.stim1 { grid-area: stim1; border: 1px solid #000; font-size: 5vw; 
}

.stim2 { grid-area: stim2; border: 1px solid #000;  font-size: 5vw; 
}

.stim3 { grid-area: stim3; border: 1px solid #000;  font-size: 5vw; 
}

.stim4 { grid-area: stim4; border: 1px solid #000;  font-size: 5vw; 
}

.instructions { grid-area: instructions; 
}

.errorarea { grid-area: errorarea; 
}

.vertcent {  display: grid;
  align-self: stretch;
  align-items: center;}


.colsnow {
  display: flex;
  flex-direction: column;
  width: auto;
}
kbd, .kbd {
    color: inherit;
    min-width: 1rem;
    min-height: 1rem;
    line-height: 1;
    font-size: 90%;
    background-color: #F0F0F0;
    border: 1px solid #D5D5D5;
    border-radius: 4px;
    box-shadow: grey 0px 2px;
    padding: 1px 1px 0;
    //margin-top: -3px;
    margin:4px;
}

.instruction {
  width: 80%;
  margin: auto;
  text-align: left;
  line-height: 1.7rem;
}








.monospace {
  font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning:none;
  line-height: 0; 
  display:block;
  outline: 1px blue;
  margin: 0;
}

.instrspan1 {
  color:red;
}

.instrspan2 {
  color: blue;
  //display: inline-block;
  //min-width: 1rem;
  //line-height: 1rem;
  //min-width: 1em;
  //line-height: 1em;
  //outline: 1px dotted darkred;
  //text-align: justify;
  //font: 700;
  //width: 7rem;
  //height: 7rem;
  //font-size: 4rem;
  //font-weight: bold;
}

input[type=checkbox] {
  transform: scale(1.7);
}

.trialscreen {
  display: flex;
  //flex-direction: column;
  justify-content: center;
  align-items: center;
}

.effect {
//  display: float;
//  flex-direction: row;
  justify-content: center;
  float: left;
  width: 33.33%;
}

.position {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 7rem;
  width: 7rem; 
  font-size: 3rem;
  //visibility: hidden;
}

.position.shown {
  visibility: visible;
}

.stimtwo {
  float: left;
  width: 33.33%;
  //display: flex;
  //flex-direction: row;
  justify-content: center;
  font: 700;
  width: 7rem;
  height: 7rem;
  font-size: 4rem;
  font-weight: bold;
}

.feedback {
  display: float;
  flex-direction: row;
  //justify-content: space-around;
    justify-content: center;

 // width: 5rem;
 // height: 2rem;
  margin-top: 1rem;
}

.hidden {
    visibility: hidden;
}


/* definde animation */
@keyframes delay {
    99% {visibility: hidden;}
    100% {visibility: visible;}
}

/* The element to apply the animation to */
/* since the animation makes the object invisible for 
99% of the duration, ms are slightly increased to get closer
to 200ms/400ms/800ms */
.position.d0 {
    animation-name: delay;
    animation-duration: 0ms;
    animation-fill-mode: forwards;
} 


.position.d200{
    animation-name: delay;
    animation-duration: 202ms;
    animation-fill-mode: forwards;
} 

.position.d400 {
    animation-name: delay;
    animation-duration: 404ms;
    animation-fill-mode: forwards;
} 

.position.d800 {
    animation-name: delay;
    animation-duration: 808ms;
    animation-fill-mode: forwards;
} 

#report {
  display: flex;
  flex-direction: column;
  margin: auto;
}