:root {
  --color-primary-main: #0068b5;
  --color-primary-dark: #004a86;

  --color-secondary-main: #00c7fd;
  --color-secondary-light: #b4f0ff;

  --color-accent-main: #f66767;

  --color-highlight-main: #ffcd21;

  --color-error-main: #c81326;
  --color-error-light: #ff848a;
  --color-error-lighter: #ffb6b9;

  --color-white: #ffffff;
  --color-black: #000;

  --color-gray: #4a4d51;
  --color-gray-light: #808080;
  --color-gray-lighter: #d2d3d5;
  --color-gray-extralight: #f4f4f4;
  --color-gray-dark: #262626;

  --typography-family: 'Roboto', 'Arial', 'Helevetica', Sans-Serif;

  --typography-weight-bold: 700;
  --typography-weight-regular: 400;
  --typography-weight-light: 300;

  --typography-size-xbig: 43px;
  --typography-size-bigger: 36px;
  --typography-size-big: 24px;
  --typography-size-regular: 20px;
  --typography-size-small: 18px;
  --typography-size-smaller: 14px;
  --typography-size-xsmall: 12px;

  --typography-size-button-sm: 12px;
  --typography-size-button-md: 14px;
  --typography-size-button-lg: 16px;

  --size-playback-height: 90px;
  --size-sidebar-width: 60px;

  --padding-sides: 60px;

  --transition-button-background: 0.15s;

  --z-index-base: 0;
  --z-index-main: 100;
  --z-index-panel: 200;
  --z-index-modal: 300;
}

* {
  user-select: none;
}

html,
body {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  color: var(--color-gray-dark);
  box-sizing: border-box;
  font-family: var(--typography-family);
}

canvas {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
}

.shadow {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
}

button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--color-gray-lighter);
  border-radius: 18px;
  background: var(--color-white);
  font-family: var(--typography-family);
  font-size: var(--typography-size-button-md);
  color: var(--color-primary-main);
  cursor: pointer;
  transition: background var(--transition-button-background);
}

button + button {
  margin-left: 12px;
}

button.md + button.md {
  margin-left: 8px;
}

button.sm + button.sm {
  margin-left: 6px;
}

button:hover {
  border: 1px solid var(--color-gray-lighter);
  background: var(--color-gray-extralight);
}

button.primary {
  border: none;
  background: var(--color-primary-main);
  color: var(--color-white);
}

button.primary:hover {
  border: none;
  background: var(--color-primary-dark);
}

button.lg {
  height: 44px;
  border-radius: 22px;
  font-size: var(--typography-size-button-lg);
  padding: 0 18px;
}

button.md {
  height: 36px;
  border-radius: 18px;
  font-size: var(--typography-size-button-md); /* default */
  padding: 0 16px;
}

button.sm {
  height: 22px;
  border-radius: 11px;
  font-size: var(--typography-size-button-sm);
  padding: 0 8px;
}

/* Icons inside buttons */

button .icon {
  height: 18px;
  width: 18px;
  padding-right: 6px;
}

button.lg .icon {
  height: 36px;
  width: 36px;
  padding-right: 8px;
}

button.md .icon {
  height: 20px;
  width: 20px;
  padding-right: 6px;
}

button.sm .icon {
  height: 14px;
  width: 14px;
  padding-right: 4px;
}

/* Right-aligned */

button.icon-r .icon {
  padding-right: 0;
  padding-left: 6px;
}

button.icon-r.lg .icon {
  padding-left: 8px;
}

button.icon-r.md .icon {
  padding-left: 6px;
}

button.icon-r.sm .icon {
  padding-left: 4px;
}

/* Icon-only buttons */

button.icon {
  width: 36px;
  margin: 0;
  padding: 0;
  text-align: center;
}

button.icon.lg {
  width: 44px;
  padding: 0;
}

button.icon.md {
  width: 36px;
  padding: 0;
}

button.icon.sm {
  width: 22px;
  padding: 0;
}

button.icon .icon {
  padding: 0;
  margin: 0 auto;
}

button.icon + button.icon,
button + button.icon,
button.icon + button {
  margin-left: 12px;
}

button.icon.md + button.icon.md,
button.md + button.icon.md,
button.icon.md + button.md {
  margin-left: 8px;
}

button.icon.sm + button.icon.sm,
button.sm + button.icon.sm,
button.icon.sm + button.sm {
  margin-left: 6px;
}

/* Nav icon buttons (modal and panel headers: close buttons, etc.) */

.nav button.icon {
  height: 28px;
  width: 28px;
  background: none;
  border: none;
}

.nav button.icon:hover {
  background: var(--color-white);
  border: none;
}

/* Link buttons */

button.link {
  border: none;
  background: none;
  padding: 0;
}

button.link:hover {
  border: none;
  background: none;
  color: var(--color-primary-dark);
}

button.link.lg,
button.link.md,
button.link.sm {
  padding: 0;
}

/* Menu */

.menu ul {
  max-width: 240px;
  border: 1px solid var(--color-gray-lighter);
  background: var(--color-white);
  padding: 10px 0px;
  margin: 0;
  font-size: 14px;
}

.menu li {
  padding: 6px 16px;
  background: var(--color-white);
  list-style: none;
}

.menu li:hover {
  background: var(--color-gray-extralight);
}

/* TYPOGRAPHY */

.typography-h1 {
  font-weight: var(--typography-weight-bold);
  font-size: var(--typography-size-xbig);
}

.typography-h2 {
  font-size: var(--typography-size-big);
  font-weight: var(--typography-weight-regular);
  line-height: 0.75;
  white-space: nowrap;
}

.typography-h3 {
  font-size: var(--typography-size-small);
  font-weight: var(--typography-weight-bold);
  line-height: 0.75;
  white-space: nowrap;
  margin-bottom: 30px;
  margin-top: 10px;
}

.typography-h4 {
  color: var(--color-primary-main);
  font-size: var(--typography-size-smaller);
  font-weight: var(--typography-weight-body);
  padding-right: 12px;
}