@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: 1rem;
    --afstand-klein: 0.4rem;
    --afstand-mini: 0rem;
    --kleur-achtergrond: #f3efec;
    --kleur-tekst: rgb(50, 50, 50);
    --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: 2rem;
      --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 {
    text-underline-offset: 0.2rem;
    transition: 0.15s;
}

a.pijl {
    text-decoration: none;
}

a:not(:has(div)):hover {
    text-underline-offset: 0.3rem;
}

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

header {
  height: calc(var(--afstand-rand) + 40px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
}
header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
header>h1 {
    flex-grow: 1;
    justify-content: center;
    white-space: nowrap;
    height: auto;
}
header>* { width: 100%; text-align: center; height: 100%; display: flex; align-items: center;}
header>*:first-child:not(h1){justify-content: left;}
header>*:last-child:not(h1) {justify-content: right;}

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 {
    min-height: 1.8rem;
    margin-bottom: 0.4rem;
    background-color: var(--kleur-tekst);
    color: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-tekst);
    padding: var(--afstand-klein);
}

button:hover {
    cursor: url(../watermelon.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;}
  section#eerste p {
  font-size: 3rem;
}
}

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