body {
  margin: 0; 
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
}

.hoofdkop {
    position: relative;
    z-index: 1;
    text-align: center;
    top: 250px;
    font-size: 100px;
    font-weight: bold;
    font-family: blank river;
    src: url(Blank\ River.ttf);

}

.uitleg {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 75%;
    top: 420px;
    font-size: large;
    font-weight: bold;
    font-family: monospace;
    color: white;
    
    
}

mark {
    color: white;
    background-color: black;
    border-radius: 5px;
}

.slideshow-container {
    max-width: 1000px;
    position: fixed;
    left: 50%; 
    transform: translate( -50%);
    top: 200px;
    

  }

  
  .active {
    background-color: #717171;
  }
  
  
  .fade {
    animation-name: fade;
    animation-duration: 2.5s;
  }
  
  @keyframes fade {
    from {opacity: .5} 
    to {opacity: 1}
  }
  
  
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }

.slideimg {
    border-radius: 40px;
    z-index: -2;
}

.blackbox_2 {
    position: fixed;
    width: 600px;
    height: 400px;
    left: 50%; 
    transform: translate( -50%);
    top: 200px;
    z-index: 0;
    background-color: black;
    border-radius: 40px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: .3;  
}