@font-face {
  font-family: "EBGaramond";
  src: url("../../fonts/EB_Garamond/EBGaramond-VariableFont_wght.ttf");
  font-display: swap;
}
@font-face {
  font-family: "AlegreyaSans";
  src: url("../../fonts/Alegreya_Sans/AlegreyaSans-Medium.ttf");
  font-display: swap;
}
@font-face {
  font-family: "AlegreyaSans-Bold";
  src: url("../../fonts/Alegreya_Sans/AlegreyaSans-ExtraBold.ttf");
  font-display: swap;
}
html {
  font: 20px/26px var(--font-primary), sans-serif;
  color: var(--color-neutral-90);
  word-break: break-word;
}

h1,
.h1 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 48px;
  line-height: 48px;
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  h1,
  .h1 {
    font-size: 32px;
    line-height: 32px;
  }
}

h2,
.h2 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 36px;
  line-height: 42px;
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  h2,
  .h2 {
    font-size: 28px;
    line-height: 28px;
  }
}

h3,
.h3 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 24px;
  line-height: 30px;
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  h3,
  .h3 {
    font-size: 20px;
    line-height: 24px;
  }
}

h4,
.h4 {
  font-family: var(--font-primary);
  font-weight: bold;
  font-size: 20px;
  line-height: 26px;
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  h4,
  .h4 {
    font-size: 18px;
    line-height: 22px;
  }
}

p {
  margin: 0;
}

a {
  font-family: var(--font-secondary);
  font-size: 18px;
  line-height: 22px;
  text-decoration: none;
  color: var(--color-secondary-90);
  cursor: pointer;
  transition: 0.1s;
  position: relative;
}
a:hover {
  text-decoration: underline;
}
a:visited {
  color: var(--color-secondary-90);
}

.accent {
  font-family: var(--font-secondary-bold);
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

.subtext {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 20px;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
}

.body-content {
  position: relative;
  background-color: #F7F7F7;
}

.main {
  min-height: calc(100vh - 520px - 68px - 80px);
}

.section {
  padding: 64px 0;
}
@media screen and (max-width: 768px) {
  .section {
    padding: 48px 0;
  }
}

.content {
  width: 100%;
  max-width: var(--width-limiter);
  padding-right: var(--text-padding);
  padding-left: var(--text-padding);
  margin-left: var(--block-margin);
  margin-right: var(--block-margin);
}

.hr {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--color-neutral-20);
  background: transparent;
  margin-bottom: 16px;
}

.indent-1 {
  margin-bottom: var(--indent-1);
}

.indent-2 {
  margin-bottom: var(--indent-2);
}

.indent-3 {
  margin-bottom: var(--indent-3);
}

.indent-4 {
  margin-bottom: var(--indent-4);
}

.indent-5 {
  margin-bottom: var(--indent-5);
}

.indent-6 {
  margin-bottom: var(--indent-6);
}

.indent-7 {
  margin-bottom: var(--indent-7);
}

.indent-8 {
  margin-bottom: var(--indent-8);
}