/* --------------------------------------------
   GLOBAL STYLE
--------------------------------------------- */

body {

    display: flex;
    margin: 0;
    height: 100vh;
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    color: black;
    align-items: flex-start; /* Zorgt ervoor dat beide kolommen bovenaan starten */
}

/* --------------------------------------------
   LINKERKOLOM
--------------------------------------------- */

#left {
  position: fixed;
  top: 0;
 left: 0;
 width: 9%;
 height: 100vh;
 padding: 20px;
 overflow-y: auto;

 font-size: 13px;
 font-weight: 300;
 background: white; /* voorkomt onderliggende content */
}

/* --------------------------------------------
   RECHTERKOLOM
--------------------------------------------- */

#right {
    margin-left: 11%; /* ruimte maken voor vaste kolom */
    flex: 1;
    padding: 20px;
    font-size: 13px;
    font-weight: 300;
}

.content-max {
    max-width: 650px;
text-align: justify;
}

.content-max2 {
    max-width: 1000px;
text-align: justify;
}

.content-max2 img {
    max-width: 100%;
    height: auto;
    display: block;   /* voorkomt vreemde whitespace */
}

/* --------------------------------------------
   NAV + LINKS
--------------------------------------------- */

a.one {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

a.one:hover {
    text-decoration: underline;
    cursor: pointer;
}

.library-link:hover {
    cursor: pointer;
}


a.two {
    color: #0033cc;
    text-decoration: none;
    font-weight: 300;
}

a.two:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* --------------------------------------------
   TEKSTFORMATEN
--------------------------------------------- */

.site-title {
    font-size: 13px;
    font-weight: 300;
}

#right h4 {
    font-weight: 300;
    margin-top: 24px;
    margin-bottom: 10px;
}

/* --------------------------------------------
   PERFECTE ALIGN: titel & texts
--------------------------------------------- */




.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.column {

    max-width: 350px;
    text-align: left;

}



.column img {
    width: 350px;
margin-bottom: 5px;
    display: block;

}