/* Please define your custom styles here */
html {
  //font-size: 16px;
  padding: 0;
}



.container-more {
  align:center;
  box-sizing: border-box;
  height:83.2vmin;
  width:83.2vmin;
  //justify-content: center;
  //align-content: center;
  //justify-items: center;
  //align-items: center;
  margin:0 auto;
}

.trialscreen {
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.container-all {  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". container-effect-u ."
    "container-effect-l container-inner container-effect-r"
    ". container-effect-d .";
}

.container-inner {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    ". . . . . . . . ."
    "error-up2 error-up2 error-up2 error-up2 error-up2 error-up2 error-up2 error-up2 error-up2"
    "error-up1 error-up1 error-up1 error-up1 error-up1 error-up1 error-up1 error-up1 error-up1"
    "stim-l stim-l stim-l stim-l container-fix-cross stim-r stim-r stim-r stim-r"
    "stim-l stim-l stim-l stim-l container-fix-cross stim-r stim-r stim-r stim-r"
    "stim-l stim-l stim-l stim-l container-fix-cross stim-r stim-r stim-r stim-r"
    "error-down1 error-down1 error-down1 error-down1 error-down1 error-down1 error-down1 error-down1 error-down1"
    "error-down2 error-down2 error-down2 error-down2 error-down2 error-down2 error-down2 error-down2 error-down2"
    ". . . . . . . . .";
  grid-area: container-inner;
  width: 100%;
  height: 100%;
}

.stim-l {  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 33% 33% 33%;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    ". w . ."
    "a s2 d f"
    ". s1 . .";
  grid-area: stim-l;
  width: 100%;
  height: 100%;
}

.w {
  grid-area: w;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.a {
  grid-area: a;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.s2 {
  grid-area: s2;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.d {
  grid-area: d;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.s1 {
  grid-area: s1;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.f {
  grid-area: f;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.container-fix-cross {  display: grid;
  grid-template-rows: 33% 33% 33%;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-area: container-fix-cross;
  width: 100%;
  height: 100%;

}

.fix-cross {
  justify-self: center;
  align-self: center;
  grid-area: 2 / 1 / 3 / 2;
  width: 100%;
  height: 100%;
    background: linear-gradient(to bottom, transparent 35%, 
                                         #000 35%, 
                                         #000 65%,  
                                         transparent 65%),

              linear-gradient(to right, transparent 35%, 
                                         #000 35%, 
                                         #000 65%,  
                                         transparent 65%)
}

.stim-r {  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 33% 33% 33%;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    ". . i ."
    "h j k2 l"
    ". . k1 .";
  grid-area: stim-r;
  width: 100%;
  height: 100%;
}

.i {
  grid-area: i;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.k2 {
  grid-area: k2;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.k1 {
  grid-area: k1;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.j {
  grid-area: j;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.h {
  grid-area: h;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.l {
  grid-area: l;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.error-down1 {
  grid-area: error-down1;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.error-up1 {
  grid-area: error-up1;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.error-down2 {
  grid-area: error-down2;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.error-up2 {
  grid-area: error-up2;
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
}

.container-effect-l {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "el2-1 el1-1"
    "el2-2 el1-2"
    "el2-3 el1-3"
    "el2-4 el1-4"
    "el2-5 el1-5"
    "el2-6 el1-6"
    "el2-7 el1-7"
    "el2-8 el1-8"
    "el2-9 el1-9";
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-area: container-effect-l;
  width: 100%;
  height: 100%;
  border-right-style: solid;
}

.el1-1 { grid-area: el1-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-2 { grid-area: el1-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-3 { grid-area: el1-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-4 { grid-area: el1-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-5 { grid-area: el1-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-6 { grid-area: el1-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-7 { grid-area: el1-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-8 { grid-area: el1-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el1-9 { grid-area: el1-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-1 { grid-area: el2-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-2 { grid-area: el2-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-3 { grid-area: el2-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-4 { grid-area: el2-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-5 { grid-area: el2-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-6 { grid-area: el2-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-7 { grid-area: el2-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-8 { grid-area: el2-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.el2-9 { grid-area: el2-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.container-effect-r {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "er1-1 er2-1"
    "er1-2 er2-2"
    "er1-3 er2-3"
    "er1-4 er2-4"
    "er1-5 er2-5"
    "er1-6 er2-6"
    "er1-7 er2-7"
    "er1-8 er2-8"
    "er1-9 er2-9";
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-area: container-effect-r;
  width: 100%;
  height: 100%;
  border-left-style: solid;
}

.er1-1 { grid-area: er1-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-2 { grid-area: er1-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-3 { grid-area: er1-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-4 { grid-area: er1-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-5 { grid-area: er1-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-6 { grid-area: er1-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-7 { grid-area: er1-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-8 { grid-area: er1-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er1-9 { grid-area: er1-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-1 { grid-area: er2-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-2 { grid-area: er2-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-3 { grid-area: er2-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-4 { grid-area: er2-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-5 { grid-area: er2-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-6 { grid-area: er2-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-7 { grid-area: er2-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-8 { grid-area: er2-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.er2-9 { grid-area: er2-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.container-effect-u {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "eu2-1 eu2-2 eu2-3 eu2-4 eu2-5 eu2-6 eu2-7 eu2-8 eu2-9"
    "eu1-1 eu1-2 eu1-3 eu1-4 eu1-5 eu1-6 eu1-7 eu1-8 eu1-9";
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-area: container-effect-u;
  width: 100%;
  height: 100%;
  border-bottom-style: solid;
}



.eu1-1 { grid-area: eu1-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-2 { grid-area: eu1-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-3 { grid-area: eu1-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-4 { grid-area: eu1-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-5 { grid-area: eu1-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-6 { grid-area: eu1-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-7 { grid-area: eu1-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-8 { grid-area: eu1-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu1-9 { grid-area: eu1-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-1 { grid-area: eu2-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-2 { grid-area: eu2-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-3 { grid-area: eu2-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-4 { grid-area: eu2-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-5 { grid-area: eu2-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-6 { grid-area: eu2-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-7 { grid-area: eu2-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-8 { grid-area: eu2-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.eu2-9 { grid-area: eu2-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.container-effect-d {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "ed1-1 ed1-2 ed1-3 ed1-4 ed1-5 ed1-6 ed1-7 ed1-8 ed1-9"
    "ed2-1 ed2-2 ed2-3 ed2-4 ed2-5 ed2-6 ed2-7 ed2-8 ed2-9";
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-area: container-effect-d;
  width: 100%;
  height: 100%;
  border-top-style: solid;
}

.ed1-1 { grid-area: ed1-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-2 { grid-area: ed1-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-3 { grid-area: ed1-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-4 { grid-area: ed1-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-5 { grid-area: ed1-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-6 { grid-area: ed1-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-7 { grid-area: ed1-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-8 { grid-area: ed1-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed1-9 { grid-area: ed1-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-1 { grid-area: ed2-1; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-2 { grid-area: ed2-2; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-3 { grid-area: ed2-3; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-4 { grid-area: ed2-4; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-5 { grid-area: ed2-5; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-6 { grid-area: ed2-6; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-7 { grid-area: ed2-7; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-8 { grid-area: ed2-8; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}

.ed2-9 { grid-area: ed2-9; 
  width: 100%;
  height: 100%;
  font-size: 3.2vmin;
}


.eu2-1, .eu2-2, .eu2-3, .eu2-4, .eu2-5, .eu2-6, .eu2-7, .eu2-8, .eu2-9, .eu1-1, .eu1-2, .eu1-3, .eu1-4, .eu1-5, .eu1-6, .eu1-7, .eu1-8, .eu1-9, .ed1-1, .ed1-2, .ed1-3, .ed1-4, .ed1-5, .ed1-6, .ed1-7, .ed1-8, .ed1-9, .ed2-1, .ed2-2, .ed2-3, .ed2-4, .ed2-5, .ed2-6, .ed2-7, .ed2-8, .ed2-9 {
  padding-top: 60%;
}

.eu2-1, .eu2-2, .eu2-3, .eu2-4, .eu2-5, .eu2-6, .eu2-7, .eu2-8, .eu2-9, .eu1-1, .eu1-2, .eu1-3, .eu1-4, .eu1-5, .eu1-6, .eu1-7, .eu1-8, .eu1-9 {
  border-bottom-style: solid;
}

.ed2-1, .ed2-2, .ed2-3, .ed2-4, .ed2-5, .ed2-6, .ed2-7, .ed2-8, .ed2-9, .ed1-1, .ed1-2, .ed1-3, .ed1-4, .ed1-5, .ed1-6, .ed1-7, .ed1-8, .ed1-9 {
  border-top-style: solid;
}

.el2-1, .el2-2, .el2-3, .el2-4, .el2-5, .el2-6, .el2-7, .el2-8, .el2-9, .el1-1, .el1-2, .el1-3, .el1-4, .el1-5, .el1-6, .el1-7, .el1-8, .el1-9 {
  border-right-style: solid;
}

.er2-1, .er2-2, .er2-3, .er2-4, .er2-5, .er2-6, .er2-7, .er2-8, .er2-9, .er1-1, .er1-2, .er1-3, .er1-4, .er1-5, .er1-6, .er1-7, .er1-8, .er1-9 {
  border-left-style: solid;
}

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;
}

.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;
}

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