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

@font-face {
  font-family: "Seraphs";
  src: url("font/SeraphsVF.woff2") format("woff2");
}

body {
  font-family: "Seraphs";
  margin: 0;
  padding: 0 3vw;
}

header {
  background-color: black;
  color: white;
  padding: 15px 20px;
  margin: 0 -3vw 40px;
}

h1 {
  font-size: clamp(2em, 8vw, 6em);
}

h2 {
  font-size: clamp(2em, 6vw, 5em);
}

h3 {
  font-size: clamp(1em, 3vw, 2em);
}

p {
  font-size: clamp(1em, 2vw, 2em);
}

.lijn-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
}

.lijn-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
}

.lijn-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 30px;
  padding: 30px 0;
}

.lijn-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 30px 0;
}

.lijn-4 h1 {
  display: flex;
  gap: 30px;
}

.lijn-4 h1 span {
  display: inline-block;
  transition:
    transform 0.5s ease,
    margin-right 0.5s ease;
  transform-origin: center;
}

.lijn-4 h1 span:nth-child(1):hover {
  transform: scaleX(5);
  margin-right: 100px;
}

.lijn-4 h1 span:nth-child(2):hover {
  transform: scaleX(3.5);
  margin-right: 60px;
}

.lijn-4 h1 span:nth-child(3):hover {
  transform: scaleX(2);
  margin-right: 30px;
}

.lijn-4 h1 span:nth-child(4):hover {
  transform: scaleX(1.5);
}
h2,
h3,
p {
  transition: transform 0.3s ease;
}

h2:hover,
h3:hover,
p:hover {
  transform: scale(1.1);
}
footer {
  background-color: black;
  color: white;
  padding: 15px 20px;
  margin: 40px -3vw 0;
}

.lijn-4 h1 {
  animation: ymca-pulse 2s ease-in-out infinite;
}

.lijn-4 h1 span:nth-child(1) {
  color: #ff5733;
}

.lijn-4 h1 span:nth-child(2) {
  color: #ffb800;
}

.lijn-4 h1 span:nth-child(3) {
  color: #ff69b4;
}

.lijn-4 h1 span:nth-child(4) {
  color: #4169e1;
}