/* https://www.w3schools.com/howto/howto_css_icon_bar.asp */
/* https://www.w3schools.com/howto/howto_js_navbar_shrink_scroll.asp */
/* Stijlen voor de menubalk */

/* # wordt gebruikt om een specifiek HTML-element te selecteren op basis van zijn id-attribuut. 
Bijvoorbeeld,als je een element hebt met id="header",zou je het kunnen selecteren met #header in CSS.

. wordt gebruikt om elementen te selecteren op basis van hun class-attribuut. 
Als je bijvoorbeeld een element hebt met class="button",zou je het kunnen selecteren met .button in CSS. */:root {
    --lichtblauw:#0097c5;
    --donkerblauw:#045872;
    --wit:#ffffff;
    --grijswit:#ffffffd0;
  }
  .logo {
    position:absolute;
    width:120px;
    height:auto;
    top:0px;
    left:5px;
    z-index:1000;
  }
  #navbar {
    background-color:var(--lichtblauw);
    overflow:hidden;
    padding:10px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:20px;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    color:#ffffff;
  }
  footer {
    position:fixed;
    bottom:0;
    left:20px;
    right:20px;
    margin-left:auto;
    margin-right:auto;
    background-color:var(--lichtblauw);
    color:#ffffff;
    text-align:center;
    border-radius:20px;
  }
  .menu {
    display:flex;
    justify-content:flex-end;
    align-items:center;
  }
  .menu a {
    color:var(--wit);
    text-align:center;
    padding:10px 20px;
    text-decoration:none;
    border-radius:20px;
    transition:background-color 0.3s ease;
  }
  .menu a:hover {
    background-color:var(--donkerblauw);
  }
  /* Stijlen voor verticale weergave van de menubalk op kleine schermen */
  @media screen and (max-width:768px) {
    #navbar {
    flex-direction:column;
    /* Zet de richting van de flex container naar kolom */
          align-items:stretch;
    /* Rek de items uit om de volledige breedte in te nemen */
  }
  .menu {
    flex-direction:column;
    /* Zet de richting van de flex container naar kolom */
          justify-content:flex-start;
    /* Begin aan de bovenkant van de container */
          align-items:stretch;
    /* Rek de items uit om de volledige breedte in te nemen */
  }
  .menu a {
    padding:10px;
    /* Aanpassen van de padding voor verticale lay-out */
          margin-bottom:5px;
    /* Ruimte tussen knoppen toevoegen */
  }
  }#menuButtonIcon {
    color:white;
    font-size:24px;
    margin-left:20px;
    cursor:pointer;
    transition:color 0.3s ease;
  }
  #menuButtonIcon:hover {
    transition:background-color 0.3s ease;
    background-color:var(--donkerblauw);
  }