/* FONT AND BODY */

.googlefont_krant {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
H4 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-wrap: balance;
}

body {
  color: #000000;
  margin: 0 auto;
  font-family: "Courier New", Courier, monospace;
  background-color: rgb(255, 255, 255);
  text-align: center;
  padding: 1rem;
  z-index: 0;
  padding-bottom: 0;
}

article {
  /* Getal hieronder bepaalt breedte tekstbeeld */
  max-width: 940px;
  padding: clamp(0.3rem, 5vw, 3.5rem);
  padding-top: 0;
  padding-bottom: 0;
  margin-inline: auto;
}

/* Header image */
div.image-wrapper {
  max-width: 1000px;
  margin-top: 1rem;
  margin-inline: auto;
}

p {
  margin: 0.4rem 0; /* kleinere marge boven en onder elke paragraaf */
  text-align: justify;
  line-height: 1.5;
}

a {
  position: relative;
  display: inline-block; /* maakt het 1 samenhangend blok */
  color: rgb(8, 142, 133);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #ff7f50;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 0;
  height: 2px;
  background: #ff7f50;
  transition: width 0.3s ease;
}

a:hover::after {
  width: 100%;
}

.blaadjes {
  display: block;
  max-width: 5%;
  margin: 0 auto;
}

/* full bleed */
.image-wrapper.full-bleed {
  width: 100vw;
  height: auto;
  margin-left: calc(-50vw + 50%);
}

/* HEADER */
header {
  flex-wrap: wrap;
  display: block;
  max-width: 100%;
  justify-content: center;
  color: #dbd707;
  font-size: clamp(3rem, 4vw, 3.5rem);
  word-break: break-all;
  text-align: center;
  border-bottom: 3px solid #dbd707;
  padding-bottom: 2rem;
}

h1 {
  margin: auto;
  margin-top: 1rem;
}

h3 {
  text-decoration: underline;
  text-align: left;
}

/* introduction */
/* INTRO AND ALL H2*/
.image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

#introduction {
  padding-block: 20px;
}

h2 {
  color: #424242;
  font-size: 4em;
  line-height: 1;
  text-align: center;
  /* border-top: 3px solid #dbd707;
  border-bottom: 2px solid #dbd707;
  padding: 0;
  margin: 0.2rem 0 0.2rem; */
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

/* birding-birdwatching-and-twitching */
/* TWITCHING SECTION */
#birding-birdwatching-and-twitching {
  display: flex;
  flex-direction: column;

  text-align: left;
}

blockquote {
  max-width: 100%;
  margin-left: 0;
}

ul {
  list-style: none;
  margin-left: 0;
  padding: 0;
}

ul li {
  position: relative;
  padding-left: 25px; /* ruimte voor het nieuwe bolletje */
}

ul li::before {
  content: "•"; /* bolletje */
  position: absolute;
  left: 0;
  top: 0;
  color: #979505; /* jouw gewenste kleur */
  font-size: 20px; /* grootte van het bolletje */
  line-height: 1;
}

/* 2 COLUMNS FOR IMG */
.columns {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: flex-start;
  text-align: left;
}

.text {
  flex: 1;
  text-align: justify;
}

.twitching-vers {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.image-manhuis {
  margin-top: 0rem;
  align-self: center;
}

.image-manhuis img {
  width: 100%;
  height: auto;
  display: block;
  display: flex;
}

/* the-history-of-birdwatching */
/* COLUMNS AND IMG LEFT, RIGHT*/

.columns-history {
  display: flex;
  gap: 2rem;
}

.history-right,
.history-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.history-left img,
.history-right img {
  width: 100%;
  height: auto;
  display: block;
}

.history-right img {
  width: 110%;
}

/* economic-and-environmental-impact */
/* COLUMNS AND IMG BOTTOM*/

.columns-economic {
  display: flex;
  gap: 2rem;
}

.economic-right,
.economic-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.economic-img {
  width: 100%;
}

/* monitoring */
/* 2 COLUMNS */

.columns-monitoring {
  display: flex;
  gap: 2rem;
}

.monitoring-right,
.monitoring-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.monitoring-img {
  max-width: 100%;
}
/* competition */
/* 2 COLUMNS AND 2 IMG*/

#competition ul {
  text-align: left;
}

.columns-competition {
  display: flex;
  gap: 2rem;
}
.competition-img {
  display: block;
  margin: 2rem auto 0 auto;
  width: 100%;
  height: auto;
}

.competition-right,
.competition-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* RIGHT MEASUREMENTS*/

/* chatgpt */
.columns-competition {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

/* geef vaste, evenwichtige breedtes */
.socio-left,
.socio-right,
.economic-left,
.economic-right,
.history-left,
.history-right,
.famous-left,
.famous-right {
  gap: 0.6rem;
}

/* tekst links iets kleiner */
.economic-left p,
.history-left p,
.columns-competition p {
  font-size: 1rem;
  line-height: 1.5;
}

/* networking-and-organization */
/* equipment-and-technology */
/* ALL H3 IN 2 COLUMNS */

/* chatgpt */
.columns-equipment {
  display: flex;
  gap: 2rem;
}

.columns-equipment {
  display: flex;
  gap: 2rem;
}

/* De 2 kolommen even breed */
.equip-left,
.equip-right {
  flex: 1;
}

/* voorkom dat sections breken */
.equip-left section,
.equip-right section {
  break-inside: avoid;
  margin-bottom: 2rem;
}

/* Zorg dat secties niet in stukken breken */
.columns-equipment section {
  break-inside: avoid;
  margin-bottom: 2rem;
}

/* Afbeelding onder de kolommen */
.equipment-img {
  display: block;
  margin: 2rem auto 0 auto;
  width: 100%;
  height: auto;
}

/* socio-psychology */
/* 2 COLUMNS AND 1 IMG*/

.columns-socio {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

/* twee kolommen even breed */
.socio-left,
.socio-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: justify;
  max-width: 48%;
}

/* afbeelding onderaan tweede kolom */
.socio-img {
  align-self: center;
  margin-top: 0rem;
  width: 100%;
  display: block;
}

/* famous-birdwatchers */
.columns-famous {
  display: flex;
  gap: 2rem;
  text-align: left;
}

.famous-left,
.famous-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: justify;
  max-width: 48%;
}

.famous-img {
  align-self: center;
  margin-top: 1rem;
  width: 100%;
  display: block;
}

/* h2 img */
h2 + img {
  padding-top: 1em;
  padding-bottom: 2em;
}

.einde-img {
  align-self: center;
  margin-top: 0rem;
  width: 100%;
  display: block;
}