:root {
  --font-family-poppins: "Poppins";
  --font-family-inter: "Inter";
  --font-family-rodetta: "Rubik Dirt";
  --font-family-montserrat: "Montserrat";

  --base-font-size: 16;

  --h1-size: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.25), 3.25rem);
  --h1-line-height: 1.15em;
  --h1-weight: 700;

  --h2-size: clamp(2.125rem, 2.125rem + ((1vw - 0.2rem) * 0.625), 2.5rem);
  --h2-line-height: 1.15em;
  --h2-weight: 600;

  --h3-size: clamp(1.875rem, 1.875rem + ((1vw - 0.2rem) * 0.417), 2.125rem);
  --h3-line-height: 1.15em;
  --h3-weight: 600;

  --h4-size: clamp(1.55rem, 1.55rem + ((1vw - 0.2rem) * 0.3), 2rem);
  --h4-line-height: 1.15em;
  --h4-weight: 500;

  --p-size: 1rem;
  --p-line-height: 1em;
  --p-weight: 400;

  --p-s-size: 0.8rem;
  --p-s-line-height: 0.8em;

  --p-l-size: 1.125rem;
  --p-l-line-height: 1.4em;
}

body {
  -moz-osx-font-smoothing: grayscale;
}

/* Font Family - Poppins */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  src: url("../../fonts/Poppins-Regular-efd119979d16a76e0288e3a07fa61b9f.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  src: url("../../fonts/Poppins-Medium-5f9f70cd69f7eeb99d8181f764bbd6ea.woff2") format("woff2");
  font-weight: 500;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  src: url("../../fonts/Poppins-SemiBold-1181c236b999be4c63cac506cbffc196.woff2") format("woff2");
  font-weight: 600;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  src: url("../../fonts/Poppins-Bold-eee4f596785d8681e1481fd95753cb1b.woff2") format("woff2");
  font-weight: 700;
}

/* Font-Family - Inter */

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-Thin-2285816754d2a96902f71031484754eb.ttf") format("truetype");
  font-weight: 100;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-ThinItalic-4ebf2dcb2efd06f1da8e1ae56a3a041c.ttf") format("truetype");
  font-weight: 100;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-ExtraLight-a8a14e51965f5d89dd299c40e7241efb.ttf") format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-ExtraLightItalic-72cdd6d2804f67b7572dbbb1f9c48202.ttf") format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-Light-ffa5294d45811d4bcc964cc6d7db5261.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-LightItalic-b03dc4b28eb70b6577cd301fda0b7d6b.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-Regular-e3439693149ab0e9acf9a5301fd8bbe8.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-Italic-a5ff99224d28755db884ab60a6bbe832.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-Medium-fc3289f8c2e71f09411957ed0818e15f.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-MediumItalic-f4f7284245aae89578a42fc51f4967bd.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-SemiBold-ff2ff7d941f8b3adc4d510be537475d1.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-SemiBoldItalic-feb2634637344581092fc5b89d472fdc.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-Bold-a27d01c97859ad3acdf88ff52c636f6f.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-BoldItalic-5625ce7afca449b7f48914f0cdd891ad.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-ExtraBold-5785194bac3eb6f038a176d9fe8dd887.ttf") format("truetype");
  font-weight: 800;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-ExtraBoldItalic-6ee869d2e51cd5dff85ba3d06f95bf63.ttf") format("truetype");
  font-weight: 800;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  src: url("../../fonts/Inter_28pt-Black-6e48a609c975fbbd4e45e0394296c59b.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  src: url("../../fonts/Inter_28pt-BlackItalic-b8122f9dce0495d838d37526eada6776.ttf") format("truetype");
  font-weight: 900;
}

/* Font Family - Rodetta */

@font-face {
  font-family: "Rubik Dirt";
  font-style: normal;
  src: url("../../fonts/RubikDirt-Regular-280c8e7252492b6017cae587818a231b.ttf") format("truetype");
  font-weight: 400;
}

/* Font Family - Montserrat */

@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/Montserrat-Regular-d2bb5179b57e9422b84b0002d7d78195.woff2") format("woff2"),
    url("../../fonts/Montserrat-Regular-ad4a585bda8bf14623569a42e1e4c49e.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/Montserrat-SemiBold-37c731041e5217d9318781dcfab6947e.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/Montserrat-Bold-23d9fa50d921b5e1935cb43e1b1f71c4.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1,
.h1 {
  font-family: var(--h1-family);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing, 0);
  color: var(--blue-800);
  text-transform: uppercase;
}

h2,
.h2 {
  font-family: var(--h2-family);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing, 0);
  color: var(--blue-800);
  text-transform: uppercase;
}

h3,
.h3 {
  font-family: var(--h3-family);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing, 0);
  color: var(--blue-800);
}

h4,
.h4 {
  font-family: var(--h4-family);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing, 0);
  color: var(--blue-800);
}

h5,
.h5 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h1-line-height);
}

p {
  font-family: var(--p-family);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: var(--p-line-height);
  letter-spacing: var(--p-letter-spacing, 0);
}

.p-l {
  font-family: var(--p-family);
  font-size: var(--p-l-size);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing, 0);
}