@font-face {
  font-family: "Slackey";
  src: url(../type/Slackey-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "SyneMono";
  src: url(../type/SyneMono-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}

html {
  --whitespace-s: 1rem;
  --whitespace-m: calc(var(--whitespace-s) * 2);
  --whitespace-l: calc(var(--whitespace-s) * 4);
  --whitespace-xl: calc(var(--whitespace-s) * 10);
  --whitespace-xs: calc(var(--whitespace-s) * 0.5);

  --step--5: clamp(0.55rem, 0.5rem + 0.2vw, 0.65rem);
  --step--4: clamp(0.6rem, 0.54rem + 0.25vw, 0.72rem);
  --step--3: clamp(0.66rem, 0.58rem + 0.3vw, 0.82rem);
  --step--2: clamp(0.72rem, 0.63rem + 0.35vw, 0.9rem);
  --step--1: clamp(0.78rem, 0.68rem + 0.45vw, 1rem);
  --step-0: clamp(0.85rem, 0.73rem + 0.55vw, 1.1rem);
  --step-1: clamp(0.95rem, 0.8rem + 0.7vw, 1.3rem);
  --step-2: clamp(1.1rem, 0.9rem + 0.9vw, 1.6rem);
  --step-3: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  --step-4: clamp(1.55rem, 1.15rem + 1.6vw, 2.5rem);
  --step-5: clamp(1.85rem, 1.3rem + 2vw, 3rem);

  --blauw: rgb(161, 235, 255);
  --zwart: black;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: linear-gradient(var(--blauw), var(--zwart));
}

body nav ul {
  display: flex;
  justify-content: center;
  gap: var(--step--2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step-1);
  font-family: Synemono;
}

body nav ul li a {
  color: rgb(133, 220, 255);
  text-decoration: none;
}

body > nav ul li a:hover {
  color: rgb(246, 249, 255);
  text-decoration: underline;
}

header {
  background-image: url(../images/achtergrond-effect.png);
  background-color: black;
  background-size: 100%;
  margin: 0;
  max-width: 100%;
  padding-top: 0.5em;
  padding-right: 1em;
  display: grid;
  place-items: end;
}

nav {
  grid-area: nav;
  background-color: rgb(2, 10, 33);
  margin: 0;
  padding: 0.5em;
}

main {
  text-align: center;
}

footer {
  grid-area: footer;
  display: grid;
  place-items: center;
  background-color: black;
  border-top: 1em rgb(24, 24, 24) solid;
  background-image: url(../images/footer-image.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

h1 {
  font-size: var(--step-2);
  margin-right: var(--whitespace-xs);
  text-align: end;
  font-family: Slackey;
  width: min-content;
  color: rgb(133, 220, 255);
}

h2 {
  margin-top: 6em;
  font-size: var(--step-3);
  font-family: Slackey;
  color: rgb(2, 10, 33);
}

h3 {
  font-family: Slackey;
  color: white;
}

p {
  font-family: SyneMono;
  color: white;
  max-width: 70%;
  place-self: center;
}

p :first-of-type {
  color: rgb(2, 10, 33);
}

main a {
  color: rgb(2, 10, 33);
  font-family: SyneMono;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  text-decoration: underline;
  color: white;
}

img {
  width: 50%;
  min-width: 17em;
  display: grid;
  place-self: center;
  margin: 3em;
  transition-duration: 1s;
}

img:hover {
  transform: scale(1.2);
}

article:nth-of-type(1) {
  margin-top: 15em;
  margin-bottom: 18em;
}

article:nth-of-type(2) {
  margin-bottom: 20em;
}

article:nth-of-type(3) {
  margin-bottom: 20em;
}

article:nth-of-type(4) {
  margin-bottom: 25em;
}

article:nth-of-type(5) {
  margin-bottom: 25em;
}

article:nth-of-type(6) {
  margin-bottom: 30em;
}

article:nth-of-type(7) {
  margin-bottom: 30em;
}

article:nth-of-type(8) {
  margin-bottom: 0;
}

footer h2 {
  color: white;
}

footer p {
  color: white;
}

footer a:last-of-type {
  color: rgb(133, 220, 255);
}

footer a:last-of-type:hover {
  color: rgb(79, 114, 205);
}