@font-face {
  font-family: FluxischElse-Regular;
  src: url(fonts/FluxischElse-Regular);
}

body {
  color: black;
  font-family: fluxischElse-Regular;
  max-width: 600px;
  font-size: 18px;
  margin: 0 auto;
}

a {
  color: inherit;
}

article > section:not(:first-of-type) {
  padding-top: 15vmax;
}

article > section > img:first-child {
  padding-bottom: 4vmax;
}

img {
  max-width: 100vw;
}

#titelBC {
  width: 45%;
}

#titelMS {
  width: 50%;
}

#titelTS {
  width: 70%;
}

#titelV {
  width: 30%;
}

#titelC {
  width: 35%;
}

#titelMHB {
  width: 70%;
}

#titelHD {
  width: 40%;
}

#titelA {
  width: 24%;
}

#titelTL {
  width: 30%;
}

#titelM {
  width: 27%;
}

#titelEM {
  width: 38%;
}

#titelCT {
  width: 40%;
}

#titelF {
  width: 23%;
}

#titelS {
  width: 25%;
}

#titelanimals {
  width: 27%;
}

#titelplants {
  width: 23%;
}

#titelfungi {
  width: 23%;
}

#titelprotozoa {
  width: 32%;
}

#titelbacteria {
  width: 30%;
}

#titelviruses {
  width: 25%;
}

em,
strong {
  background-color: rgb(255, 255, 255);
}

#introduction {
  background-color: rgb(255, 255, 255);
}

img {
  width: 100%;
  border: 1px solid rgb(255, 255, 255);
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
  display: block;
}

#foto1 {
  width: 200%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto2 {
  width: 200%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto3 {
  width: 200%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
}

#foto4 {
  width: 125%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto5 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto6 {
  width: 270%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto7 {
  width: 260%;
  position: relative;
  left: 40%;
  transform: translateX(-40%);
}

#foto8 {
  width: 225%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto9 {
  width: 50%;
  float: left;
}

#foto10 {
  width: 90%;
  position: relative;
  left: 80%;
  transform: translateX(-80%);
}

#foto11 {
  width: 220%;
  position: relative;
  left: 35%;
  transform: translateX(-40%);
}

#foto12 {
  width: 190%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto13 {
  width: 175%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto14 {
  width: 90%;
  position: relative;
  left: 36%;
  transform: translateX(-40%);
}

#foto15 {
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto16 {
  width: 175%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto17 {
  width: 200%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto19 {
  width: 100%;
  position: relative;
  left: 45%;
  transform: translateX(-50%);
}

#foto20 {
  width: 60%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#foto21 {
  width: 110%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.tekst-met-afbeelding {
  display: flex;
  gap: 15px;
}

.flex {
  display: flex;
  gap: 20px;
}

.even-brede-kolommen > * {
  flex: 1;
}

img.potlood {
  float: left;
  width: 60%;
}

img.potlood1 {
  float: right;
  width: 50%;
}

img.potlood2 {
  float: left;
  width: 40%;
}

#titel1 {
  width: 225%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4rem;
}

#titel2 {
  width: 105%;
  position: relative;
  left: 47%;
  transform: translateX(-50%);
}

#titel3 {
  width: 220%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#titel4 {
  width: 175%;
  position: relative;
  left: 35%;
  transform: translateX(-40%);
}

#titel5 {
  width: 200%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

#titel6 {
  width: 90%;
  position: relative;
  left: 45%;
  transform: translateX(-50%);
}

#titel7 {
  width: 190%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}