.body {
 background-image: url('img/Back.jpg');
 background-size: cover ;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 padding: 20px;
}

.flexbox {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
}

.card {
 background-color: rgba(255, 255, 255, 0.8);
 border-radius: 10px;
 box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
 width: 300px;
 padding: 15px;
 text-align: center;
 transition: transform 0.3s;
}
.hoofd {
  font-family: "Mountains of Christmas", serif;
  font-weight: 700;
  font-style: normal;
  font-size: 6rem;
}


.card-text {
 font-family: 'Arial', sans-serif;
 color: #333;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 420px; /* set a fixed height for all cards */
  /* ...existing styles... */
}

.card:hover {
  transform: translateY(-10px);

}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-end; /* push content to bottom */
}
.card-img-top {
  transition: transform 0.3s;
  width: 100%;
  height: auto;
}

.card:hover .card-img-top {
  transform: scale(1.12);
  z-index: 2;
}

/* Blinking Christmas lights for H1 */
.hoofd {
    text-align: center;
    color: #070505;
    margin-bottom: 30px;
    animation: christmas-lights 1s infinite alternate;
    text-shadow:
      0 0 10px #ff0000,
      0 0 20px #00ff00,
      0 0 30px #0000ff,
      0 0 40px #ffff00,
      0 0 50px #ff00ff;
}

@keyframes christmas-lights {
  0% {
    text-shadow:
      0 0 10px #ff0000,
      0 0 20px #00ff00,
      0 0 30px #0000ff,
      0 0 40px #ffff00,
      0 0 50px #ff00ff;
  }
  50% {
    text-shadow:
      0 0 10px #00ff00,
      0 0 20px #ff0000,
      0 0 30px #ffff00,
      0 0 40px #0000ff,
      0 0 50px #ff00ff;
  }
  100% {
    text-shadow:
      0 0 10px #ffff00,
      0 0 20px #ff00ff,
      0 0 30px #00ff00,
      0 0 40px #ff0000,
      0 0 50px #0000ff;
  }
}