:root {
  --attention-1-color: #FC352D;
  --attention-2-color: #AA2520;
  --attention-3-color: #FF6963;
  --light-1-color: #F0FAF5;
  --light-2-color: #ABC3C5;
  --dark-1-color: #020A0D;
  --dark-2-color: #002831;
  --dark-3-color: #123F46;
  --dark-4-color: #2E4F5A;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* This ensures padding and border are included in the element's total width and height */
}

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: 'PPNeueMachina-inktrap', sans-serif;
  font-weight: 300;
  /* Light */
  font-size: 1rem;
  color: var(--light-1-color);
  /* min-height: 100vh; Make sure body covers the full viewport height */
}

#particleCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: var(--dark-1-color);
  z-index: -1;
  /* Zet het canvas achter je inhoud */
}

a {
  color: inherit;
  /* Laat links dezelfde kleur hebben als omliggende tekst */
  color: var(--attention-1-color);
  text-decoration: none;
  /* Verwijdert de onderstreping */
}

.mail-link:hover {
  color: var(--attention-2-color);
}

.title-block {
  position: relative;
  height: auto;
  width: 100vw;
  padding: 1em;
}


.title-with-underline span {
  position: relative;
  display: inline-block; /* Zorgt dat de breedte van de container overeenkomt met de tekst */
  z-index: 2; /* Zorgt dat de oorspronkelijke tekst boven de pseudo-element tekst staat */
  padding: 0 5px; /* Voegt padding toe om te voorkomen dat de achtergrondtekst zichtbaar is aan de zijkanten */
  font-size: 20vw;
}

.title-with-underline span::before {
  content: attr(data-text); /* Gebruikt de data-text attribuut van elke span voor inhoud */
  font-style: italic; /* Maakt de tekst cursief */
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1; /* Plaatst de pseudo-element tekst achter de oorspronkelijke tekst */
  color: var(--attention-3-color); /* Kleur van de cursieve tekst, aanpasbaar */
  opacity: 0.5; /* Maakt de cursieve tekst minder opvallend, aanpasbaar */
  width: 100%; /* Zorgt ervoor dat de breedte overeenkomt met het oorspronkelijke element */
}





.content-block {
  height: auto;
  width: 100vw;
  padding: 3rem;
  background-color: var(--dark-1-color);
}

.content-block-light {
  padding-bottom: 6rem;
  background-color: var(--light-2-color);
}

.content-block-light h2{
  color: var(--dark-3-color);
}

.image-block {
  display:block;
  height: auto;
  width: 100vw;
  line-height: 0;
}

.banner-image {
  height: auto;
  width: inherit;
}

footer {
  height: auto;
}

h3 {
  color: var(--light-2-color);
  margin-bottom: 0.2rem;
  font-weight: 400;
  font-size: 1rem;
}

h1 {
  font-weight: 800;
  /* Dit zal de ultrabold stijl gebruiken */
  font-size: 5rem;
  margin-bottom: 1rem;
}

.title {
  font-size: 20vw;
  /* Begint met 4% van de viewport-breedte */
}

/* Zet een maximale tekstgrootte voor grotere schermen */
@media (min-width: 720px) {
  .title-with-underline span {
    font-size: 144px;
    /* Gebruik een vaste tekstgrootte voor schermen breder dan 1000px */
  }
}

@media (max-width: 500px) {
  .content-block {
    padding: 0.8rem;
  }
}


h2 {
  font-weight: 400;
  /* Dit zal de ultrabold stijl gebruiken */
  margin-bottom: 1rem;
  margin-top: 1rem;
  color: var(--light-2-color);
}

.logo {
  width: 8rem;
  /* of een ander maat, kan ook in % voor responsiviteit */
  height: 8rem;
}


.event-card {
  cursor: pointer;
  /* Verandert de cursor om te laten zien dat het klikbaar is */
  padding: 20px;
  margin-bottom: 10px;
  /* Voegt ruimte toe tussen de cards */
  background-color: var(--dark-2-color);
  /* Lichte achtergrond voor de card */
  border-radius: 10px;
  /* Maakt de hoeken afgerond */
  transition: background-color 0.3s;
  /* Voegt een overgangseffect toe voor de hover */
}

.event-card:hover {
  background-color: var(--dark-3-color);
  /* Donkerdere achtergrond bij hover */
}

.event-datum,
.event-tijden,
.event-naam,
.event-plaats {
  margin-bottom: 5px;
  /* Voegt ruimte toe tussen de regels */
}

.event-naam {
  font-weight: 400;
  /* Dit zal de ultrabold stijl gebruiken */
  font-size: 1.25rem;
}

.event-datum {}

.event-tijden {}

