body {
   font-family: Arial, sans-serif;
   background-color: hsl(0, 75%, 47%);
   padding: 40px;
}
h1 {
   text-align: center;
}
.logo {
   width: 200px;
}
/* FLEXBOX CONTAINER */
.container {
   display: flex;
   flex-direction: row;      /* flexbox richting */
   flex-wrap: wrap;          /* items mogen naar volgende rij */
   justify-content: center;  /* horizontaal centreren */
   align-items: flex-start;  /* boven uitlijnen */
   gap: 50px;
}
/* CONTENT BLOKKEN */
details {
   flex-basis: 300px;        /* basisbreedte */
   flex-grow: 1;             /* mag groter worden */
   padding: 50px;
   border: 5px solid rgb(0, 0, 0);
   border-radius: 5px;
   background-color: rgb(255, 61, 61);
   transition: transform 0.2s, background-color 0.2s; /* subtiele animatie */
}
summary {
   font-weight: bold;
   font-size: 18px;
   cursor: pointer;
}
.content {
   margin-top: 10px;
}
/* MOUSE OVER EFFECT */
details:hover {
   background-color: #ffffff;
   transform: scale(1.03);
}
/* FOOTER */
footer {
   margin-top: 60px;
   padding: 30px;
   background-color: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
   text-align: center;
}
footer a {
   color: rgb(0, 0, 0);
   text-decoration: none;
}
footer a:hover {
   text-decoration: underline;
}
/* AFBEELDINGEN LINKS EN RECHTS */
.logo-left {
   position: absolute;
   top: 650px;
   left: 60px;
   width: 260px;
   border: 5px solid black;
}
.logo-right {
   position: absolute;
   top: 700px;
   right: 60px;
   width: 260px;
   border: 5px solid black;
}
/* MEDIA QUERY VOOR MOBIEL */
@media (max-width: 800px) {
   .container {
       flex-direction: column;
       align-items: center;
   }