:root {
    --achtgrnd_geelgroen: linear-gradient(0deg, rgba(132,231,232,1) 5%, rgba(212,160,47,1) 85%); 
    --achtgrnd_blauw: linear-gradient(90deg, rgba(101,142,194,1) 23%, rgba(210,244,242,0.9283653650528345) 77%); 
    --achtgrnd_groenraster: radial-gradient(circle, rgba(101,194,130,0.498878185565655) 23%, rgba(210,244,242,0.9283653650528345) 77%); 
    --achtergrond_2:radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(93,121,9,1) 21%, rgba(0,212,255,1) 100%);
    font-size: 18px;
}
body {
    background: rgb(245, 235, 223);
}
.kaft {
    display: grid;
    grid-template-areas: 
    'logo hoofding '
    'hoofd hoofd '
    'voet voet ';
    grid-template-rows: 11vw 1fr 6vw ;
    grid-template-columns: 15vw 1fr;
    gap: 5px;
    margin: auto;
    width:70%;   
   
}

.logo {
    grid-area: logo;
   
    background-color: #dcdcdc;
}
.hoofding {
    grid-area: hoofding;
   
    border-bottom-style:solid ;
    border-bottom-width: 1px;
    border-bottom-color: blue;
    background:var(--achtgrnd_geelgroen) ;
}
.hoofd {
    grid-area: hoofd ;
   
}
.voet {
    grid-area: voet;
    background: black;
}

.hoofding h3 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing:.8rem ;
    font-size: 1.8rem;
    color: aliceblue;
    text-shadow: 2px 2px blue;
}

.hoofding h4 {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.3rem;
}
img {
    max-width: 25%;
    height: auto;
    opacity:0.5 ;
    border-radius:15px ;
    padding: 10px;
}
.hoofd > p {
    font-size: 1.1rem;
    color:  #333399;
    font-family: 'Atma';/*font-size: 18px;*/
}
.hfdnav{
    list-style: none;
}
.hfdnav li {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 75vw;    
    text-align: center;
}


.buttonClass {
    display: block;
    font-size:1rem;
    font-family:Arial;
    width: 50%;
    padding:5px;
    border-width:1px;
    color:#757d6f;
    border-color:#b2b8ad;
    font-weight:bold;
    text-decoration: none;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
    box-shadow:inset 0px 0px 14px -3px #f2fadc;
    text-shadow:inset 0px 1px 0px #ced9bf;
    background:linear-gradient(#dbe6c4, #9ba892);
  }
  
  .buttonClass:hover {
    background: linear-gradient(#9ba892, #dbe6c4);
  }

  
.buttonClass2 {
    font-size:.9rem;
    font-family:Arial;
    width:8.5rem;
    height:2rem;
    border-width:1px;
    color:#666666;
    border-color:#dcdcdc;
    font-weight:bold;
    border-top-left-radius:.1rem;
    border-top-right-radius:.1rem;
    border-bottom-left-radius:.1rem;
    border-bottom-right-radius:.1rem;
    box-shadow:inset 0px 1px 0px 0px gray(255);
    text-shadow:inset 0px 1px 0px #ffffff;
    background:linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)
  }
  
  .buttonClass2:hover {
    background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%)
  }
   /*voor privacy 31/07/2025*/
.zichtbaar {
    display: block;
    color: #4fc54d;
    font-size: .8rem;
}
.onzichtbaar {
    display: none;
}
#wissel {

}
#divpar {
    padding:0.5rem 0.5rem ;
}

  /*#privacy {
      color: floralwhite;
      font-size: .8rem;
      text-align: center;
      padding: 5px 10px;
  }*/
  #datum {
    color: floralwhite;
    padding-left: 10px;
    font-size: .8rem;
      text-align: center;
  }


                
@media screen and (max-width : 800px){
    :root {
        font-size: 15.5px;
    }
    
    .kaft {
        width:95%;
    }
    .hoofding h3 {
        font-size: 1.5rem;
        letter-spacing: .7rem;
    }
    

}
@media screen and (max-width : 600px){
    :root {
        font-size: 12px;
    }
  
    .kaft {
        width:100%;
    }
    .hoofding h3 {
       
        letter-spacing: .5rem;
    }
    
}