@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;}

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

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

h1 {
  font-size: 2.8rem;
}
h1, h2, section#eerste p {
    font-family: var(--font-schrift); font-weight: 400;
}
h1, h2, h3 {
  font-family: var(--font-tekst);
}
h2 {font-size: 2rem; text-transform: uppercase;}
p, label, ::placeholder {font-family: var(--font-montserrat); font-size: 1rem;}

button:hover {
    cursor: url(../dove.cur), pointer;
    background-color: var(--kleur-tekst);
    color: var(--kleur-achtergrond);
}

a:hover, input:hover, textarea:hover, label {
  cursor: url(../dove.cur), pointer;
}

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

.error {
  color: red;
  font-weight: bold;
}