:root {
  /*window relative size*/
  --height: 1024;
  --height-px: calc(var(--height) * 1px);
  --width: 1440;
  --width-px: calc(var(--width) * 1px);
  /*colors*/
  --bg: #f2f3f6;
  --white: #ffffff;
  --black: #000000;
  --black-70: rgba(0, 0, 0, 0.7);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-10: rgba(0, 0, 0, 0.1);
  --blue: #0091ff;
  --blue-20: rgba(0, 145, 255, 0.2);
  --green: #10bf6a;
  --green-20: rgba(16, 191, 106, 0.2);
  --red: #fe5b3b;
  --orange: #ff9a32;
  --accent-red-20: rgba(254, 91, 59, 0.2);

  /*spacing sizes*/
  --xxs: var(--xxs-size);
  --xxs-px: calc(var(--xxs) * 1px);
  --xxs-vw: calc(var(--xxs) / var(--width) * 100vw);
  --xxs-vh: calc(var(--xxs) / var(--height) * 100vh);

  /*font sizes*/
  --min-font-size: 16px;
  --text-xlg: 1.5rem; /*30px*/
  --text-lg: 1rem; /*20px*/
  --text-md: .8rem; /*16px*/
  --text-sm: .7rem; /*14px*/
  --text-xsm: .6rem; /*12px*/

  /*media query breakpoints*/
  --query-breakpoint-1: 500px;
  --query-breakpoint-2: 800px;
  --query-breakpoint-3: 1000px;
  --query-breakpoint-4: 1200px;
}