body,html{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
}
.clr,.clearfix{
    clear:both;
}
.element-invisible{
    display: none;
}
a, a:visited{
    text-decoration: none;
    color: inherit
}
img{
    border:0;
    margin:0;
    padding:0;
}
.left{
    float:left;
}
.right{
    float:right;
}
.left-align{
    text-align: left;
}
.center-align{
    text-align: center;
}
.right-align{
    text-align: right;
}

/* #Images
================================================== */

img {
  max-width: 100%;       /* Blijft netjes binnen de container */
  max-height: 80vh;      /* Maximale hoogte is 100% van het beeldscherm */
  height: auto;           /* Behoudt de juiste verhoudingen */
  object-fit: contain;    /* Voorkomt dat de afbeelding vervormt */

}



/* ikke
================================================== */
#header{
    border-bottom: 1px solid black;
}

#about{
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    background-color: black;
    color: white;
    padding: 10px 0;
}

#uitleg, #underlay{
    padding: 50px 0 50px;
    max-width: 500px;
    margin: 0 auto;
}

p{
    font-size: 11px;
}
.referentie{
    font-size: 11px;
    margin: 10px 0 0;
}

#works-container {
  display: flex;
  flex-direction: column-reverse; /* Draait de volgorde van de child-elementen visueel om */
}

/* Oneven items (1, 3, 5, ...) */
#works-container > div:nth-child(odd) {
  background-image: linear-gradient(to bottom, #e5e5e5 50%, #ffffff 50%);
  border-bottom: 1px solid #e5e5e5;
}

/* Even items (2, 4, 6, ...) */
#works-container > div:nth-child(even) {
  background-image: linear-gradient(to bottom, #ffffff 50%, #e5e5e5 50%);
  border-bottom: 1px solid white;
}

.works-item{
    padding: 50px 0 50px;
}

.werkstuk{
    padding: 30px 0 30px;
}

.nummer{
    font-style: italic;
}
.datum{
    font-size: 12px;
}

.player{
    width: 75%;
}