@import url("https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;700&family=Quicksand:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("Lato-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Lato-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("Quicksand-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Quicksand-Regular.ttf") format("truetype");
}

html,
body {
  font-family: var(--body-family), Helvetica, Arial, sans-serif;
}

h1 {
  font-family: var(--headline-family);
  font-style: normal;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: var(--porcelain);
  margin-bottom: 16px;
  margin-top: 16px;
}

h2 {
  font-family: var(--headline-family);
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  color: var(--porcelain);
  margin-block-start: 8px;
  margin-block-end: 16px;
}

@media screen and (max-width: 550px) {
  h2 {
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

h3 {
  font-family: var(--headline-family);
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  color: var(--porcelain);
  margin-bottom: 8px;
  margin-top: 8px;
  line-height: 30px;
}

h4 {
  font-family: var(--body-family);
  font-style: 400;
  font-size: 14px;
  font-weight: 400;
  color: var(--cadet-blue);
}

h5 {
  font-family: var(--body-family);
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: var(--cadet-blue);
}

p {
  font-family: var(--body-family);
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  color: var(--porcelain);
  line-height: 24px;
}

strong {
  font-weight: 700;
}

blockquote p {
  font-family: var(--headline-family);
  font-size: 20px;
  font-style: italic;
}

a {
  font-family: var(--body-family);
  text-decoration: none;
  font-weight: 400;
  color: var(--cadet-blue);
  padding: 0 2px 4px 2px;
  transition: var(--color-transition);
  border-bottom: 1px solid var(--river-bed);
}

a:hover {
  border-color: var(--cadet-blue);
}

li {
  font-family: var(--headline-family);
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: var(--cadet-blue);
  line-height: 28px;
}

p {
  font-family: var(--body-family);
  font-style: normal;
  font-weight: 300;
  font-size: 16px;
  color: var(--porcelain);
  line-height: 26px;
  margin-top: 0;
}