html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    color: #fcf2f0;
    background: linear-gradient(to bottom, #5c7378, #1b1b33, #26283e, #152138, #010101);
    background-repeat: no-repeat; /* Voorkomt herhaling */
    background-attachment: fixed; /* Zorgt dat de achtergrond niet scrollt */
    background-size: cover; /* De achtergrond bedekt het volledige scherm */
    height: 100%;
  }
  
  
  .header-container {
      text-align: center;
      /* Add vertical spacing above and below the header */
      padding: 20px 0;
      /* Center the header content horizontally */      
      border-radius: 10px;
      
  }
  
  .header-container h1 {
      margin-bottom: 20px;
      color: #eae9e7;
  }

  
  /* Custom CSS to center the navbar: werkt niet */
  .navbar {
      display: flex;
      justify-content: center;
  }
  
  
  
  .nav-link {
    color: #eae9e7;
  }
  
  
  .active {
      /* color: #f9e0dc; */
      font-weight: bold;
      position: relative;
      /* top: 8px; */ 
  }
  
  
  .active:hover {
    color: #929ba4;
    font-weight: bold;
  }
  
  .nav-link:hover {
    color: #929ba4;
    font-weight: bold;
  }
  
  .dropdown-menu {
    background: linear-gradient(to bottom, #53666e, #0b111d);
    border: none;
  }

  .dropdown-item {
    color: #eae9e7;
    font-weight: lighter;

  }

  .dropdown-item:hover {
    color: #eae9e7;
    font-weight: bold;

  }
  
  
  /*links op de homepage*/
  a {
    color: #eae9e7;
      text-decoration: none;
      /* Removes underline */
  }
  
  a:hover {
      font-weight: bold;
      color: #eae9e7;
  }
  
  /*video rij*/
  .custom-row {
      /*background-color: rgba(183, 164, 159, 0.5);*/ /* Voeg hier je gewenste kleur en alpha-waarde toe */
      padding: 20px; /* Voeg indien nodig wat padding toe */
      border-radius: 12px;
  
  }

  h2 {
    font-style: italic;
    color: #929ba4;
    
  }
  
  h4 {
      color: #666260; /* Kleur van de tekst */
      font-family: 'Arial', sans-serif; /* Lettertype */
      font-size: 1em; /* Grootte van de tekst */
      font-weight: bold; /* Vetgedrukt */
      /*font-style: italic;*/
      /* Voeg andere gewenste stijlen toe */
      padding: 20px;
  }
  
  .custom-buttons {
      display: flex;
      justify-content: center;
      margin-bottom: 20px; /* Ruimte onder de buttons */
  
  }
  
  .custom-button {
      margin: 0 5px; /* Voeg wat ruimte tussen de buttons toe */
      padding: 10px 10px; /* Aangepaste padding */
      border-radius: 5px; /* Afgeronde hoeken */
      color: #aaa69d; /* Aangepaste tekstkleur */
      border: none; /* Verwijder de border */
      text-decoration: none; /* Verwijder standaard tekstdecoratie */
      cursor: pointer; /* Wijzig de cursor naar een pointer bij hover */
      font-size: 1.5em;
  }
  
  .custom-button:hover {
      color: #d1dde0;
      font-weight: bold;
  }
  
  
img {
  /* box-shadow: 4px 8px 20px rgb(92 90 113);     */
    border-radius: 8px;     
}

img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

 /* Media query voor kleinere schermen */
  @media (max-width: 768px) {
    /* de grootte van de afbeeldingen aanpassen door container + col img aan te passen */
  .container {
    max-width: 100%;
  }

  .col img {
    max-width: 80%; /* Beperkt de breedte van de afbeeldingen binnen de kolom */
    height: auto; 
  }
  }

  /* Media query voor middelgrote schermen */
  @media (min-width: 769px) and (max-width: 1000px) {
    /* de grootte van de afbeeldingen aanpassen door container + col img aan te passen */
  .container {
    max-width: 90%;
  }

  .col img {
    max-width: 80%; /* Beperkt de breedte van de afbeeldingen binnen de kolom */
    height: auto; 
  }
  }

  /* Media query voor grotere schermen */
  @media (min-width: 1001px) {
    /* de grootte van de afbeeldingen aanpassen door container + col img aan te passen */
  .container {
    max-width: 70%;
  }

  .col img {
    max-width: 80%; /* Beperkt de breedte van de afbeeldingen binnen de kolom */
    height: auto; 
  }
  }