:root {

  --debug-outline: 0px;

  --colourA: rgba(255, 255, 255, 1.0);
  --colourB: rgb(18, 18, 18);
  --colourC: rgb(255, 255, 255);
  --colourD: rgb(130, 130, 130);
  --colourE: rgb(58, 58, 58);
  --colourF: rgb(108, 108, 108);
  --colourG: rgb(80, 140, 80);
  --colourH: rgb(184, 164, 64);
  --colourI: rgb(0, 0, 0);
  --colourJ: rgb(24, 124, 124);
  --colourK: rgba(0, 0, 0, 0);

  --colour-background: var(--colourB);
  --colour-active: var(--colourF);
  --colour-absent: var(--colourE);
  --colour-correct: var(--colourG);
  --colour-present: var(--colourH);
  --colour-hinted: var(--colourJ);
  --colour-default: var(--colourE);
  --colour-font: var(--colourC);
  /* --colour-reload: rgb(184, 78, 64); */
  /* --colour-reload: var(--colourA); */
  --colour-reload: var(--colour-present);

  --root-fs: 16px;

  --outer-width: 100%;
  --outer-height: 100%;

  --top-width: 100%;
  --top-height: 8%;
  --top-shadow-colour: var(--colourE);
  --top-button-height: 40%;
  --top-button-margin: 16px;
  --top-button-br: 0px;

  --bottom-width: 100%;
  --bottom-height: 100%;

  --grid-width: 100%;
  --grid-padding: 4px;
  --grid-rowgap: 5px;

  --grid-row-height: 100%;
  --grid-row-colgap: 5px;

  --grid-row-square-width: 52px;
  --grid-row-square-height: 52px;
  --grid-row-square-inset: 2px;

  --keyboard-width: 100%;
  --keyboard-height: 200px;
  --keyboard-margin: 0px 0px 4px 0px;
  --keyboard-rowgap: 0px;
  --keyboard-padding: 0px;
  --keyboard-row-width: 50%;
  --keyboard-row-height: 33%;
  --keyboard-row-colgap: 0px;
  --keyboard-row-margin: 1px;
  --keyboard-row-key-width: 42px;
  --keyboard-row-key-height: 58px;
  --keyboard-row-key-margin: 3px;
  --keyboard-row-key-fs: 20px;
  --keyboard-row-key-br: 4px;
  --keyboard-row-key-background: var(--colourD);

  --toaster-width: 240px;
  --toaster-height: 60px;
  --toaster-padding: 16px;
  --toaster-br: 8px;
  --toaster-fs: 14px;

}
@font-face {
  font-family: 'NotoSans'; 
  src: url('NotoSans.ttf') format('truetype'); 
}
* { 
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "NotoSans", Tahoma, sans-serif;
  /* font-family: Tahoma, "RubikFont", sans-serif; */
  /* font-family: "RubikFont", Tahoma, sans-serif; */
  font-size: var(--root-fs);
  font-weight: 800;
  color: var(--colour-font);
}
html, body {
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: column;

  margin: 0px;
  padding: 0px;

  overflow: hidden;

  background-color: var(--colourB);
}
.hidden-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}
#toaster {
  width: var(--toaster-width);
  height: var(--toaster-height);

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: var(--toaster-padding);

  font-size: var(--toaster-fs);
  color: var(--colourI);

  border-radius: var(--toaster-br);

  background-color: var(--colourA);

  z-index: 999;

  position: fixed;
  left: 50%;
  top: 11%;
  transform: translate(-50%, -0%);

}
#outer {
  width: var(--outer-width);
  height: var(--outer-height);

  /* POSTIT - Giving flex controls if bottom or outer own scroll */
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */

  /* overflow: auto; */
  overflow-y: scroll;
  /* POSTIT 01 - OUTER / BOTTOM SCROLL INTERESTING */

  box-shadow: inset 0 0 0 var(--debug-outline) cyan;
}
#top {
  width: var(--top-width);
  height: var(--top-height);

  display: flex;
  align-items: center;
  justify-content: left;
  background-color: var(--colour-background);

  box-shadow: inset 0 -1px 0 0px var(--top-shadow-colour);
} 
#top .button{
  height: var(--top-button-height);

  /* aspect-ratio: 1; */

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  margin: var(--top-button-margin);

  border-radius: var(--top-button-br);

  background-color: transparent;

  cursor: pointer;

  border: none;
}
#bottom {
  width: var(--bottom-width);
  height: var(--bottom-height);

  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  /* align-items: center; */

  /* overflow-y: scroll; */
  overflow-y: auto;
  overflow-x: hidden;

  box-shadow: inset 0 0 0 var(--debug-outline) greenyellow;
}
.grid {
  display: flex;
  flex-direction: column;

  margin: auto;

  /* overflow-y: auto; */
  
  padding: var(--grid-padding);
  box-sizing: border-box;

  row-gap: var(--grid-rowgap);
  
  box-shadow: inset 0 0 0 var(--debug-outline) green;
}
.grid .row {
  display: flex;
  flex-direction: row;
  justify-content: center;

  column-gap: var(--grid-row-colgap);
}
.grid .row .square {
  height: var(--grid-row-square-height);
  width: var(--grid-row-square-width);

  user-select: none;

  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: transform 2s ease-in-out, background-color 0.2s ease-in-out 2.2s;
  
}
.grid .row .square:nth-child(1) { 
  transition-delay: 0s; 
}
.grid .row .square:nth-child(2) { 
  transition-delay: 0.3s; 
}
.grid .row .square:nth-child(3) { 
  transition-delay: 0.6s; 
}
.grid .row .square:nth-child(4) { 
  transition-delay: 0.9s; 
}
.grid .row .square:nth-child(5) { 
  transition-delay: 1.2s; 
}
.grid .row .square[data-state="default"] {
  box-shadow: inset 0 0 0 var(--grid-row-square-inset) var(--colour-default);
}
.grid .row .square[data-state="active"] {
  box-shadow: inset 0 0 0 var(--grid-row-square-inset) var(--colour-active);
}
.grid .row .square[data-state="correct"] {
  background-color: var(--colour-correct);
  transform: rotateX(360deg);
}
.grid .row .square[data-state="present"] {
  background-color: var(--colour-present);
  transform: rotateX(360deg);
}
.grid .row .square[data-state="absent"] {
  background-color: var(--colour-absent);
  transform: rotateX(360deg);
}
.keyboard {
  /* width: var(--keyboard-width); */
  /* height: var(--keyboard-height); */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  row-gap: var(--keyboard-rowgap);

  margin: var(--keyboard-margin);

  box-sizing: border-box;
  padding: var(--keyboard-padding);
  
  box-shadow: inset 0 0 0 var(--debug-outline) blue;
}
.keyboard .row {
  /* width: var(--keyboard-row-width); */
  /* height: var(--keyboard-row-height); */

  display: flex;
  flex-direction: row;
  justify-content: center;

  margin: var(--keyboard-row-margin);

  column-gap: var(--keyboard-row-colgap);
  box-shadow: inset 0 0 0 var(--debug-outline) blanchedalmond;
}
.keyboard .row .key{
  width: var(--keyboard-row-key-width);
  height: var(--keyboard-row-key-height);

  margin: var(--keyboard-row-key-margin);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-size: var(--keyboard-row-key-fs);
  color: var(--colourC);
  border-radius: var(--keyboard-row-key-br);
  
  user-select: none;
  cursor: pointer;
  background: var(--keyboard-row-key-background);

  border: none;

  touch-action: manipulation;

}
.keyboard .row .key:active {
  filter: brightness(1.6);
  transform: scale(0.96);
}
.keyboard .row .key[data-state="correct"] {
  background-color: var(--colour-correct);
}
.keyboard .row .key[data-state="present"] {
  background-color: var(--colour-present);
}
.keyboard .row .key[data-state="absent"] {
  background-color: var(--colour-absent);
}
.keyboard .row .key[data-state="hinted"] {
  background-color: var(--colour-hinted);
}
.keyboard .row .key.return {
  width: calc(var(--keyboard-row-key-width) * 1.5);
}
.keyboard .row .key.backspace {
  width: calc(var(--keyboard-row-key-width) * 1.5);
}

