/*sizes nav*/

body {
  --burger-line-height: 5px;
  --nav-icon-height: 32px;
  --nav-icon-width: 50px;
  --nav-icon-padding-X: clamp(25px,5vw,85px);
  --nav-icon-padding-Y: 52px;
  --icon-height: 23px;
}

/* Sizes, Padding, Margin */

:root {
  
  --h1-font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / (1920 - 375))), 18px);
  --h2-font-size: clamp(19px, calc(19px + (24 - 19) * ((100vw - 375px) / (1920 - 375))), 24px);
  --h3-font-size: var(--h1-font-size);
  --h4-font-size: clamp(20px, calc(20px + (35 - 20) * ((100vw - 375px) / (1920 - 375))), 35px);
  --h5-font-size: var(--h1-font-size);
  --h6-font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 375px) / (1920 - 375))), 16px);
  --base-font-size: clamp(14px, calc(14px + (18 - 14) * ((100vw - 375px) / (1920 - 375))), 18px);
  --btn-font-size: 14px;

  /* Spacing */
  --gap-s: 10px;
  --gap-m: clamp(20px, calc(30px - 10 * ((1920px - 100vw) / 1353)), 30px);
  --gap-l: clamp(40px, calc(70px - 30 * ((1920px - 100vw) / 1353)), 70px);
  --gap-xl: clamp(50px, calc(100px - 50 * ((1920px - 100vw) / 1353)), 100px);
  --cont-gap: clamp(70px, calc(200px - 130 * ((1920px - 100vw) / 1353)), 200px);
  --bg-padding: clamp(70px, calc(150px - 80 * ((1920px - 100vw) / 1353)), 150px);

  /* Line Height */
  --h1-height: 1.22;

  /* Gradient */
  --gradient: linear-gradient(to right, #a08343, #e5c172, #997c3f);
}

/* Fonts */

:root {
  --mainfont: "Spline Sans";
  --headlinefont: "Rakkas";
}

/*VC*/

@media (min-width: 1920px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1500px) {
  :root {
    --polaroid-gap: 6vw;
  }
}

@media (max-width: 1200px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 1024px) {
  :root {
    --polaroid-gap: 8vw;
  }
}

@media (max-width: 990px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 768px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 576px) {
body {
    --nav-icon-height: 19px;
    --nav-icon-width: 32px;
    --burger-line-height: 3px;
}
}

@media (max-width: 420px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}

@media (max-width: 320px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}