:root {
  /* ANCHOR Colors */

  --blue-lighter: #00ffff;
  --blue-light: #00d0da;
  --blue-med: #00a5df;
  --blue-dark: #0081c6;
  --blue-darker: #202764;
  --blue-darker-25: rgba(32, 39, 100, 0.25);
  --blue-darker-75: rgba(32, 39, 100, 0.75);

  --blue-lighter-shadow: #00d7cc;
  --blue-light-shadow: #00acdc;
  --blue-med-shadow: #007be1;
  --blue-dark-shadow: #0064c7;
  --blue-darker-shadow: #000040;

  --green: #84be3f;

  --coin-lighter: #ffdc7b;
  --coin-light: #f4c33b;
  --coin-med: #f4a93b;
  --coin-dark: #be804a;

  --illustration-green-light: #9fbe3c;
  --illustration-green-med: #788b33;
  --illustration-green-dark: #616d2c;

  --bg: #dce4e8;

  --white: #fff;
  --white-25: rgba(255, 255, 255, 0.25);
  --white-50: rgba(255, 255, 255, 0.5);

  --black-25: rgba(0, 0, 0, 0.25);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-100: #000;

  --grey-1: #333333;
  --grey-2: #ebebeb;
  --grey-3: #ababab;

  --error: #e51e79;

  --scroll-on-light: var(--blue-med);
  --scroll-on-dark: var(--white);

  --auto-complete: var(--white);
  --auto-complete-error: var(--white);

  /* ANCHOR Font Sizes */

  --F07: 0.43rem;
  --F08: 0.5rem;
  --F09: 0.5625rem;
  --F10: 0.625rem;
  --F11: 0.6875rem;
  --F12: 0.75rem;
  --F13: 0.8125rem;
  --F14: 0.875rem;
  --F15: 0.9375rem;
  --F16: 1rem;
  --F17: 1.0625rem;
  --F18: 1.125rem;
  --F19: 1.1875rem;
  --F20: 1.25rem;
  --F21: 1.3125rem;
  --F22: 1.375rem;
  --F23: 1.4375rem;
  --F24: 1.5rem;
  --F25: 1.5625rem;
  --F26: 1.625rem;
  --F27: 1.6875rem;
  --F28: 1.75rem;
  --F29: 1.8125rem;
  --F30: 1.875rem;
  --F35: 2.1875rem;
  --F40: 2.5rem;
  --F45: 2.8rem;
  --F50: 3.12rem;
  --F55: 3.4rem;
  --F60: 3.75rem;
  --F70: 4.35rem;
  --F80: 5rem;
  --F130: 8.12rem;

  /* ANCHOR Font Weights */

  --thin: 100;
  --extra-light: 200;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semi-bold: 600;
  --bold: 700;
  --extra-bold: 800;
  --black: 900;

  /* ANCHOR Font Family */

  --font-family: 'Apis', Helvetica, sans-serif;

  /* ANCHOR Icon Sizes */

  --icon-small: var(--F40);
  --icon-default: var(--F45);
  --icon-medium: var(--F60);
  --icon-big: 8.75rem;

  /* ANCHOR Transition */

  --linear: 0.3s linear;
  --lollipop: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);

  /* ANCHOR Spacing */

  --spacing-base: 20px;

  --spacing-x1: calc(var(--spacing-base) * 1);
  --spacing-x2: calc(var(--spacing-base) * 2);
  --spacing-x3: calc(var(--spacing-base) * 3);
  --spacing-x4: calc(var(--spacing-base) * 4);
  --spacing-x5: calc(var(--spacing-base) * 5);
  --spacing-x6: calc(var(--spacing-base) * 6);
  --spacing-x7: calc(var(--spacing-base) * 7);
  --spacing-x8: calc(var(--spacing-base) * 8);
  --spacing-x9: calc(var(--spacing-base) * 9);
  --spacing-x10: calc(var(--spacing-base) * 10);

  /* ANCHOR Media Queries */

  --max-desk-4k: 3840px;
  --min-desk-4k: 2560px;

  --max-desk-mega-hd: 2559px;
  --min-desk-mega-hd: 1921px;

  --max-desk-ultra-hd: 1920px;
  --min-desk-ultra-hd: 1661px;

  --max-desk-hd: 1660px;
  --min-desk-hd: 1441px;

  --max-desk-large: 1440px;
  --min-desk-large: 1280px;

  --max-desk: 1279px;
  --min-desk: 1025px;

  --max-tablet: 1024px;
  --min-tablet: 768px;

  --max-mobile: 767px;
  --min-mobile: 481px;

  --max-tiny-mobile: 480px;
  --min-tiny-mobile: 320px;

  /* ANCHOR Z Index */

  --index-header: 1000;
  --index-modal: 2000;
  --index-points: 3000;
  --index-header-open: 4000;

  /* ANCHOR Gradient */

  --click-gradient: linear-gradient(
    90deg,
    rgba(34, 40, 96, 1) 0%,
    rgba(0, 255, 255, 1) 100%
  );

  /* ANCHOR Shadow */

  --shadow: 0 25px 30px 0 rgba(0, 0, 0, 0.25);

  /* ANCHOR Body */

  --app-height: 100%;
}

/* ANCHOR Header Height */

@media (min-width: 1024px) {
  :root {
    --header-height: 130px;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-height: 80px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  :root {
    --header-height: 100px;
  }
}