#test-dialog {
  height: 80vh;
  width: 80vw;
  max-width: 600px;
  box-shadow: none;
  color: white;
  overflow-x: hidden;
  background-color: rgb(28, 28, 28);
  margin: auto;
  padding: 28px;
  border: 1px solid rgb(46, 46, 47);
  border-radius: 8px;
  /* font-family: monospace;
  font-size: 8px; */
  /* box-shadow: inset 0 0 0 2px red; */
}

#test-dialog:focus {
  outline: none;
}

#test-dialog * {
  font-size: 12px;
  font-weight: bold;
  font-family: monospace, sans-serif;
  line-height: 1.5rem;
}

#test-dialog h1 {
  font-size: 22px;
}

#test-dialog .button{
  height: 32px;

  /* aspect-ratio: 1; */

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  margin: 0px;

  border-radius: var(--top-button-br);

  background-color: transparent;

  cursor: pointer;

  border: none;
}

/* Generally 1600x900 with no OS scaling */
@media (min-resolution: 1x) and (max-resolution: 1.2x) {
  :root {

    --keyboard-row-key-width: 50px;
    --keyboard-row-key-height: 72px;
    --keyboard-rowgap: 0px;
    --keyboard-padding: 0px;
    --keyboard-row-colgap: 0px;
    --keyboard-row-key-br: 6px;
    --keyboard-row-key-margin: 4px;

    --grid-width: 100%;
    --grid-padding: 0px;
    --grid-rowgap: 6px;

    --grid-row-height: 100%;
    --grid-row-colgap: 6px;

    --grid-row-square-width: 62px;
    --grid-row-square-height: 62px;
    --grid-row-square-inset: 3px;


    /* --colourE: green; */

  }

  .grid .row .square {
    font-size: 24px;
  }

  .keyboard .row .key {
    font-size: 22px;
  }

}

