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

:root {
  --color-theme-1: rgb(248, 248, 248);
  --color-theme-2: rgb(31, 31, 31);

  --color-shaded-space: rgb(233, 232, 232);

  --color-id-1: #ff0;
  --color-id-2: #000;
  --color-id-3: rgba(255, 255, 0, 0.3);

  --color-code-1: rgb(255, 187, 187);
  --color-code-2: rgb(217, 255, 168);
  --color-code-3: rgb(168, 220, 255);
  --color-code-4: rgb(227, 206, 255);

  --color-code-current: var(--color-id-1);

  --color-error: #f00;
  --color-link: rgb(47, 81, 194);

  --transition-1: 0.2s;
  --transition-2: ease-out 0.6s;

  --app-font: 'Roboto Condensed', sans-serif;

  --tap-zone-size: 32px;
  --side-panel-size: 240px;
  --icon-size: 24px;

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

  --column-width: 960px;

  --radius: 2px;

  --icon-size: 1.2em;
  --ui-font-size: 15px;

  --accent-size: 40px;

  --shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}