h,
h1 {
  font-size: 200%;
  font-style: italic;
}

/* Global layout improvements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  background-color: #f5f5dc4d;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  width: 80%;
  margin: auto;
}

#centered {
  max-width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  margin-top: 3%;
  padding: 2%;
  display: block;
}

.subtext {
  z-index: 1000;
  margin-top: -10%;
}

.container-fluid {
  padding-top: 1%;
  margin: 2% 0;
}

.navbar.navbar-expand-lg.navbar-light {
  top: 0;
  z-index: 9000;
  width: 100%;
  position: fixed;
}

.navbar {
  background: rgba(84, 84, 84, 1);
  opacity: 0.9;
  text-align: center;
}

.navbar-light .navbar-nav .nav-link {
  color: white;
}

.navbar-light .navbar-brand {
  color: white;
}

.caption:hover {
  bottom: -0.5%;
  -webkit-transition: bottom 0.15s ease-in;
  max-height: 24%;
}

#shadowdiv {
  border-radius: 4px;
  box-shadow: 3px 5px 6px grey;
}

#centerTextDiv {
  margin-bottom: 0;
  text-align: center;
}

#textDiv {
  margin: 0 5%;
  margin-top: 3%;
  padding: 2%;
  border-radius: 4px;
}

#centered {
  text-align: center;
}

#slideShowText {
  position: absolute;
  margin-top: 20%;
  z-index: 100;
}

#slideshowstyle {
  z-index: -1000;
  margin-top: 55px;
  font-size: 4vw;
}

#customCaption {
  padding: 2%;
  text-shadow: 2px 2px 2px black;
  margin-bottom: 12%;
  -webkit-transition: margin-bottom 0.15s ease-in;
}

#customCaption:hover {
  margin-bottom: 13%;
  -webkit-transition: margin-bottom 0.15s ease-in;
}

.overlay {
  text-align: center;
  flex: 1 1 auto;
  box-sizing: border-box;
  padding-top: 56px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../img/bg_pattern.svg");
  text-shadow: 8px 8px 10px black;
  /* position: absolute; */
  color: white;
  background-color: black;
}

.overlay:hover {
  cursor: default;
}

.person {
  border: 2px solid lightgrey;
  border-radius: 5px;
  margin-bottom: 1%;
  padding: 1%;
}

#persons {
  display: grid;
  margin-top: 5%;
  margin-left: 2%;
  margin-right: 2%;
}

.profileimg {
  border-radius: 100%;
  margin: 1%;
  box-shadow: 2px 2px 2px lightgrey;
}

#ipmdiv {
  width: 100%;
  margin-top: -1%;
  box-shadow: 3px 3px 3px lightgrey;
  background-color: #f5f5dc4d;
  margin-bottom: -3%;
}

#ipm {
  display: block;
  margin: 0 auto;
  width: 90%;
  height: auto;
  margin-bottom: 2%;
}

#blackdescription {
  padding: 3% 4% 2.5% 4%;
  background-color: rgb(22, 22, 22);
  color: rgb(250, 250, 250);
  text-align: center;
  margin-bottom: -3%;
}

.cardBox {
  font-size: 140%;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

#card {
  font-size: 1.5vh;
  text-align: center;
  -webkit-transition: margin 0.15s ease-in;
  margin: 1%;
  padding: 1.5%;
  max-width: 700px;
  min-width: 300px;
  box-shadow: 0px 5px 10px darkgrey;
  border-radius: 10px/10px;
}

#card:hover {
  -webkit-transition: margin 0.15s ease-in;
  margin-top: 0;
  margin-bottom: 2%;
}

#omschrijving {
  margin: 0 3%;
  margin-bottom: 2%;
}

#waarde:hover {
  -webkit-transition: transform 0.1s ease-in;
  transform: translateY(-3%);
}

.footer {
  padding: 4%;
  box-shadow: 0px 0px 20px black;
  background-color: #333333;
  color: white;
  flex: 0 0 auto;
}

.partnername {
  font-size: 110%;
}

#partner {
  text-align: center;
  -webkit-transition: transform 0.15s ease-in;
  margin: 5% 2.5%;
  padding: 1.5%;
  box-shadow: 0px 5px 10px darkgrey;
  border-radius: 10px/10px;
}

#partner:hover {
  -webkit-transition: transform 0.1s ease-in;
  transform: translateY(-2.5%);
}

#samenwerkendiv {
  margin: 0 3%;
  margin-top: 5%;
  border-radius: 4px;
}

#customdescription {
  text-align: center;
  margin-top: -3.5%;
  margin-bottom: 3%;
}

#contactButton:hover {
  cursor: pointer;
}

#contact {
  outline: 5px dashed #333333;
  -webkit-transition: outline 0.15s ease-in;
}

#contactHighlighted {
  -webkit-transition: outline 0.15s ease-in;
  outline: 5px dashed red;
}

/* ------------------------------- */
/* Responsive enhancements         */
/* ------------------------------- */

/* Ensure media and embeds scale within containers */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Improve navbar toggler visibility on dark background */
.navbar-light .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.35);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Avoid content hiding behind fixed navbar */
body {
  padding-top: 56px;
}

/* Tweak card sizing and layout on small screens */
@media (max-width: 767.98px) {
  .content {
    width: 92%;
  }

  #card {
    min-width: auto;
    width: 100%;
    margin: 2% 0;
    font-size: 2.1vh;
    /* slightly larger for readability */
  }

  .cardBox {
    display: block;
  }

  #persons {
    grid-template-columns: 1fr;
  }

  .profileimg {
    width: 140px;
    height: auto;
  }

  #blackdescription {
    padding: 8% 6%;
  }

  .footer {
    padding: 8% 5%;
  }
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
  .content {
    width: 88%;
  }

  #card {
    min-width: 280px;
  }
}

/* Large screens: maintain existing feel but slightly increase legibility */
@media (min-width: 1200px) {
  .content {
    width: 75%;
  }
}

/* Typography polish without changing style intent */
h1,
h2,
h3,
.lead {
  line-height: 1.35;
}

/* Better focus styles for accessibility on dark footer */
.footer a {
  color: #fff;
  text-decoration: underline;
}

.footer a:hover {
  text-decoration: none;
}