/* -----------------------------------------------------
   Base
   ----------------------------------------------------- */
/* Colors
  ========================================================================== */
:root {
  --color-green: #079447;
  --color-body: #000;
  --color-grey: #8091bf; }

/* Typography
  ========================================================================== */
html {
  font-size: 16px; }

body {
  font-family: "Figtree", Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: var(--color-body);
  line-height: 1.3; }

/* size
  ========================================================================== */
  /*
  $breakpoints: (
    sm: (
        min: 576px,
        max: 575.98px,
    ),
    md: (
        min: 768px,
        max: 767.98px
    ),
    lg: (
        min: 992px,
        max: 991.98px
    ),
    xl: (
        min: 1200px,
        max: 1199.98px
    ),
    xxl: (
      min: 1400px,
      max: 1399.99px,
    )
);
*/
/*
@mixin breakpoint($breakpoint, $direction: min) {
    
  //check if the supplied breakpoint exists in our breakpoits map
  @if map-has-key($breakpoints, $breakpoint) { 
      $breakpoint-values: map-get($breakpoints, $breakpoint);
      $breakpoint-min: map-get($breakpoint-values, min);
      $breakpoint-max: map-get($breakpoint-values, max);

      //check if we are writing styles for larger or smaller screens
      @if $direction == min {
          @media (min-width: $breakpoint-min) {
              @content;
          }
      }

      @else {
          @media (max-width: $breakpoint-max) {
              @content;
          }
      }
  
  // use the custom value if the breakpoint is not part of the pre-defined list
  } @else {
      
      @if $direction == min {
          @media (min-width: $breakpoint) {
              @content;
          }
      }

      @else {
          @media (max-width: $breakpoint) {
              @content;
          }
      }
  }
}
*/
:root {
  --ft-size-h1: clamp(1.5rem, 1.0528846154rem + " + " + 1.9871794872vw, 3.4375rem);
  --ft-size-h2-large: clamp(1.25rem, 1.1057692308rem + " + " + 0.641025641vw, 1.875rem);
  --ft-size-h2: clamp(1.25rem, 1.2211538462rem + " + " + 0.1282051282vw, 1.375rem);
  --ft-size-h3: clamp(1.125rem, 1.0961538462rem + " + " + 0.1282051282vw, 1.25rem);
  --ft-size-h4: clamp(0.875rem, 0.8173076923rem + " + " + 0.2564102564vw, 1.125rem);
  --ft-size-label: clamp(1.125rem, 1.0961538462rem + " + " + 0.1282051282vw, 1.25rem);
  --ft-size-body: clamp(1rem, 0.9711538462rem + " + " + 0.1282051282vw, 1.125rem);
  --ft-size-small: clamp(0.875rem, 0.875rem + " + " + 0vw, 0.875rem); }

a:not([class]) {
  color: #079447;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: bolder; }
  a:not([class]):hover {
    color: #056330; }

h1,
h2,
h3,
h4 {
  font-family: "quiche-sans", Helvetica, Arial, sans-serif;
  font-weight: 500; }

h1 {
  font-size: var(--ft-size-h1); }

h2,
.h2 {
  font-size: var(--ft-size-h2);
  margin-bottom: 0.391em;
  margin-top: 0;
  color: black; }

.h2 {
  font-size: var(--ft-size-h2-large); }

* + h2:not([class]) {
  margin-top: 2.5rem; }

h3 {
  font-size: var(--ft-size-h3); }

* + h3:not([class]) {
  margin-top: 2rem; }

h4 {
  font-size: var(--ft-size-h4); }

.highlight {
  color: var(--color-accent); }

.navbar-brand {
  background-color: var(--color-grey); }
  .navbar-brand img {
    max-width: 200px;
    height: auto; }

.nav-link {
  font-weight: bold; }

.main-footer {
  background-color: var(--color-grey);
  margin-top: 2rem;
  padding: 2rem 0; }

main {
  padding: 2rem 0 0 0; }