body {
  margin: 0;
  height: 100%;
  background-image: url("achtergrond2.jpg");
  background-size: cover;
  /* vult hele scherm */
  background-repeat: no-repeat;
  /* geen herhaling */
  background-position: center;
  /* mooi gecentreerd */
  background-attachment: fixed;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


.topnav {
 background-color: rgba(111, 205, 239, 0.633);
 
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 70px;
  top: 0;
  display: flex;
  justify-content: space-between;
 
  
}

a,
button,
div {
  user-select: none;
  -webkit-user-drag: none;
  /* Chrome, Safari */
  -khtml-user-drag: none;
  /* oudere Konqueror */
  -moz-user-drag: none;
  /* Firefox (werkt niet overal) */
  -o-user-drag: none;
  /* Opera (ouder) */
}
.normal-menu{
  height: 100%;
  display: flex;
  
}

.normal-menu-link {
  float: left;
  color: rgb(255, 255, 255);
    display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 20px;  /* <-- alleen links / rechts */

  text-decoration: none;
  font-size: 21px;
}

#portfolioKop {

  height: 100%;
  
  color: rgb(255, 255, 255);  
  padding: 0 20px;  /* <-- alleen links / rechts */
  display: flex;
  align-items: center;
  justify-content: center;
  

  text-decoration: none;
  font-size: 10px;
}

.topnav a:hover {
text-decoration: underline;
}

.normal-menu-link.active {
 text-decoration: underline;
}



#topnavWisselknop {
cursor: pointer;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
 
  color: white;
  height: 100%;
  width: 50px;
 
 
  font-size: 30px;

}



 #hamburgermenu {
  display: none;
  transition: 0.5s;
  opacity: 0;
  max-height: 0px;
  pointer-events: none;
flex-direction: column;
  width: 100%;
margin-top: 70px;
  text-align: center;
  height: auto;
  z-index: 2;

}
#hamburgermenu.show{
  opacity: 1;
  max-height: 0px;
  pointer-events: all;
}

.hamburgermenu-link {
  cursor: pointer;
   background-color: rgba(111, 205, 239, 0.633);
  color: white;
  text-decoration: none;
  font-size: 24px;
  width: 100%;
  display: block;
  z-index: 3;
}

#hamburgermenuWisselknop {

  color: white;
  text-decoration: none !important;
  font-size: 24px;
  width: 100%;
  display: block;
  z-index: 3;
  padding: 0px;
  cursor: pointer;
}

.hamburgermenu-button {
  border: 2px solid rgb(255, 255, 255);
  border-radius: 10px;
position: absolute;
top: 0;
right: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 70px;
 
 height: 70px;
  color: rgb(255, 255, 255);
 
  font-size: 30px;
  cursor: pointer;
  z-index: 999;
}

.topnav, .hamburgermenu-button {
    box-sizing: border-box;
}
#hamburgermenu a:hover {
text-decoration: underline;

}



#hamburgermenu.active {
  display: block;
}









@media only screen and (max-width: 720px) {

  


  
  #hamburgermenu{
    display: flex;
  }

  .normal-menu-link {
    display: none;
  }
  .normal-menu{
    position: absolute;
top: 0;
left: 0;
  }

  .hamburgermenu-button {

    display: flex;
  }

  #topnavWisselknop {
    display: none;
    /* of flex als je wilt */
  }

}