@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Pathway+Gothic+One');

body {
  font-family: 'Roboto Condensed', sans-serif;
  background-color: var(--color-theme-1);
  color: var(--color-theme-2);
}

:root {
  --color-theme-1: rgb(238, 238, 238);
  /* --color-theme-2: rgb(29, 54, 73); */
  --color-theme-2: rgb(46, 46, 46);

  --color-code-1: rgb(139, 50, 28);
  --color-code-2: rgb(27, 133, 101);
  --color-code-3: rgb(150, 102, 0);
  --color-code-4: rgb(36, 37, 37);
  --color-code-5: rgb(228, 228, 228);

  --color-error: rgb(252, 64, 64);

  --color-table-highlight: rgb(250, 255, 231);

  --color-dqa-outline: rgb(229, 145, 255);
  --color-dqa-bg: rgba(255, 0, 100, 0.05);
  --color-dqa-bg-active: rgb(147, 0, 58);

  --tap-zone-size: 36px;
  --side-panel-width: 200px;

  --ui-font-size: 14px;

  --gap-min: 2px;
  --gap-mid: 10px;
  --gap-max: 20px;

  --ui-radius: 2px;

  --transition: 0.2s;

  --left-panel-width: var(--side-panel-width);

  --ui-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 800px) {
  :root {
    --left-panel-width: 0;
  }
}