/**color**/
:root {
  --brand-clr: #fc0;
  --main-text-clr: #fff;
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #f8f9fa;
  --text-color: #343a40;
  /** other **/
  --text-shadow: 1px 0px 3px rgba(0, 0, 0, 0.8); /* Horizontal offset, Vertical offset, Blur radius, Shadow color with opacity */

  /** forms **/
  --forms-bg-clr: rgba(0, 0, 0, 0.5);
}

/**font Variables**/
:root {
  --scale-ratio: 1.2;
  --font-size-small: calc(1rem / var(--scale-ratio));
  --font-size-base: 1rem;
  --font-size-large: calc(1rem * var(--scale-ratio));
  --font-size-larger: calc(1rem * var(--scale-ratio) * var(--scale-ratio));
}

/* =============================================================================
 *   Base
 * ========================================================================== */