
    body {
      background-color: #ca55a1;       /* paarse achtergrond */
    }

    header {
      color: rgb(69, 23, 148);                    /* gekleurde tekst */
    animation: slide 2s;              /*animatie header naar links naar rechts */
    }

    /* Slide-animatie van links naar rechts (voor header en footer) */
    @keyframes slide {
  from {
    translate: 0;
  }
  to {
    translate: 400px;
  }
}

    h1 {
      font-size: 16px;    /* Lettergrootte van h1 */
    }

    h2 {
      font-size: 16px;           /* Lettergrootte van h2 */
      color: #641a84;           /* Paarse tekstkleur */
      background-color: rgb(from rgb(151, 27, 147) r g b)      
    }

    ol {
      background-color: rgb(125, 23, 71);      /* Donkerroze achtergrond */

      display: inline-block;                /* Zorgt dat de lijst niet de hele breedte inneemt
      text-align: left;                /* Binnen de lijst links uitlijnen */
    }

    footer {
      background-color: #b7227c;          /* Donkere footer */
      color: white;                     /* Witte tekstkleur */
      animation: slide 2s;              /*animatie header naar links naar rechts */

    }

    img {
      width: 185px;    /* Breedte van de afbeelding */
      height: auto;     /* Hoogte wordt automatisch aangepast (vervormt niet) */
      border-radius: 10px;        /* Afgeronde hoeken */
      rotate: z 45deg;
      padding: 25px 1px 30px;
    }



           


.kaartje {
  width: 500px;            /* Maak het kaartje kleiner */
  padding: 15px;           /* Ruimte binnenin het kaartje */
  border-radius: 8px;      /* Afgeronde hoeken */
  text-align: center;      /* Tekst in het midden */
  margin: 50px auto;       /* Centreer het kaartje op de pagina */
  background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExdjRxa3Vid2VhN2V2Nmk5ZzV3czYyNGRnbTcxN3Jrd2d1cmltNWtwbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/OxwuhoLnIcWk0/giphy.gif');
      background-size: cover;             /* Vul heel het scherm */
      background-attachment: fixed;       /* Blijft op zijn plek bij scrollen */
      background-position: center center; /* Centraal plaatsen */
}
 
