/*sizes nav*/

body {
  --burger-line-height: 1.5px;
  --nav-icon-height: 58px;
  --nav-icon-width: 58px;
  --nav-icon-padding-X: 3.18vw;
  --nav-icon-padding-Y: 2.54vw;
  --header-height: clamp(62px, 4.337vw + 2.859rem, 129px);
}

@media (max-width: 767px) {
  body {
    --nav-icon-height: 40px;
    --nav-icon-width: 40px;
    --nav-icon-padding-X: 3.39vw;
  }
}

:root {
  --h1-font-size: calc(13px + (18 - 13) * ((100vw - 375px) / (1920 - 375)));
  --h2-font-size: calc(22px + (40 - 22) * ((100vw - 375px) / (1920 - 375)));
  --h3-font-size: calc(12px + (16 - 12) * ((100vw - 375px) / (1920 - 375)));
  --h4-font-size: calc(17px + (22 - 17) * ((100vw - 375px) / (1920 - 375)));
  --h5-font-size: calc(14px + (18 - 14) * ((100vw - 375px) / (1920 - 375)));
  --h6-font-size: calc(12px + (16 - 12) * ((100vw - 375px) / (1920 - 375)));
  --base-font-size: calc(14px + (18 - 14) * ((100vw - 375px) / (1920 - 375)));
  --base-font-size-small: calc(
    13px + (15 - 13) * ((100vw - 375px) / (1920 - 375))
  );
  --intro-font-size: calc(15px + (22 - 15) * ((100vw - 375px) / (1920 - 375)));
  --btn-font-size: calc(12px + (14 - 12) * ((100vw - 375px) / (1920 - 375)));

  /**spacing*/
  --gap-s: clamp(10px, 2.66vw, 15px);
  --gap-m: clamp(25px, 1.52vw, 30px);
  --gap-l: clamp(25px, 2.5vw, 50px);
  --gap-xl: clamp(50px, 5vw, 100px);
  --gap-xxl: clamp(100px, 7.8vw, 150px);
  --cont-gap: clamp(80px, 9.9vw, 200px);

  /** border radius  */
  --border-radius: clamp(8px, 0.394rem + 0.45vw, 15px);

  /** fonts */
  --intro: "brawler";
  --mainfont: "onest";
}