@font-face {
    font-family: 'mymerriweather';
    src: url('/fonts/Merriweather-Regular.otf');
  }
  



body{
  
      background-image: url(../images/background.jpg);
     
      height: 100%;
       
      background-repeat: no-repeat;
      background-size: cover;
      color: black;
      margin: 0px;
      
      
  
  }
  .links{
    margin-top: 0;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #a7cef8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
  }

  .links .alink {display: none;}
  .links .imagelogo {display: block;}
  .links a.icon {
    display: block;
    font-size: 24px;
    padding: 14px 16px;
    text-decoration: none;
    color: black;
    }


  .links.responsive {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #a7cef8;
    z-index: 9999;
    min-height: 50px;
  }
  .links.responsive .imagelogo {
    display: inline-block;
    position: relative;
    z-index: 10001;
  }
  .links.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    padding: 14px 16px;
    font-size: 24px;
    z-index: 10002;
  }
  .links.responsive .alink {
    position: fixed !important;
    display: block !important;
    background-color: #a7cef8 !important;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #333;
    right: 10px;
    width: 150px;
    z-index: 10000;
    animation: slideDown 0.3s ease;
  }
  .links.responsive .alink:nth-child(2) {
    top: 55px !important;
    animation-delay: 0s;
  }
  .links.responsive .alink:nth-child(3) {
    top: 95px !important;
    animation-delay: 0.05s;
  }
  .links.responsive .alink:nth-child(4) {
    top: 135px !important;
    animation-delay: 0.1s;
  }
  .links.responsive .alink:nth-child(5) {
    top: 175px !important;
    animation-delay: 0.15s;
  }

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h1{
    margin-top: 100px;
    font-size: 20px;
    
}
.center{
    margin-top: 17%;
    width: 200px;
}
.onder_info{
    display: flex;
    
    font-size: 90%;
    justify-content: center;
}

.flex-container{
    display: flex;
    flex-direction: column;
    margin: 0px;
    width: 100%;
    
}

.flex-container > div {
  border: none;
  margin-left: 3%;
  display: flex;
  justify-content: center;
}
.ontwerp{
    margin-top: 60%;

}
.ontwerp > h2{
  margin-left: 20px;
}
.text {
    margin-top: 10px;
    font-size: 20px;
    text-align: center;
    
  }
  .droom{ 
    margin-top: 10px;
    font-size: 1.2rem;
    text-align: start;
    
  }