:root {
  /* COLORS */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Primary Colors */
  --color-primary: #2BD3C9;

  /* Grayscale */
  --color-gray-100: #FDFDFD;
  --color-gray-200: #CDCDCD;
  --color-gray-300: #979797;
  --color-gray-350: #3F444B;
  --color-gray-400: #3A3A3A;
  --color-gray-500: #33373D;
  --color-gray-600: #282828;
  --color-gray-700: #1A1818;

  /* Utility Colors */
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-border: #7a7a7a80;

  /* TRANSITION */
  --transition-default: all 0.3s ease-in-out;

  /* FONT: FAMILY */
  --font-family-primary: 'Work Sans', sans-serif;

  /* PX TO REM */
  --px-base: 16;
  --px-to-rem: 1rem;

  /* PX TO REM: 12-20 */
  --px-12: calc(12 / var(--px-base) * var(--px-to-rem));
  --px-13: calc(13 / var(--px-base) * var(--px-to-rem));
  --px-14: calc(14 / var(--px-base) * var(--px-to-rem));
  --px-16: calc(16 / var(--px-base) * var(--px-to-rem));
  --px-18: calc(18 / var(--px-base) * var(--px-to-rem));
  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 22-30 */
  --px-22: calc(22 / var(--px-base) * var(--px-to-rem));
  --px-24: calc(24 / var(--px-base) * var(--px-to-rem));
  --px-26: calc(26 / var(--px-base) * var(--px-to-rem));
  --px-28: calc(28 / var(--px-base) * var(--px-to-rem));
  --px-30: calc(30 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 32-40 */
  --px-32: calc(32 / var(--px-base) * var(--px-to-rem));
  --px-34: calc(34 / var(--px-base) * var(--px-to-rem));
  --px-36: calc(36 / var(--px-base) * var(--px-to-rem));
  --px-40: calc(40 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 42-50 */
  --px-42: calc(42 / var(--px-base) * var(--px-to-rem));
  --px-44: calc(44 / var(--px-base) * var(--px-to-rem));
  --px-48: calc(48 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 52-60 */
  --px-52: calc(52 / var(--px-base) * var(--px-to-rem));
  --px-54: calc(54 / var(--px-base) * var(--px-to-rem));
  --px-56: calc(56 / var(--px-base) * var(--px-to-rem));

  /* === CONTAINER === */
  --container: 100%;
}

@media (min-width: 1025px) {
  :root {
    --container: 1200px;
  }
}