:root {


  --color-primary: #61804f;
  --color-primary-rgba: 97, 128, 79;

  --color-primary-dark: #384c2f;
  /*achtergrond site en font */
  --color-primary-dark-rgba: 56, 76, 47;


  --color-primary-dark-darker: #1f3216;
  --color-primary-dark-darker-hover: var(--color-primary);
  --color-primary-dark-darker-rgb: 31, 50, 22;

  --color-primary-light: #ffffed;
  --color-primary-light-rgb: 255, 255, 237;
  /*achtergrond content*/
  --color-primary-light-hover: #fefdfc;
  /*hover kleur voor primary light*/
  --color-primary-light-hover-dark: #ffff87;
  /* moet nog */


  --color-primary-accent: #af2540;
  /*accent kleur */
  --color-primary-accent-rgb: 175, 37, 64;
  --color-primary-accent-hover: var(--color-primary-dark-darker);
  /*accent kleur hover, moet nog */


  --color-icon-background-large: rgba(13, 1, 0, 0.15);
  --color-active: var(--color-primary-dark);

  --color-white: var(--color-primary-light);
  /* --color-black: #16120b; */
  --color-black: #221a0e;
  /* --color-black-rba: 22, 18, 11; */
  --color-black-rba: 34, 26, 14;

  --color-grey: #6f6f6f;
  --color-grey-light: #ecebeb;

  --color-hagetisse-brown: #715a37;
  --color-hagetisse-brown-darker: #433621;

  --color-font-light: var(--color-primary-light);
  --color-font-dark: var(--color-black);
  --color-font-dark-rgb: var(--color-black-rba);


  /* other colors  */
  --color-pink: #e0989b;
  --color-yellow: #ecbf68;
  --color-orange: #d0784f;
  --color-blue: #6077a9;


  --box-shadow: 0 0 2em rgba(0, 0, 0, 0.4);
  --box-shadow-small: 0 0 1em rgba(0, 0, 0, 0.3);



  --layout_width_content: 1200px;
  --typography_size_html: 16px;
  
  --typography_fonts_text: "EB Garamond", serif;
  --typography_font_serif: "EB Garamond", serif;
  --typography_fonts_headings: "Fraunces", serif;

}

@media (min-width: 800px) {
  :root {
    --typography_size_html: 20px;
  }
}