:root {
  --font-family: 'Titillium';
  --font-family-playfair: 'Playfair';

  --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-face {
  font-family: 'Playfair';
  font-style: normal;
  src: url("../../fonts/PlayfairDisplay-VariableFont_wght-3f6ebd345fee09c3f31ee6b0c17bf9a5.ttf") format('truetype');
  font-weight: 300 900;
}

@font-face {
  font-family: 'Playfair';
  font-style: italic;
  src: url("../../fonts/PlayfairDisplay-Italic-VariableFont_wght-c558074e4db9962a68d3b9dc83690435.ttf") format('truetype');
  font-weight: 300 900;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-ExtraLight-999b75ae0330fc6afe77b7771c018d94.ttf") format('truetype');
  font-weight: 200;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-ExtraLightItalic-6d76d76096de2afe1f9813ae37c15395.ttf") format('truetype');
  font-weight: 200;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-Light-83b8c9fdc80280f0085a63926771a290.ttf") format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-LightItalic-f9df9e8660d2312703b1358f942f7272.ttf") format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-Regular-e7d3388b9103b6c91d7df740e1615b4d.ttf") format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-Italic-1321b84d61cf9c3e8456bccc8c374903.ttf") format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-SemiBold-155538a3c3e270286b196da5e5e650d1.ttf") format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-SemiBoldItalic-2549d89e01be8ee226072f99dd43f369.ttf") format('truetype');
  font-weight: 500;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-SemiBold-155538a3c3e270286b196da5e5e650d1.ttf") format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-SemiBoldItalic-2549d89e01be8ee226072f99dd43f369.ttf") format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-Bold-a3015d0befc489d9b6fe702252119577.ttf") format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-BoldItalic-19ece1a66d2d76f0ae52d987bd02f76d.ttf") format('truetype');
  font-weight: 700;
}

@font-face {
  font-family: 'Titillium';
  font-style: normal;
  src: url("../../fonts/TitilliumWeb-Black-e8462a362ad1507b29cfb9954e655784.ttf") format('truetype');
  font-weight: 900;
}

@font-face {
  font-family: 'Titillium';
  font-style: italic;
  src: url("../../fonts/TitilliumWeb-BoldItalic-19ece1a66d2d76f0ae52d987bd02f76d.ttf") format('truetype');
  font-weight: 900;
}
/* @font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;

  font-style: normal;
} */

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);
}