:root {
  --small: 0.8rem;
  --normal: 1.4rem;
  --medium: 2rem;
  --large: 3rem;
  --xlarge: 5rem;
  --xxlarge: 7rem;

  --navigation: 1.4rem;

  --lightGreenYellow: #C7D14F;
  --cobaltGreen: #96D1AA;
  --hermosaPink: #F9C0CD;
  --antwarpBlue: #005D77;
  --duskyGreen: #004F46;
  --black: #0f0f0fff;
  --white: #f5f5f5ff;
  
  --paddingLeftDesktop: 60px;
  --paddingLeftMobile: 10px;
  --paddingRightDesktop: 110px;
  --paddingRightMobile: 60px;

  --normalSpacing: 30px;
  --bigSpacing: 60px;

  --fontWeightBold: 560;

  --burgerBarWeight: 3.5px;
  --burgerBarSpace: 10px;
  --burgerNavMarginTop: 90px;

  --headerHeight: 190px;
  --footerHeight: 144px;
}

@font-face {
    font-family: "hfa";
    src:  url('/assets/fonts/hfa_vol_two-Regular.ttf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "calyces";
    src:  url("/assets/fonts/CalycesInc-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

html {
	font-size: 18px;
}

/* Basic reset */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  padding: 0;
  margin: 0;
  font-family: "calyces", sans-serif;
}

body,  h3, h4, h5, h6, p, ol, ul {
  font-family: "calyces", sans-serif;
  font-weight: normal;
}

h1, h2 {
 font-family: "hfa", sans-serif;
 text-transform: uppercase; 
}

ul, ol {
  margin-left: 25px;
}


h1 {  
    font-size: var(--xxlarge);
    line-height: 100%;
    font-weight: normal;
}

h2 {  
  font-size: calc(var(--xlarge) * 1.04);
  line-height: 100%;
}

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

h4 {
  font-size: 2.2rem;
  line-height: 125%;
}

h1, h2, h3, h4, h5, h6 {
  hyphens: manual;
  font-weight: normal;
}

p {
  font-size: var(--normal);
  max-width: 800px;
  padding-top: 5px;
  padding-bottom: 5px;
  hyphens: manual;
  line-height: 140%;
}

strong {
  line-height: 125%;
  font-size: calc( 1em *1.05);
  font-family: "hfa", sans-serif;
  text-transform: uppercase;
}

.no-text-hyphens {
  hyphens: manual;
}


@media only screen and (max-width: 1080px) {
  :root {
    --small: 0.8rem;
    --normal: 1rem;
    --medium: 1.6rem;
    --large: 2rem;
    --xlarge: 4rem;
    --xxlarge: 5.5rem;
 
  }


}


@media only screen and (max-width: 600px) {
  :root {
    --small: 0.8rem;
    --normal: 1rem;
    --medium: 1.6rem;
    --large: 1.8rem;
    --xlarge: 2rem;
    --xxlarge: 3.5rem;
    --headerHeight: 150px;
  }
  /* h1, h2, h3, h4 {
    hyphens: auto;
  } */

  p {
    min-width: calc(320px - var(--paddingRightMobile) - var(--paddingLeftMobile));
  }
  .no-text-hyphens {
    hyphens: manual;
  }
  .logo svg {
    width: 80px;
    height: 80px;
  }
}