/*sizes nav*/

body {
  --burger-line-height: 2.5px;
  --nav-icon-height: 60px;
  --nav-icon-width: 60px;
  --nav-icon-padding-X: 2.66vw;
  --nav-icon-padding-Y: 3.13vw;
  --header-height: 135px;
}

/*sizes,pad,marg*/

:root {
  --h1-font-size: calc(13px + (18 - 13) * ((100vw - 375px) / (1920 - 375)));
  --h2-font-size: calc(25px + (54 - 25) * ((100vw - 375px) / (1920 - 375)));
  --h3-font-size: calc(22px + (40 - 22) * ((100vw - 375px) / (1920 - 375)));
  --h4-font-size: calc(13px + (19 - 13) * ((100vw - 375px) / (1920 - 375)));
  --h5-font-size: calc(20px + (24 - 20) * ((100vw - 375px) / (1920 - 375)));
  --base-font-size: calc(15px + (17 - 15) * ((100vw - 375px) / (1920 - 375)));
  --base-font-size-smaller: calc(
    11px + (13 - 11) * ((100vw - 375px) / (1920 - 375))
  );
  --intro-font-size: calc(15px + (19 - 15) * ((100vw - 375px) / (1920 - 375)));
  --btn-font-size: calc(13px + (16 - 13) * ((100vw - 375px) / (1920 - 375)));

  /**spacing*/
  --gap-s: clamp(10px, 2.66vw, 15px);
  --gap-m: clamp(20px, 5.33vw, 30px);
  --gap-l: clamp(35px, 9.33vw, 60px);
  --gap-xl: clamp(80px, 20vw, 100px);
  --cont-gap: clamp(100px, 20vw, 200px);

  --border-radius: 20px;
  --border-radius-full: 500px;
}

/*fonts*/

:root {
  --mainfont: "filson-pro";
  --headlinefont: "bricolage-grotesque";
}