/* Global CSS variables */
:root {
  --COL_BG: #000000;
  --COL_FG: #eeeeee;
  --COL_INFO_TEXT_DEF: #f7e164;
  --COL_INFO_TEXT_WIN: #3ed47d;
  --COL_INFO_TEXT_LOS: #e04a82;
  --COL_BUTT_BG: #6758e5;
  --COL_BUTT_FG: #dddddd;
  --COL_SCRATCH_TOP_BG:  #ffcc55;
  --COL_SCRATCH_TOP_PEN: #ee9933;
  --COL_SCRATCH_BOT_BG:  #eeeeff;
  --COL_SCRATCH_BOT_PEN: #222222;
  --COL_SCRATCH_BOT_BON: var(--COL_INFO_TEXT_WIN);
  --COL_SCRATCH_BOT_LOS: var(--COL_INFO_TEXT_LOS);
  --COL_SCRATCH_BOT_LET: var(--COL_BUTT_BG);
  --FONT_FAMILY: Arial, Helvetica, sans-serif;
}

html {
  touch-action: none;
  background-color: var(--COL_BG);
  color: var(--COL_FG);
}

#warnings, #status {
  font-family: var(--FONT_FAMILY);
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}

#warnings {
  color: var(--COL_INFO_TEXT_DEF);
  font-size: 14px;
}

#status {
  font-size: 24px;
}

#canvasDiv {
  position: relative;
  max-width: 500px;
  margin: auto;
}

#canvasOne {
  width: 100%;
  background: var(--COL_SCRATCH_BOT_BG);
  position: relative;
  left: 0;
  top: 0;
  z-index: 0;
}

#canvasTwo {
  width: 100%;
  background: transparent;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  cursor: grab;
}

#buttons {
  margin-top: 20px;
  text-align: center
}

button {
  font-family: var(--FONT_FAMILY);
  background-color: var(--COL_BUTT_BG);
  color: var(--COL_BUTT_FG);
  font-size: 16px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 7px;
}

#toolsText {
  font-family: var(--FONT_FAMILY);
  color: var(--COL_INFO_TEXT_DEF);
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}

a, a:visited, a:hover, a:active {
  color: var(--COL_INFO_TEXT_DEF);
}