*,
*::before,
*::after {
  margin: 0;
  scroll-behavior: smooth;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/OTF/Satoshi-Black.otf") format("woff2"),
    url("../assets/fonts/TTF/Satoshi-Variable.ttf") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/OTF/Satoshi-Medium.otf") format("woff2"),
    url("../assets/fonts/TTF/Satoshi-Variable.ttf") format("woff");
  font-weight: 400;
  font-style: normal;
}

:root {
  --font-size-xs: 0.8rem;
  --font-size-s: 1rem;
  --font-size-l: 1.4rem;
  --font-size-xl: clamp(2.5rem, 8vw, 4rem);
  --font-size-xxl: clamp(2.5rem, 10vw, 4rem);

  --navy-blue-color: #010154;
  --white-color: #fff;
  --dark-sky-blue-color: #97b4df;
  --charleston-green-color: #2a2829;
  --alabaster-color: #f0ebe5;
  --pastel-gray-color: #dcd2bf;
  --black-color: #000;

  --line-height-p: 1.6;
  --line-height-heading: 1.2;
  --border-radius: 0.5rem;
}

body {
  font-size: var(--font-size-s);
  font-family: "Satoshi";
  font-weight: 400;
}

p {
  line-height: var(--line-height-p);
  max-width: 35rem;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

.anchor-link {
  color: var(--white-color);
  border-radius: var(--border-radius);
  font-weight: 500;
  width: max-content;
  padding: 0.8rem 2rem;
  background: var(--black-color);
}

.h1-font {
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-heading);
  color: var(--navy-blue-color);
  max-width: 25rem;
}

.h2-font {
  font-size: var(--font-size-s);
  font-weight: 500;
}

.h3-font {
  font-size: var(--font-size-l);
}

.heading-paragraaf {
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--white-color);
  position: relative;
  display: inline-block;
}

.span-background {
  position: relative;
  z-index: 2;
  border-radius: var(--border-radius);
  padding: 0 0.4rem;
  margin-left: -0.4rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
