/* Derived from Wordle's inline CSS */

@font-face {
  font-family: 'xkcd-Regular';
  src: url('../../fonts/xkcd-Regular.eot?') format('eot'),
       url('../../fonts/xkcd-Regular.otf') format('opentype'),
       url('../../fonts/xkcd-Regular.woff') format('woff');
}

@font-face {
  font-family: 'xkcd_beanish-Regular';
  src: url('../../fonts/xkcd_beanish-Regular.ttf') format('truetype'),
       url('../../fonts/xkcd_beanish-Regular.otf') format('opentype'),
       url('../../fonts/xkcd_beanish-Regular.woff') format('woff');
}

:root {
  --green: #6aaa64;
  --darkendGreen: #538d4e;
  --yellow: #c9b458;
  --darkendYellow: #b59f3b;
  --darkendOrange: #b50;
  --lightGray: #ddd;
  --gray: #aaa;
  --darkGray: #888;
  --white: #fff;
  --black: #000;
  --darkRed: #400;
  --medRed: #700;
  --red: #f00;
  /* Colorblind colors */
  --blue: #0057af; /* orig f5793a */
  --brown: #bb6622;   /* orig 85c0f9 */
  font-family: 'xkcd-Regular', 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  --header-height: 50px;
  --keyboard-height: 188px;
  --game-max-width: 500px;
}
/* Light theme colors */
:root {
  --color-tone-0: #000;
  --color-tone-1: #00c;
  --color-tone-2: #aaa;
  --color-tone-3: #0cc;
  --color-tone-4: #c00;
  --color-tone-5: #c0c;
  --color-tone-6: #cc0;
  --color-tone-7: #fff;
  --opacity-50: rgba(255, 255, 255, 0.5);
}
/* Dark Theme Colors */
.nightmode {
  --color-tone-0: #c00;
  --color-tone-1: #004;
  --color-tone-2: #700;
  --color-tone-3: #040;
  --color-tone-4: #044;
  --color-tone-5: #40c;
  --color-tone-6: #4c0;
  --color-tone-7: #000;
  --opacity-50: rgba(0, 0, 0, 0.5);
}
/* Constant colors and colors derived from theme */
:root,
.nightmode {
  --color-background: var(--color-tone-7);
}
:root {
  --color-present: var(--darkGray);
  --color-correct: var(--black);
  --color-absent: var(--lightGray);
  --tile-text-color: var(--color-tone-7);
  --key-text-color: var(--color-tone-0);
  --key-evaluated-text-color: var(--color-tone-7);
  --key-bg: var(--white);
  --key-bg-present: var(--color-present);
  --key-bg-correct: var(--color-correct);
  --key-bg-absent: var(--color-absent);
  --modal-content-bg: var(--color-tone-7);
}
.nightmode {
  --color-present: var(--medRed);
  --color-correct: var(--darkendOrange);
  --color-absent: var(--darkRed);
  --tile-text-color: var(--black);
  --key-text-color: var(--medRed);
  --key-evaluated-text-color: var(--color-tone-7);
  --key-bg: var(--black);
  --key-bg-present: var(--color-present);
  --key-bg-correct: var(--color-correct);
  --key-bg-absent: var(--color-absent);
  --modal-content-bg: var(--color-tone-7);
}
.colorblind {
  --color-correct: var(--blue);
  --color-present: var(--brown);
  --tile-text-color: var(--gray);
  --key-bg-present: var(--color-present);
  --key-bg-correct: var(--color-correct);
  --key-bg-absent: var(--color-absent);
}
.row {
  font-size: 32px;
}
html {
  /* height: 100%; */
}
body {
  background-color: var(--color-background);
  /* height: 100%; */
  margin: 0;
  padding: 0;
  /* Prevent scrollbar appearing on page transition */
  /* overflow-y: scroll; */
}