:root {
  --green: #004938;
  --green-dark: #002d22;
  --yellow: #d8993a;
}

@font-face {
    font-family: 'ClashGrotesk-Variable';
    src: url('/fonts/ClashGrotesk-Variable.woff2') format('woff2'),
         url('/fonts/ClashGrotesk-Variable.woff') format('woff'),
         url('/fonts/ClashGrotesk-Variable.ttf') format('truetype');
         font-weight: 200 700;
         font-display: swap;
         font-style: normal;
}

@font-face {
    font-family: 'Zodiak-Variable';
    src: url('/fonts/Zodiak-Variable.woff2') format('woff2'),
         url('/fonts/Zodiak-Variable.woff') format('woff'),
         url('/fonts/Zodiak-Variable.ttf') format('truetype');
         font-weight: 100 900;
         font-display: swap;
         font-style: normal;
}

body, p {
    font-family: "ClashGrotesk-Variable", sans-serif;
    font-variation-settings: 'wght' 400.0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Zodiak-Variable", sans-serif;
  font-variation-settings: 'wght' 600.0;
  color: var(--yellow);
}

.height-title {
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}