/* =========================
   BASIS INSTELLINGEN
   ========================= */

/* Zet html en body op volledige hoogte van het scherm */
html, body {
  height: 100%;

  /* Verwijdert standaard witruimte rond de pagina */
  margin: 0;

  /* Lichte grijze achtergrondkleur voor de hele website */
  background-color: #f5f5f5;
}

/* Algemene instellingen voor de body */
body {
  /* Flexbox layout gebruiken */
  display: flex;

  /* Elementen onder elkaar plaatsen */
  flex-direction: column;

  /* Lettertype instellen */
  font-family: 'Montserrat', sans-serif;

  /* Tekstkleur zwart */
  color: black;
}

/* =========================
   NAVBAR
   ========================= */

/* Stijl voor de ul in de navbar */
.navbar ul {
  /* Verwijdert bolletjes van de lijst */
  list-style: none;

  /* Donkere achtergrondkleur */
  background-color: rgb(44, 45, 45);

  /* Geen buitenruimte */
  margin: 0;

  /* Geen binnenruimte */
  padding: 0;

  /* Flexbox gebruiken */
  display: flex;

  /* Items verticaal centreren */
  align-items: center;

  /* Items horizontaal centreren */
  justify-content: center;

  /* Ruimte tussen de menu-items */
  gap: 90px;
}

/* Titel (KreedEvents) in de navbar */
.navbar h1 {
  /* Lichtblauwe kleur */
  color: rgb(197, 223, 223);

  /* Buitenruimte links en rechts */
  margin: 0 40px 0 20px;

  /* Grootte van de titel */
  font-size: 24px;
}

/* Links in de navbar */
.navbar li a {
  /* Maakt de link klikbaar over het volledige blok */
  display: block;

  /* Tekstkleur wit */
  color: white;

  /* Binnenruimte rond de tekst */
  padding: 20px;

  /* Verwijdert onderlijning */
  text-decoration: none;
}

/* Hover-effect wanneer je over een link gaat */
.navbar li a:hover {
  /* Donkerdere achtergrondkleur */
  background-color: rgb(46, 46, 51);
}

/* =========================
   MAIN CONTENT
   ========================= */

/* Main neemt alle resterende ruimte in */
main {
  /* Zorgt ervoor dat footer onderaan blijft */
  flex: 1;

  /* Binnenruimte rond de inhoud */
  padding: 40px;
}

/* =========================
   CONTENT SECTIE
   ========================= */

.content {
  /* Grootte van de tekst */
  font-size: 25px;

  /* Flexbox gebruiken */
  display: flex;

  /* Verticaal centreren */
  align-items: center;

  /* Horizontaal centreren */
  justify-content: center;

  /* Ruimte tussen tekst en afbeelding */
  gap: 90px;

  /* Maximale breedte */
  max-width: 1200px;

  /* Centreert de content */
  margin: 0 auto;

  /* Minimum hoogte (70% van het scherm) */
  min-height: 70vh;
}

/* Afbeelding in de content */
.content-img {
  /* Breedte van de afbeelding */
  width: 1000px;

  /* Ronde hoeken */
  border-radius: 40px;
}

/* =========================
   BUTTON
   ========================= */

.cn {
  /* Ruimte boven de knop */
  margin-top: 20px;

  /* Binnenruimte */
  padding: 10px 20px;

  /* Zwarte achtergrond */
  background: black;

  /* Geen rand */
  border: none;

  /* Ronde knop */
  border-radius: 40px;

  /* Tekstgrootte */
  font-size: 18px;

  /* Handje bij hover */
  cursor: pointer;
}

/* Link in de knop */
.cn a {
  /* Tekstkleur wit */
  color: white;

  /* Geen onderlijning */
  text-decoration: none;

  /* Extra afgeronde hoeken */
  border-radius: 40px;
}

/* Hover-effect op knop */
.cn:hover {
  /* Donkergrijze kleur */
  background-color: rgb(72, 71, 72);
}

/* =========================
   FOOTER
   ========================= */

footer {
  /* Donkere achtergrond */
  background-color: #222;

  /* Tekstkleur wit */
  color: white;

  /* Tekst centreren */
  text-align: center;

  /* Kleine binnenruimte */
  padding: 1px 0;

  /* Geen extra marge onderaan */
  margin-bottom: 0px;
}

/* Extra footer wrapper */
.footer {
  background-color: #222;
  color: white;
  padding: 1px 15px;
}

/* Container in de footer */
.footer-container {
  /* Flexbox */
  display: flex;

  /* Ruimte tussen kolommen */
  justify-content: space-between;

  /* Maximale breedte */
  max-width: 1200px;

  /* Centreert de footer */
  margin: auto;
}

/* Titels in de footer */
.footer-item h3 {
  /* Ruimte onder titel */
  margin-bottom: 10px;

  /* Accentkleur */
  color: rgb(197, 223, 223);
}

/* Tekst in de footer */
.footer-item p {
  /* Kleine verticale marge */
  margin: 5px 0;

  /* Kleinere tekst */
  font-size: 14px;
}

/* =========================
   RESPONSIVE (GSM)
   ========================= */

@media (max-width: 768px) {

  /* Minder padding op kleine schermen */
  main {
    padding: 20px;
  }

  /* Navbar onder elkaar zetten */
  .navbar ul {
    flex-direction: column;
    gap: 0;
  }

  /* Titel kleiner maken */
  .navbar h1 {
    margin: 15px 0;
    font-size: 20px;
  }

  /* Links compacter maken */
  .navbar li a {
    padding: 12px;
    text-align: center;
  }

  /* Content onder elkaar */
  .content {
    flex-direction: column;
    gap: 30px;
    font-size: 18px;
    text-align: center;
    min-height: auto;
  }

  /* Afbeelding responsief maken */
  .content-img {
    width: 100%;
    max-width: 100%;
    border-radius: 25px;
  }

  /* Knop iets kleiner */
  .cn {
    font-size: 16px;
    padding: 12px 24px;
  }

  /* Footer kolommen onder elkaar */
  .footer-container {
    flex-direction: row;
    gap: 20px;
    text-align: center;
  }
}