@font-face {
  font-family: "Indie Flower";
  src: url("../fonts/IndieFlower/IndieFlower-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Clemente";
  src: url("../fonts/ClementePDae-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@media only screen and (min-width: 0em) {
  html {
    padding: 0;
    margin: 0;
    overflow-x: clip;
  }
  body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    font-family: "Indie Flower", sans-serif;
    color: #1c1917;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 0;
    font-family: "Indie Flower", Times, serif;
  }
  h2 {
    font-family: "Indie Flower", Times, serif;
  }
  h3 {
    font-size: var(--h3FontSize);
    font-weight: 400;
  }
  .underlined {
    text-decoration: underline;
    cursor: pointer;
  }
  .black {
    color: #1a1a1a;
  }
  .no-decoration {
    text-decoration: none;
  }
  .white {
    color: #fafbfc;
  }
  .nav-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .mobile-hidden {
    display: none;
  }
  :root {
    --primary: #584939;
    --primaryLight: #ffd675;
    --secondary: #001f3f;
    --secondaryLight: #f7f5ef;
    --imagePlaceholder: #ded0c0;
    --imagePlaceholderDark: #c6ad91;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    --h3FontSize: 1.2rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
  }
}
@media only screen and (min-width: 64em) {
  .mobile-hidden {
    display: block;
  }
}