:root {
  /* Font Size and Line Height Setting */
  --h1FontSize: 48px;
  --h1LineHeight: 67.25px;
  --h2FontSize: 40px;
  --h2LineHeight: 56.04px;
  --h3FontSize: 23px;
  --h3LineHeight: 29.9px;
  --h4FontSize: 23px;
  --h4LineHeight: 32.22px;
  --h5FontSize: 16px;
  --h5LineHeight: 22.42px;
  --paragraphFontSize: 16px;
  --paragraphLineHeight: 20.8px;

  /* Mobile Font Size and Line Height Setting */
  --h1FontMobileSize: 30px;
  --h1LineMobileHeight: 42.03px;
  --h2FontMobileSize: 23px;
  --h2LineMobileHeight: 32.22px;
  --h3FontMobileSize: 18px;
  --h3LineMobileHeight: 23.4px;
  --h4FontMobileSize: 18px;
  --h4LineMobileHeight: 25.22px;
  --h5FontMobileSize: 16px;
  --h5LineMobileHeight: 22.42px;
}

/* Font Import */
@font-face {
  font-family: pragmatica-bold;
  src: url(/assets/fonts/pragmatica_73.ttf);
  font-display: swap;
}

@font-face {
  font-family: pragmatica;
  src: url(/assets/fonts/pragmatica_53.ttf);
  font-display: swap;
}

@font-face {
  font-family: varela;
  src: url(/assets/fonts/varelaRegular.ttf);
  font-display: swap;
}

* {
  padding: 0;
  margin: 0;
  font-family: varela;
  font-size: var(--paragraphFontSize);
  line-height: var(--paragraphLineHeight);
}

.pragmatica-bold,
h1,
h2,
h4 {
  font-family: pragmatica-bold;
  font-weight: 700;
}

.pragmatica-regular,
h5 {
  font-family: pragmatica;
  font-weight: 300;
}

.varela-regular,
h3 {
  font-family: varela;
  font-weight: 400;
}

h1 {
  font-size: var(--h1FontSize);
  line-height: var(--h1LineHeight);
  font-size: clamp(var(--h1FontMobileSize), 3.45dvw, var(--h1FontSize));
  line-height: clamp(var(--h1LineMobileHeight), 3.5dvw, var(--h1LineHeight));
}

h2 {
  font-size: var(--h2FontSize);
  line-height: var(--h2LineHeight);
  font-size: clamp(var(--h2FontMobileSize), 2.8dvw, var(--h2FontSize));
  line-height: clamp(var(--h2LineMobileHeight), 3dvw, var(--h2LineHeight));
}

h3 {
  font-size: var(--h3FontSize);
  line-height: var(--h3LineHeight);
  font-size: clamp(var(--h3FontMobileSize), 2.5dvw, var(--h3FontSize));
  line-height: clamp(var(--h3LineMobileHeight), 2.5dvw, var(--h3LineHeight));
}

h4 {
  font-size: var(--h4FontSize);
  line-height: var(--h4LineHeight);
  font-size: clamp(var(--h4FontMobileSize), 2dvw, var(--h4FontSize));
  line-height: clamp(var(--h4LineMobileHeight), 2dvw, var(--h4LineHeight));
}

h5 {
  font-size: var(--h5FontSize);
  line-height: var(--h5LineHeight);
}

/* Sections Font */
/* Hero */
#hero-title h1 {
  font-size: calc(var(--h1FontSize) * 1.737);
  line-height: calc(var(--h1LineHeight) * 1.737);
  font-size: clamp(
    calc(var(--h1FontMobileSize) * 1.733),
    8dvw,
    calc(var(--h1FontSize) * 1.737)
  );
  line-height: clamp(
    calc(var(--h1LineMobileHeight) * 1.176),
    9dvw,
    calc(var(--h1LineHeight) * 1.737)
  );
}

#hero-title h3 {
  font-size: calc(var(--h3FontSize) * 1.435);
  line-height: calc(var(--h3LineHeight) * 1.435);
  font-size: clamp(
    var(--h3FontMobileSize),
    3dvw,
    calc(var(--h3FontSize) * 1.435)
  );
  line-height: clamp(
    var(--h3LineMobileHeight),
    5dvw,
    calc(var(--h3LineHeight) * 1.435)
  );
}

/* Story */
#story {
  --storyQuoteFontSize: 28px;
  --storyQuoteLineHeight: 39.23px;
  --listingFontSize: 19px;
  --listingLineHeight: 24.7px;
}
#luis-quote {
  font-family: pragmatica-bold;
  font-size: var(--storyQuoteFontSize);
  line-height: var(--storyQuoteLineHeight);
  font-size: clamp(18px, 2.5dvw, var(--storyQuoteFontSize));
  line-height: clamp(26.62px, 2.5dvw, var(--storyQuoteLineHeight));
}

#story-listing li {
  font-family: varela;
  font-size: var(--listingFontSize);
  line-height: var(--listingLineHeight);
  font-size: clamp(16px, 2.5dvw, var(--listingFontSize));
  line-height: clamp(20.8px, 2.5dvw, var(--listingLineHeight));
}

/* Who Is This For */
#whoIsThisFor {
  --whoListingFontSizeMax: 33px;
  --whoListingLineHeightMax: 46.23px;
  --whoListingFontSizeMin: 23px;
  --whoListingLineHeightMin: 32.22px;
}

@media screen and (max-width: 450px) {
  :root {
    --quoteImageSize: 20px;

    --h1FontSize: var(--h1FontMobileSize);
    --h1LineHeight: var(--h1LineMobileHeight);
    --h2FontSize: var(--h2FontMobileSize);
    --h2LineHeight: var(--h2LineMobileHeight);
    --h3FontSize: var(--h3FontMobileSize);
    --h3LineHeight: var(--h3LineMobileHeight);
    --h4FontSize: var(--h4FontMobileSize);
    --h4LineHeight: var(--h4LineMobileHeight);
    --h5FontSize: var(--h5FontMobileSize);
    --h5LineHeight: var(--h5LineMobileHeight);
  }

  #story {
    --storyQuoteFontSize: 18px;
    --storyQuoteLineHeight: 26.62px;
    --listingFontSize: 16px;
    --listingLineHeight: 20.8px;
  }

  #whoIsThisFor {
    --whoListingFontSizeMax: 18px;
    --whoListingLineHeightMax: 26.62px;
    --whoListingFontSizeMin: 18px;
    --whoListingLineHeightMin: 26.62px;
  }
}

@media screen and (max-width: 390px) {
  :root {
    --quoteImageSize: 18px;
    /* Mobile Font Size and Line Height Setting */
    --h1FontMobileSize: 28px;
    --h1LineMobileHeight: 39.23px;
    --h2FontMobileSize: 21px;
    --h2LineMobileHeight: 29.42px;
    --h3FontMobileSize: 18px;
    --h3LineMobileHeight: 24.7px;
    --h4FontMobileSize: 18px;
    --h4LineMobileHeight: 26.62px;
  }
}