/* =========================
   RESET
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body{
  min-height:100vh;
}

img,
picture,
video,
canvas {
  max-width: 100%;
  display: block;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .2s ease;
}

a:hover{
opacity:.7;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* formulieren consistenter */
input,
button,
textarea,
select{

font:inherit;

}


/* =========================
   VARIABLES
========================= */

:root {

  /* spacing */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 140px;

  /* typography */

  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Inter", system-ui, sans-serif;

  /* colors */

  --color-bg: #e8fff4;

  --color-header-scroll:#c8f7e1;

  --color-footer-bg:#4e9c76;

  --color-accent:#121212;

  --color-muted:#6b6b6b;

  /* layout */

  --max-width:1100px;

  --text-width:650px;

  /* breakpoints */

  --bp-s:480px;

  --bp-m:768px;

  --bp-l:1024px;

  --bp-xl:1280px;

}


/* =========================
   BASE TYPOGRAPHY
========================= */

body {

  font-family:var(--font-body);

  font-size:17px;

  line-height:1.6;

  background:var(--color-bg);

  color:var(--color-accent);

  -webkit-font-smoothing:antialiased;

}

h1,
h2,
h3 {

  font-family:var(--font-heading);

  font-weight:500;

  line-height:1.2;

  letter-spacing:-0.02em;

}

h1 {

  font-size:clamp(2.2rem,4vw,3.2rem);

  margin-bottom:var(--space-3);

}

h2 {

  font-size:clamp(1.8rem,3vw,2.4rem);

  margin-bottom:var(--space-2);

}

h3 {

  font-size:clamp(1.4rem,2vw,1.8rem);

  margin-bottom:var(--space-2);

}

p {

  max-width:var(--text-width);

}

/* spacing tussen paragrafen */

p + p {

  margin-top:var(--space-2);

}

/* subtiele secondary text */

.small,
.text-muted {

  font-size:.9rem;

  color:var(--color-muted);

}


/* =========================
   LAYOUT BASICS
========================= */

/* algemene page padding */

main {

  padding-left:var(--space-3);

  padding-right:var(--space-3);

  padding-bottom:var(--space-7);

}

/* centrale content container */

.content {

  max-width:var(--max-width);

  margin:0 auto;

}

/* section spacing */

section {
  margin-bottom: var(--space-6); /* 64px i.p.v. 96px */
}


/* =========================
   EDITORIAL HELPERS
========================= */

/* tekst naar rechts duwen */

.offset-right {

  max-width:700px;

  margin-left:auto;

}

/* tekst naar links duwen */

.offset-left {

  max-width:700px;

  margin-right:auto;

}

/* gecentreerde tekst */

.text-center {

  text-align:center;

  margin-left:auto;

  margin-right:auto;

}

/* smalle content */

.narrow {

  max-width:500px;

}


/* =========================
   UI DETAILS
========================= */

/* selectie kleur */

::selection {

  background:#b6f2d8;

}

/* focus states */

:focus-visible {

  outline:2px solid #000;

  outline-offset:2px;

}

/* soepele scroll */

html {

  scroll-behavior:smooth;

}