/* Achtergrond instellen met 70% zwarte transparante laag */
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;

    /* De zwarte gloed (rgba 0,0,0,0.7) over de afbeelding */
background:
  linear-gradient(
    var(--bg-overlay),
    var(--bg-overlay)
  ),
  var(--bg-image) no-repeat top center fixed;

  background-size: cover;
}

/* Het "Glassmorphism" kader */
.glass-card {
    background: rgba(255, 255, 255, 0); /* Iets subtieler wit */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;

    padding: 40px;
    width: 90%;
    max-width: 650px;

 /*   text-align: center;*/
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    color: white;
}

/* Logo styling */
.logo {
    max-width: 220px;
    margin-bottom: 25px;

    /* Zorgt dat het logo wit blijft afsteken tegen de donkere achtergrond */
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
}

/* Tekst styling */
.content {
    margin-bottom: 30px;
    line-height: 1.7;
}

.content h1 {
    margin-top: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
h2 {
    display: block;
    font-size: 1em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 300;
    unicode-bidi: isolate;
}

.content p {
    font-size: 16px;
    margin-bottom: 18px;
    font-weight: 300; /* Iets eleganter */
}

/* Slider / Icon sectie */
.icon-slider {
    display: flex;
    justify-content: center;
    gap: 25px;

    margin-top: 20px;
    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.icon-link {
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.icon-link:hover {
    transform: scale(1.15);
    opacity: 1;
}

.icon-link img {
    width: 45px;
    height: 45px;

    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

@media (max-width: 480px) {
    .glass-card {
        padding: 25px;
    }

    .content h1 {
        font-size: 22px;
    }
}

a:link,
a:visited {
    color: white;
    text-decoration: underline;
    transition: text-decoration 0.2s; /* Maakt de overgang subtieler */
}

/* Styling wanneer je met de muis over de link gaat */
a:hover,
a:active {
    text-decoration: none;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 35px;
}

.project-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;

  /*min-height: 90px;*/
  padding: 18px;

/*  background: rgba(255, 255, 255, 0.92);*/
  border-radius: 14px;
  text-decoration: none;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.project-logo-link:hover {
  transform: translateY(-3px);
 /* background: white;*/
}

.project-logo-link img {
  max-width: 130px;
  max-height: 55px;
  width: auto;
  height: auto;
  display: block;
}

.project-logo-link.archief {
  opacity: 0.75;
}

.project-logo-link.archief:hover {
  opacity: 1;
}

@media (max-width: 700px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}