@font-face {
    font-family: 'Inknut Antiqua';
    src: url('fonts/Inknut_Antiqua/InknutAntiqua-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Inknut Antiqua';
    src: url('fonts/Inknut_Antiqua/InknutAntiqua-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: 'Inknut Antiqua';
    src: url('fonts/Inknut_Antiqua/InknutAntiqua-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  font-display: swap;
}

/* Set Inknut Antiqua as the default font for all elements */
html,
body,
a,
button,
input,
textarea,
h1, h2, h3, h4, h5, h6,
p,
span {
    font-family: 'Inknut Antiqua', serif;
}

html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 0 0;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

/* make box-sizing consistent across the document so padding doesn't add unexpected width */
*,
*::before,
*::after {
  box-sizing: inherit;
}

.logo {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  margin-left: 2vh;
  margin-top: 1vh;
  border: 2px solid rgb(255, 255, 255);
  animation: fadeIn 0.4s ease;

}

.background {
  background-image: url('fotos/babyenbeer.jpg');
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  min-height: 140vh;
  opacity: 0.8;
}

.nav {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.4s ease;
  gap: 5vh;
  margin-left: 20vh;
 

}

.herotekst1,
.storytitel1,
.storytitel2,
.verhaaltitel,
.doneren2,
.txtuno {
  font-size: 35px;
}

.herotekst1 {
  text-align: center;
  color: white;
  font-family: 'Inknut Antiqua', serif;
  font-weight: 900;
  margin-top: 15vh;
  animation: fadeIn 0.4s ease;
}

.herotekst2 {
  text-align: center;
  color: white;
  font-family: 'Inknut Antiqua', serif;
  font-weight: 400;
  font-size: 25px;
  margin-top: 35vh;
  margin-bottom: 10vh;
  animation: fadeIn 0.4s ease;
}

.voorwie,
.overons,
.contact,
.watdoen,
.helpmee,
.actueel {
  text-decoration: none;
  color: white;
  font-family: 'Inknut Antiqua', serif;
  font-weight: 700;
  font-size: 20px;
  margin-left: 5vh;
  animation: fadeIn 0.4s ease;
}

/* Medium text size (25px) */
.herotekst2,
.doneren,
.storytekst,
.storytekst2,
.DtxtA,
.DtxtB,
.DtxtC,
.doneerknop1,
.doneerknop2,
.doneerknopA,
.doneerknopB,
.doneerknopC,
.doneerknopD,
.bevestig,
.descriptie,
.nieuwA,
.footer {
  font-size: 25px;
}

.doneren {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-family: 'Inknut Antiqua', serif;
  margin-left: 5vh;
  background-color: #FFD300;
  padding: 10px 20px;
  border-radius: 5px;
  animation: fadeIn 0.4s ease;
}

.story {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding-top: 10vh;
  width: 100%;
  flex-wrap: wrap;
  animation: fadeIn 0.4s ease;
}

.stories1 {
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80vh;
  height: 90vh;
  border-radius: 10px;
  gap: 100px;
  animation: fadeIn 0.4s ease;
}

.stories2 {
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 115vh;
  height: 90vh;
  border-radius: 10px;
  animation: fadeIn 0.4s ease;
}

/* Responsive layout - stack images on smaller screens */
@media screen and (max-width: 1024px) {

  .story {
    flex-direction: column;
    padding-left: 5vh;
    padding-right: 5vh;
    gap: 5vh;
  }

  .stories1,
  .stories2 {
    width: 95vw;
    height: auto;
    aspect-ratio: 4/3;
    max-height: 85vh;
  }

  .afb1,
  .afb2 {
    width: 100%;
  }

  .storytekst,
  .storytekst2 {
    font-size: 25px;
    max-width: calc(90vw - 4rem);
  }

  .storytitel1,
  .storytitel2 {
    font-size: 35px;
  }
}

/* Further adjustments for very small screens */
@media screen and (max-width: 480px) {
  .story {
    padding-left: 2vh;
    padding-right: 2vh;
  }

  .stories1,
  .stories2 {
    width: 95vw;
  }

  .storytitel1,
  .storytitel2 {
    font-size: 35px;
  }

  .storytekst,
  .storytekst2 {
    font-size: 2px;
  }

  /* Responsive adjustments for doneerpagina */
  .doneerpagina {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }

  .yipee {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .donerenpagna {
    margin-right: 0;
    text-align: center;
  }

  .DtxtA, .DtxtB, .DtxtC {
    text-align: center;
    margin: 1rem 0;
    font-size: 20px;
  }

  .knoppenA, .knoppenB {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* make the image container positioned so child text can be placed on top */
.afb1 {
  position: relative;
  display: inline-block;
  animation: fadeIn 0.4s ease;
}

/* second image container */
.afb2 {
  position: relative;
  display: inline-block;
  animation: fadeIn 0.4s ease;
}

/* make overlay text scale with the image by defining a responsive base font-size
   on the image container; children use em units so they stay proportional */
.afb1,
.afb2 {
  /* clamp(min, preferred, max) keeps sizes reasonable across devices */
  font-size: clamp(14px, 2.5vmin, 40px);
  animation: fadeIn 0.4s ease;
}

/* ensure images behave as blocks and cover their box */
.stories1,
.stories2 {
  display: block;
  object-fit: cover;
  opacity: 0.75;
  border: 10px solid lightgrey;
  animation: fadeIn 0.4s ease;
}

/* overlay paragraph on top of the image */
.storytekst {
  position: absolute;
  left: 2rem;
  top: calc(2rem + 5vh + 1rem);
  /* placed under .storytitel1 (top 2rem + title 5vh + gap) */
  color: #000000;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  /* use em so it scales with .afb font-size */
  font-size: 25px;
  line-height: 1.2;
  /* constrain relative to the image container rather than viewport */
  max-width: 60%;
  z-index: 4;
  flex-wrap: wrap;
  animation: fadeIn 0.4s ease;
}

/* overlay for the second paragraph over the second image */
.storytekst2 {
  position: absolute;
  right: 2rem;
  top: calc(2rem + 5vh + 1rem);
  /* placed under .storytitel2 */
  color: #000000;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  /* use em so it scales with .afb font-size */
  font-size: 25px;
  line-height: 1.2;
  /* constrain relative to the image container */
  max-width: 80%;
  text-align: center;
  z-index: 4;
  animation: fadeIn 0.4s ease;
  margin-top: 10vh;
}

/* overlay the H1 titles on top of their images */
.storytitel1,
.storytitel2 {
  position: absolute;
  top: 2rem;
  color: #000000;
  /* use em units so titles scale with the image container */
  font-size: 35px;
  /* per user request */
  font-weight: 700;
  margin: 0;
  padding: 0.25rem 0.5rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  line-height: 1;
  z-index: 5;
  animation: fadeIn 0.4s ease;

}

.storytitel1 {
  left: 2rem;
  text-align: left;
  animation: fadeIn 0.4s ease;
}

.storytitel2 {
  right: 2rem;
  text-align: right;
  animation: fadeIn 0.4s ease;
}

.verhaal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: left;
  text-align: left;
  width: 100%;
  height: auto;
  border-radius: 10px;
  gap: 20px;
  padding-bottom: 5vh;
  margin-left: 5vh;
  animation: fadeIn 0.4s ease;
}

.verhaaltitel {
  color: rgb(0, 0, 0);
  font-family: 'Inknut Antiqua', serif;
  font-weight: 900;
  font-size: 35px;
  margin-top: 5vh;
  animation: fadeIn 0.4s ease;
}

.verhaaltext {
  color: black;
  font-family: 'Inknut Antiqua', serif;
  font-weight: 400;
  margin-top: 2vh;
  margin-bottom: 5vh;
  animation: fadeIn 0.4s ease;
}

.ftoszieligkind {
  margin-top: 15vh;
  width: 50%;
  height: auto;
  border-radius: 0% 0% 0% 50%;
  animation: fadeIn 0.4s ease;
}

.doneren2 {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-size: 25px;
  margin-left: 5vh;
  background-color: #ff0000;
  padding: 10px 20px;
  border-radius: 5px;
  max-width: fit-content;
  animation: fadeIn 0.4s ease;
}

.doneerpagina {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: right;
  gap: 40px;
  border-top: 4px solid #22234B;
  animation: fadeIn 0.4s ease;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

.yipee {
  width: 40%;
  max-width: 500px;
  height: auto;
  border-radius: 0 0 50% 0;
  animation: fadeIn 0.4s ease;
  object-fit: cover;
  display: block;
  margin: 0;
  flex-shrink: 0;
}

.donerenpagna {
  text-align: center;
  color: #22234B;
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 45px);
  margin: 20px 20px 0 20px;
  animation: fadeIn 0.4s ease;
}

.DtxtA {
  color: #22234B;
  animation: fadeIn 0.4s ease;
  font-size: 25px;
  text-align: center;
}

.DtxtB {
  text-align: left;
  color: #22234B;
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
  margin-left: 5vh;
  animation: fadeIn 0.4s ease;

}

.knoppenA {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10vh;
  animation: fadeIn 0.4s ease;
}

.doneerknop1 {
  text-decoration: none;
  color: #22234B;
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  max-width: fit-content;
  border: 3px solid #22234B;
  margin: 0px;
  animation: fadeIn 0.4s ease;
}

.doneerknop2 {
  text-decoration: none;
  color: #22234B;
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  max-width: fit-content;
  border: 3px solid #22234B;
  animation: fadeIn 0.4s ease;
}

.doneerknop1:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  color: white;
  background-color: #22234B;

}

.doneerknop2:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  color: white;
  background-color: #22234B;

}

.DtxtC {
  text-align: left;
  color: #22234B;
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
  margin-left: 5vh;
  margin-top: 5vh;
  animation: fadeIn 0.4s ease;
}

.knoppenB {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10vh;
  margin-top: 5vh;
  animation: fadeIn 0.4s ease;
}

.doneerknopA,
.doneerknopB,
.doneerknopC,
.doneerknopD {
  text-decoration: none;
  color: #22234B;
  font-family: 'Inknut Antiqua', serif;
  font-size: clamp(16px, 2vw, 25px);
  background-color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  max-width: fit-content;
  border: 3px solid #22234B;
  animation: fadeIn 0.4s ease;
  white-space: nowrap;
}

.doneerknopA:hover,
.doneerknopB:hover,
.doneerknopC:hover,
.doneerknopD:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  color: white;
  background-color: #22234B;
  gap: 5vh;
}

.confirmatieknop {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10vh;
  animation: fadeIn 0.4s ease;
}

.bevestig {

  text-decoration: none;
  color: rgb(0, 0, 0);
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
  margin-left: 5vh;
  background-color: #FFD300;
  padding: 10px 20px;
  border-radius: 5px;
  border: 3px solid rgb(0, 0, 0);
  animation: fadeIn 0.4s ease;
}

.bevestig:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  color: rgb(0, 0, 0);
  background-color: #f5cf11;

}

.comment-section {
  background-color: #f7f7f7;
  padding: 5vh 10vw;
  border-top: 4px solid #22234B;
  margin-top: 10vh;
  font-family: 'Inknut Antiqua', serif;

}

.comment-title {
  color: #22234B;
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
  margin-bottom: 3vh;
  text-align: center;

}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  max-width: 600px;
  margin: 0 auto;

}

