:root {
  /*base*/
  --color1:#007cbe;
  --color1-hover: #004889;
  --color2:#cee4fc;
  --color3:#e28700;
  --color4:#00beac;
  --color5:#ecf5ff;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #ff5f5f;

  /*ui*/
  --color-primary: var(--color3);
  --color-secondary: var(--color2);
  --text-primary: var(--color3);
  --text-secondary: var(--color2);
  --btn-primary: var(--color1);
  --btn-primary-hover: var(--color1-hover);
  --btn-secondary: #00beac;
  --btn-secondary-hover: #008679;
  --ui-form-title:var(--color1);
  --navbar: var(--color1);
  --navbar-toggle: var(--color2);
  --navbar-hover: rgba(234,104,139,0.8);
  --navbar-user-hover: var(--color3);
  --navbar-user-order: var(--text-primary);
  --navbar-user-tutor: var(--color1-hover);
  --header: var(--color1);
  --article-nav: var(--color2);
  --page-link: var(--color1);
  --footer: var(--color2);
  --footer-title: var(--color2); 
  --advert: var(--color5);
  --links-anchors: var(--color2);
  --links-anchors-bg: var(--color5);
  --logintype-icon: var(--color1);
  --datetime-picker: var(--color1);
}