@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=block');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=block');
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rouge+Script&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=block');

*, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body, section {
  cursor: url("blueflowers.cur"), pointer;
  touch-action: manipulation;
}

body, section {
    cursor: url("blueflowers.cur"), pointer; /* makes Safari treat it as interactive */
}

:root {
    --afstand-rand: 1.4rem;
    --afstand-klein: 0.4rem;
    --afstand-mini: 0rem;
    --kleur-achtergrond: #f3efec;
    --kleur-tekst: rgb(25, 25, 25);
    --font-tekst: "Italiana", sans-serif;
    --font-schrift: "Rouge Script", cursive;
    --font-josefin: "Josefin Sans", sans-serif;
    --font-montserrat:  "Montserrat", sans-serif;
  }

@media screen and (min-width: 800px) {
  :root {
      --afstand-rand: 3rem;
      --afstand-klein: 0.8rem;
      --afstand-mini: 0rem;
  }
}

::-webkit-scrollbar {
  width: var(--afstand-mini);
}

::-webkit-scrollbar-track {
  background: #ffffff; /* dark background */
  border-radius: var(--afstand-mini);
}

::-webkit-scrollbar-thumb {
  background: rgb(151, 155, 37);
  border-radius: var(--afstand-mini);
}

html {font-family: "Source Serif 4", serif; color: var(--kleur-tekst); cursor: url(blueflowers.cur), auto;}
.negeer {cursor: url(belgie.cur), auto;}
#nl {cursor: url(nederlands.cur), auto;}
#fr {cursor: url(frans.cur), auto;}
#eng {cursor: url(engels.cur), auto;}

a:hover {text-decoration-style: wavy;}

h1 {
  font-size: 2.8rem;
}
h1, h2, section#eerste p {
    font-family: var(--font-schrift); font-weight: 400;
}

section#eerste p {
  font-size: 2.4rem;
}
h1, h2 {
  font-family: var(--font-tekst);
}
h2 {font-size: 2rem; text-transform: uppercase;}
p {font-family: var(--font-montserrat); font-size: 1.1rem;}

@media screen and (min-width: 500px) {
  p {font-size: 1.6rem;}
  h2 {font-size: 2.6rem;}
  h1 {
    font-size: 4rem;
  }
  section#eerste p {
  font-size: 3rem;
}
}

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

body {
    width: 100vw;
    height: 100svh;
    overflow-x: hidden;
    overflow-y: hidden;
padding: var(--afstand-rand);
    background-color: var(--kleur-achtergrond);
}

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:hover {
    cursor: url(dove.cur), pointer;
  background-color: var(--kleur-tekst);
  color: var(--kleur-achtergrond);
}

/* 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;
}