:root {
  --header-height: 3.5rem;
  --hue: 85;
  --first-color: hsl(var(--hue), 70%, 85%); /* 	#ddf4be */
  --first-color-alt: hsl(32, 27%, 28%); /* #5b4934 */
  --title-color: hsl(28, 18%, 41%); /* #d2bfac */
  --text-color: hsl(0, 0%, 20%); /* #333333 */
  --text-color-alt: hsl(0, 0%, 80%); /* 	#cccccc */
  --body-color: hsl(60, 100%, 95%); /* #ffffe5 */
  --body-color-alt: hsl(27, 40%, 80%); /* */
  --container-color: hsl(0, 0%, 100%); /* #ffffff */

  --body-font: "League Spartan", sans-serif;
  --biggest-font-size: 2rem;
  --bigger-font-size: 1.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaler-font-size: 0.75rem;

  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  --z-tooltip: 10;
  --z-fixed: 100;
}

/* Responsive typography */
@media screen and (min-width: 1152px) {
  :root {
    --biggest-font-size: 3rem;
    --bigger-font-size: 2rem;
    --h1-font-size: 2rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813;
  }
}

/*============ SCROLL BAR ============*/
::-webkit-scrollbar {
  width: 0.9rem;
  background-color: hsl(var(--hue), 20%, 54%);
}
::-webkit-scrollbar-thumb {
  background-color: hsl(32, 27%, 20%);
  border-radius: 1rem;
}
::-webkit-scrollbar-thumb:hover {
  background-color: hsl(25, 20%, 40%);
}