.negeer {cursor: url(../belgie.cur), auto;}
#nl {cursor: url(../nederlands.cur), auto;}
#fr {cursor: url(../frans.cur), auto;}
#eng {cursor: url(../engels.cur), auto;}



h1, h2, h3 {font-weight: 400;}
img {
    max-width: 100%;
    max-height: calc(100%);
    line-height: 0;
    object-fit: contain;
}

div#kaart {
    width: calc(100%);
    height: calc(100%);
    position: relative;
    border: 1px solid var(--kleur-tekst);
}

section {
    position: absolute;
    padding: calc(var(--afstand-rand));
    height: calc(100% - 2 * var(--afstand-rand));
    width: calc(100% - 2 * var(--afstand-rand));
    top: var(--afstand-rand);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

section:last-of-type {
  padding-bottom: calc(2*var(--afstand-rand));
}

span {
  text-align: center;
}
#kanten>img{position: absolute; height: calc((var(--afstand-rand) * 2) - var(--afstand-klein));}
#kanten>img:nth-of-type(1) {top: var(--afstand-rand); left: 50%; translate: -50% -50%;}
#kanten>img:nth-of-type(2) {right: var(--afstand-rand); top: 50%; translate: 50% -50%; transform: rotate(90deg);}
#kanten>img:nth-of-type(3) {bottom: var(--afstand-rand); left: 50%; translate: -50% 50%;}
#kanten>img:nth-of-type(4) {top: 50%; left: var(--afstand-rand); translate: -50% -50%;  transform: rotate(90deg);}


section {
    display: none;
}

p {
    text-align: center;
}

/* section img {

  -webkit-mask-image: 
    linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 2rem),
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 2rem),
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 2rem),
    linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 2rem);

  mask-image: 
    linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1) 2rem),
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 2rem),
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 2rem),
    linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1) 2rem);

  -webkit-mask-composite: source-in;

} */


a {
  color: var(--kleur-tekst);
  text-decoration: underline;
}

div#buttons {
    z-index: 20;
    position: absolute;
    bottom: calc( var(--afstand-rand) + var(--afstand-klein));
    left: 50%;
    translate: -50% 0%;
    width: calc(100% - 2 * var(--afstand-klein) - 2 * var(--afstand-rand));
    max-width: 400px;

    display: flex;
    justify-content: space-around;
}

button {
  touch-action: manipulation; /* reduces default double-tap zoom */
}

button {
    width: 120px;
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    border: 1px solid var(--kleur-tekst);
    cursor: pointer;
    font-size: 14px;
    text-transform: lowercase;
    letter-spacing: 2px;
    padding: var(--afstand-klein);
}

sup {    font: small-caption;}


/* button:active {
    box-shadow:
        inset -1px -1px #fff,
        inset 1px 1px #292929,
        inset -2px -2px #ffffff,
        inset 2px 2px rgb(158, 158, 158);
    background-color: none;
} */

div#kaart img {
  position: absolute;
  top: var(--afstand-rand);
  right: 50%;
  translate: 50% 0;
  width: 15%;
  max-width: 69px;
}