.comment-form input,
.comment-form textarea,
.comment-submit,
.comment-submitB,
.txtein,
.txtzwei,
.txtdrei,
.comment p {
  font-size: 15px;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 10px 15px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
}

.comment-form input:focus,
.comment-form textarea:focus {
  border-color: #22234B;
  outline: none;
}

.comment-submit {
  align-self: center;
  background-color: #FFD300;
  color: #000;
  border: 2px solid #000;
  font-family: 'Inknut Antiqua', serif;
  padding: 10px 25px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-submit:hover {
  background-color: #f5cf11;
  transform: translateY(-3px);
}

.comment-list {
  margin-top: 4vh;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.comment {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  font-size: 15px;
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.4s ease;
}

/* Small text size (15px) */
.comment p,
.comment-form input,
.comment-form textarea,
.comment-submit,
.comment-submitB,
.txtein,
.txtzwei,
.txtdrei,
.voorwie,
.overons,
.contact,
.watdoen,
.helpmee,
.actueel {
  font-size: 15px;
}

.comment p {
  margin: 0.3rem 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.aHTxT {
  margin-left: 5vh;
  margin-top: 5vh;
  font-family: 'Inknut Antiqua', serif;
  font-size: 25px;
}

.containerNIEUWS {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.album {
  width: 275px;
  height: 300px;
  background-color: white;
}

.cd {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: 10px;

}

.descriptie {
  text-align: center;
  font-size: 25px;
  color: black;
  display: flex;
  justify-content: space-between;
}

.nieuwA {
  font-size: 25px;
}

.emailshi {
  display: flex;
  background-color: #22234B;
  flex-direction: row;
  align-items: center;
  padding: 2rem;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.txtenshi {
  flex-shrink: 0;
  margin-left:5vh;
}

.txtuno {
  font-size: 35px;
  color: white;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.txtdu {
  font-size: 3vh;
  color: white;
  font-weight: 400;
  margin: 0;
}

.naampie {
  height: 65px;
  flex: 1;
  min-width: 200px;
  max-width: 800px;
  border-radius: 6px;
  border: none;
  padding: 0 15px;
}

.comment-submitB {
  background-color: #FFD300;
  color: #000;
  border: 2px solid #000;
  font-family: 'Inknut Antiqua', serif;
  font-size: 15px;
  padding: 0 25px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  display: flex;
  flex-direction: row;
  background-color: #cccccc;
  font-size: 25px;
}

.txtein {
  margin-left: 5vh;
  font-size: 15px;
}

.txtzwei {
  margin-left: 35vh;
  font-size: 15px;
}

.txtdrei {
  margin-left: 45vh;
  font-size: 15px;
}