@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 10%, rgba(14, 165, 233, 0.24), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgba(34, 197, 94, 0.14), transparent 24rem),
    linear-gradient(135deg, #050b14 0%, var(--kleurAchtergrond) 48%, #0b1628 100%);
  color: var(--kleurTekst);
  font-family: "Inter", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

h1,
h2,
h3 {
  color: var(--kleurDonker);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

p {
  line-height: 1.75;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

main {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 70px;
  position: relative;
}