@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Pacifico&display=swap');
.achtergrondasfalt {background-image: url('../images/patronen/asfalt-dark.png');}
    
ol {
    list-style: url('../images/ol-potlood-klein.svg');
}    
        
.title1{
    -webkit-text-stroke: 1px #000;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    font: 45px/45px Concert One; color:#fff;
} 
  
.title2{
    -webkit-text-stroke: 1px #000;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    font: 35px/35px Concert One; color:#fff;
} 
    
.minis-menu {
    float: left;
    margin: auto;
    margin-bottom: 3%;
    padding: 1%;
    border-radius: 10px 10px 10px 10px;
    cursor: pointer;
    
    -webkit-text-stroke: 1px #000;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.1),
    0px 18px 23px rgba(0,0,0,0.1);
    font: 45px/45px Concert One; color:#fff;
    text-align: center
    
} 
    
.minis-menu:hover {
    color:#ff0000;
} 
    
.minis-menu img{
    width: 100%;
    height: auto;
    border: 0.2em solid #fc9b38;
    border-radius: 10px 10px 10px 10px;
    -webkit-filter: grayscale(100%); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(100%); /* Microsoft Edge and Firefox 35+ */
}

.minis-menu img:hover {
    box-shadow: 0 0 16px 6px #faa83d;
    -webkit-filter: grayscale(0%); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(0%); /* Microsoft Edge and Firefox 35+ */
}
    

.nav-bar {
  background-color: #0b2d50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);

  position: fixed;     /* maakt de balk vast op het scherm */
  top: 0;              /* bovenaan de pagina */
  left: 0;
  width: 100%;         /* volledige breedte */
  z-index: 1000;       /* zorgt dat ze boven andere elementen blijft */
    
    opacity: 0;                 /* onzichtbaar bij start */
  pointer-events: none;       /* geen klikbare elementen zolang verborgen */
  transition: opacity 0.4s ease;
}
.nav-bar.visible {
  opacity: 1;
  pointer-events: auto;
}
    
.menu-wrapper {
  background-color: #ffcd00; /* kleur enkel achter menu */
  padding: 5px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.menu-dropdown {
  background-color: white;
  color: #0b2d50;
  font-size: 1rem;
    font-family: "Cabin Sketch", sans-serif;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.menu-dropdown:hover {
  box-shadow: 0 0 5px rgba(0, 170, 255, 0.6);
}

.menu-dropdown:focus {
  outline: none;
  box-shadow: 0 0 5px #00aaff;
}
    
/* --- MEDIA QUERY voor kleine schermen --- */
@media (max-width: 768px) {
  .nav-bar {
    flex-direction: column;   /* zet logo/hamburger en menu onder elkaar */
    align-items: center;
    padding: 10px 0;
      top:30;
  }

  .menu-wrapper {
    order: -1;               /* zet het dropdownmenu bovenaan */
    margin-bottom: 10px;
  }