.event-plaats {}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('../fonts/PPNeueMachina-PlainLight.otf') format('opentype');
  font-weight: 300;
  /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('../fonts/PPNeueMachina-PlainLightItalic.otf') format('opentype');
  font-weight: 300;
  /* Light */
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('../fonts/PPNeueMachina-PlainRegular.otf') format('opentype');
  font-weight: 400;
  /* Normal */
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('../fonts/PPNeueMachina-PlainRegularItalic.otf') format('opentype');
  font-weight: 400;
  /* Normal */
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('../fonts/PPNeueMachina-PlainUltrabold.otf') format('opentype');
  font-weight: 800;
  /* Ultrabold */
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMachina';
  src: url('../fonts/PPNeueMachina-PlainUltraboldItalic.otf') format('opentype');
  font-weight: 800;
  /* Ultrabold */
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMachina-inktrap';
  src: url('../fonts/PPNeueMachina-InktrapLight.otf') format('opentype');
  font-weight: 300;
  /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMachina-inktrap';
  src: url('../fonts/PPNeueMachina-InktrapLightItalic.otf') format('opentype');
  font-weight: 300;
  /* Light */
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMachina-inktrap';
  src: url('../fonts/PPNeueMachina-InktrapRegular.otf') format('opentype');
  font-weight: 400;
  /* Normal */
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMachina-inktrap';
  src: url('../fonts/PPNeueMachina-InktrapRegularItalic.otf') format('opentype');
  font-weight: 400;
  /* Normal */
  font-style: italic;
}

@font-face {
  font-family: 'PPNeueMachina-inktrap';
  src: url('../fonts/PPNeueMachina-InktrapUltrabold.otf') format('opentype');
  font-weight: 800;
  /* Ultrabold */
  font-style: normal;
}

@font-face {
  font-family: 'PPNeueMachina-inktrap';
  src: url('../fonts/PPNeueMachina-InktrapUltraboldItalic.otf') format('opentype');
  font-weight: 800;
  /* Ultrabold */
  font-style: italic;
}

.scroll-container {
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
  overflow-x: auto;
  /* Maakt horizontale scrolling mogelijk */
  white-space: nowrap;
  /* Zorgt dat alle items op één lijn staan */
  width: 100%;
  /* Aanpassen aan de breedte van de container */
  padding: 20px 0;
  /* Optioneel: Voegt wat ruimte toe boven en onder de carousel */
}

.scroll-container::-webkit-scrollbar {
  display: none;
  /* Verbergt de scrollbar in WebKit browsers zoals Chrome en Safari */
}

.scroll-wrapper img {
  width: auto;
  /* Houdt de oorspronkelijke breedte van de afbeelding */
  height: 20rem;
  /* Aanpassen aan de gewenste hoogte */
  display: inline-block;
  /* Nodig om de afbeeldingen naast elkaar te tonen */
  margin-right: 20px;
  /* Voegt ruimte toe tussen de afbeeldingen */
}

.image-container {
  display: inline-block; /* Zorgt dat de containers naast elkaar staan */
  width: auto; /* Past de breedte aan de inhoud aan */
  text-align: left; /* Centreert de tekst onder de afbeelding */
  margin-right: 20px; /* Voegt ruimte toe tussen de afbeeldingscontainers */
}

.image-caption {
  font-size: 0.6rem; /* Pas de grootte van de bijschrifttekst aan */
  color: var(--light-2-color); /* Pas de kleur aan */
  margin-top: 0.3rem; /* Ruimte tussen de afbeelding en de tekst */
  text-transform: uppercase;
}






.animated-button {
  display: flex;
  /* Gebruik flexbox voor centreren */
  justify-content: center;
  /* Centreert de inhoud horizontaal */
  align-items: center;
  /* Centreert de inhoud verticaal */
  text-align: center;
  /* Zorgt voor centrering van de tekst zelf, indien nodig */
  width: 100%;
  font-size: 4vw;
  background-color: var(--attention-1-color);
  text-decoration: none;
  /* Verwijdert onderstreping */
  border: none;
  color: var(--light-1-color);
  padding: 3rem;
  /* Aanpassen op basis van je ontwerp */
  cursor: pointer;
  transition: background-color 0.3s ease;
  height: auto;
  /* Of een specifieke hoogte als je een vaste hoogte wilt */
}

.animated-button:hover {
  background-color: var(--attention-3-color);
}

.dark-button{
 background-color: var(--dark-2-color);
}

.dark-button:hover{
  background-color: var(--dark-3-color);
 }

 .arrow {
  display: inline-block;
  position: relative;
  top: -0.2rem; /* Verstel dit om de uitlijning te perfectioneren */
  left: 0.4rem;
  transition: transform 0.2s ease; /* Zorgt voor een soepele overgang */
}

.animated-button:hover .arrow {
  transform: translateX(0.8rem); /* Verplaatst de pijl naar buiten */
}