/* Generally 1920x1080 with no OS scaling */
@media (max-resolution: 1x) {
  :root {

    --keyboard-row-key-width: 60px;
    --keyboard-row-key-height: 84px;
    --keyboard-rowgap: 0px;
    --keyboard-padding: 0px;
    --keyboard-row-colgap: 0px;
    --keyboard-row-key-br: 6px;
    --keyboard-row-key-margin: 4px;

    --grid-width: 100%;
    --grid-padding: 0px;
    --grid-rowgap: 7px;

    --grid-row-height: 100%;
    --grid-row-colgap: 6px;

    --grid-row-square-width: 80px;
    --grid-row-square-height: 80px;
    --grid-row-square-inset: 3px;

    /* --colourE: red; */

  }

  .grid .row .square {
    font-size: 28px;
  }

  .keyboard .row .key {
    font-size: 30px;
  }

}

/* Works for 412x783 Pixel 7 in Portrait (2.63dpr) (screen size 412x915) */
@media (orientation: portrait) and (min-resolution: 2x) {
  
  :root {

    --bottom-height: 92%;

    --keyboard-row-key-width: 34px;
    --keyboard-row-key-height: 58px;
    --keyboard-rowgap: 0px;
    --keyboard-padding: 2px;
    --keyboard-row-colgap: 0px;
    --keyboard-row-key-margin: 3px;

    --grid-width: 100%;
    --grid-padding: 4px;
    --grid-rowgap: 5px;

    --grid-row-height: 100%;
    --grid-row-colgap: 5px;

    --grid-row-square-width: 62px;
    --grid-row-square-height: 62px;

    /* --colourE: blue; */

  }

  .keyboard {
    margin: 0px;
  }

  .grid {
    margin: auto;
  }

  .grid .row .square {
    font-size: 28px;
  }

  #bottom {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #bottom::-webkit-scrollbar {
    display: none;
  }


  #test-dialog {
    height: 90vh;
    width: 95vw;
  }

}

/* iPhone 12 */
@media (orientation: portrait) and (max-width: 400px) {

  :root {

    --bottom-height: 92%;

    --keyboard-row-key-width: 32px;
    --keyboard-row-key-height: 54px;
    --keyboard-rowgap: 0px;
    --keyboard-padding: 0px;
    --keyboard-row-colgap: 0px;
    --keyboard-row-key-margin: 3px;

    --grid-width: 100%;
    --grid-padding: 0px;
    --grid-rowgap: 5px;

    --grid-row-height: 100%;
    --grid-row-colgap: 5px;

    --grid-row-square-width: 54px;
    --grid-row-square-height: 54px;

    /* --colourE: blue; */

  }

  .grid .row .square {
    font-size: 26px;
  }

  #bottom {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #bottom::-webkit-scrollbar {
    display: none;
  }

  
  #test-dialog {
    height: 90vh;
    width: 95vw;
  }


}

/* Short phones */
@media (orientation: portrait) and (max-height: 580px) {
  
  :root {

    --bottom-height: 92%;

    --keyboard-row-key-width: 32px;
    --keyboard-row-key-height: 50px;
    --keyboard-rowgap: 0px;
    --keyboard-padding: 0px;
    --keyboard-row-colgap: 0px;
    --keyboard-row-key-margin: 3px;

    --grid-width: 100%;
    --grid-padding: 0px;
    --grid-rowgap: 5px;

    --grid-row-height: 100%;
    --grid-row-colgap: 5px;

    --grid-row-square-width: 50px;
    --grid-row-square-height: 50px;

    /* --colourE: blue; */

  }

  .grid .row .square {
    font-size: 26px;
  }

  #bottom {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #bottom::-webkit-scrollbar {
    display: none;
  }

  
  #test-dialog {
    height: 90vh;
    width: 95vw;
  }


}