:root {
  /* colors */
  --brand: #ef3e3e;
  --brand-75: rgba(255,85,59,0.76863);
  --brand-50: rgba(255,85,59,0.53333);
  --brand-10: rgba(255,85,59,0.12549);
  --brand-hover: #df523f;
  --link-hover: #3ba2ff;
  --link-hover-50: rgba(59,162,255,0.53333);
  --black: #39434e;
  --link: #2dbaff;
  --link-50: rgba(45,186,255,0.53333);
  --link-10: #ecf8fe;
  --accepted: #8bd55d;
  --pale-grey: #e8eaec;
  --black-50: rgba(57, 67, 78, 0.5);
  --black-20: rgba(57, 67, 78, 0.2);
  --black-10: rgba(57, 67, 78, 0.1);
  --bg: #ffffff;
  --bg2: #f6f6fa;
  --white: white;
  --white-50: rgba(255,255,255,0.53333);
  --white-25: rgba(255,255,255,0.26667);

  --blue: rgb(90, 185, 249);
  --green: rgb(156, 210, 109);
  --red: #f36b4e;
  --pink: rgb(229, 116, 196);

  --warn: #ff9800;

  --border-c: #c9d4dc;
  --border-r: 20px;
  --err-c: #c60202;
  --border-c-50: rgba(231,234,236,0.53333);

  --accent-c: var(--brand);

  --page-mw: 1180px;
  --topb-h: 100px; /* could be setted from Topbar.vue */
  --page-pad: 130px;
  /*--main-pad: 16px;*/

  --font-family: 'Gordita', 'Helvetica', sans-serif;
  --font-size: 14px;
  --font: normal var(--font-size) var(--font-family);

  --m: 4px;
  --gap: calc(var(--m) * 2);
  --input-font-size: 14px;
  --input-font: normal var(--input-font-size)/1em var(--font-family);
  --input-h: 38px;
  --input-p: 16px;
  --input-c: var(--white);

  --modal-w: 640px;

  --bb-blur: 3px;

  --vh: 100vh; /*for IOS fix*/
  --lw: 1440;
  --vw-scale: var(--lw) * 100vw;
  --sm-vw-scale: 375 * 100vw;
}

@media (max-width: 1023px) and (min-width: 740px) {
  :root {
    --page-pad: 48px;
  }
}

@media (max-width: 739px) {
  :root {
    --topb-h: 100px;

    --page-pad: 10px;
    --font-size: 16px;
  }
}

@media (orientation: landscape) and (max-height: 420px) {
  :root {
    --topb-h: 80px;
  }
}