@custom-media --breakpoint-desktop (min-width: 700px);

:root {
  --content-max-width: 980px;
  --spacing: 32px;
  --border-radius: 4px;

  --line-height: 1.5em;

  --font-regular: 'roboto', Helvetica, sans-serif;
  --font-medium: 'robotomedium', Helvetica, sans-serif;

  --color-palette-blue: #5c9fef;
  --color-palette-blue-medium: #3c80cf;
  --color-palette-blue-dark: #3072be;
  --color-palette-red: #cd3f39;

  --color-text-default: #536171;
  --color-text-headlines: #2a3039;
  --color-text-grey: #8091a5;
  --color-text-dark-bg: #fff;
  --color-text-dark-bg-grey: #a9b9c0;
  --color-text-error: var(--color-palette-red);

  --color-link-content: var(--color-palette-blue);
  --color-link-content-hover: var(--color-palette-blue-medium);

  --color-bg-default: #fff;
  --color-bg-grey: #f7f9fa;
  --color-bg-separator: #e5ebed;

  --color-text-footer: #a9b9c0;

  --color-sidebar-bg: #f7f9fa;
  --color-sidebar-seperator: #eeeeee;

  --color-course-active: #536171;
  --color-course-card-description: #536171;

  --color-status-block-bg-success: #f4fffb;
  --color-status-block-bg-error: #fbe3e2;
  --color-status-block-message: #536171;

  --color-input-text: #536171;
  --color-input-bg: #fff;
  --color-input-border: #d3dce0;

  --color-header-upper-text-primary: #fff;
  --color-header-upper-text-secondary: #abc6e5;

  --layout-sidebar-sidebar-width: 228px;
  --layout-sidebar-content-width: 732px;

  --card-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);

  --cta-color: #fff;
  --cta-bg: var(--color-palette-blue);
  --cta-bg-hover: var(--color-palette-blue-medium);
  --cta-radius: 3px;

  --header-dropdown-btn-color: #263545;
  --header-dropdown-bg: #fff;
  --header-dropdown-bg-active: #d3dce0;
  --header-dropdown-bg-hover: #e5ebed;

  --module-copy-emphasized-bg: #8091a5;
  --module-copy-emphasized-color: #c3cfd5;
  --module-copy-emphasized-headlines-color: #fff;
  --module-copy-emphasized-cta-bg: #536171;
  --module-copy-emphasized-cta-color: #fff;

  --code-bg: var(--color-bg-grey);
  --code-trigger-bg: #fff;
  --code-trigger-bg-active: var(--code-bg);
  --code-trigger-color: var(--color-text-grey);
  --code-trigger-color-active: var(--color-text-default);
  --code-trigger-border-active: #c3cfd5;
}