/* Algemene layout */

body {
  /* geen kantlijn rond de pagina */
  margin: 0;
  /* default voor tekst: gecentreerd, zonder schreef, vet */
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  /* achtergrondafbeelding die niet meescrollt */
  background-image: url("../img/wallpaper-brawl-stars.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
header {
  /* beperk de breedte op brede schermen */
  max-width: 500px;
  /* kantlijn bovenaan */
  margin-top: 24px;
  /* gecentreerd */
  margin-left: auto;
  margin-right: auto;
  /* ronde hoeken */
  border-radius: 25px;
  /* binnenkantlijn */
  padding: 12px;
  /* kleur en lettergrootte */
  color: #8b2958;
  font-size: 24pt;
  background-color: #ecb86c;
}
footer {
  /* kantlijn bovenaan */
  margin-top: 48px;
  /* gecentreerd */
  margin-left: auto;
  margin-right: auto;
  /* binnenkantlijn */
  padding: 12px;
  /* kleur en lettergrootte */
  color: #8b2958;
  font-size: 12pt;
}
.figure, .video {
  /* witruimte rond afbeeldingen en video's */
  padding: 24px; 
}
.figure p {
  /* onderschrift bij foto's */
  color: white;
}
img, video {
  /* afgeronde hoeken */
  border-radius: 25px;
  /* vul de breedte van de parent */
  width: 100%;
  max-width: 400px; 
}
div.verder {
  /* witruimte boven pijlen */
  margin-top: 200px;
}
div.verder img {
  /* beperk de breedte van de pijl op brede schermen */
  max-width: 300px;
}
section {
  /* witruimte boven secties */
  margin-top: 200px;
}

/* sectie kroon */

section.kroon {
  /* achtergrondkleur */
  background-color: #289880;
}
div.kroon {
  /* dit werkt beter... waarom? */
  display: inline-block;
  /* vul de breedte van de parent */
  width: 100%;
  /* beperk de breedte op brede schermen */
  max-width: 400px; 
  /* referentiepunt voor position: absolute */
  position: relative; 
}
img.kroon {
  /* afbeelding wordt bovenop de foto gezet */
  position: absolute; 
  left: 0; /* anders staat de kroon rechts van de foto */
  bottom: 750px; /* beginpositie, bovenaan het scherm */
  transition: all 2s ease; /* bewegingssnelheid voor het easter egg */
}  
img.kroon.gekroond {
  bottom: 0px; /* afbeelding overlapt met foto */
}

/* sectie verjaardagen */

section.verjaardagen {
  background-color: #8b2958;
}

/* sectie groeten */

section.wensen {
  background-color: #d57b46;
}

img.milord {
    width: 85%;
    max-width: 600px;
    padding: 0px;
    border: 3px solid red;
    margin: 3px;
}


div.2020bril {
    max-width: 10%;
    width: 10px;
}

img.fotos2019 {
        width: 85%;
    max-width: 600px;
    padding: 0px;
    border: 3px solid blue;
    margin: 4px;
}

img.bovenkant {
    width: 50px;
    max-width: 10%;
}

img.2019foto {
    text-align: center;
}

div.bovenkant {
     text-align: left;
}

img.fotos2018 {
         width: 85%;
    max-width: 600px;
    padding: 0px;
    border: 3px solid lime;  
    margin: 4px;
}

img.foto2017 {
             width: 85%;
    max-width: 600px;
    padding: 0px;
    border: 3px solid yellow;  
    margin: 4px;
}