@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
  font-family: "Saira", sans-serif;
}

html, body {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #86A3C3;
}

body {
  --sannes-blue:#1b75b3;
  --hoofdKleur:#37332f;
  --achtergrondKleur:#e1ddd9;
  --achtergrondKleur90:white;
  --middenkleur:#b4aaa0;
  --linkKleur:var(--sannes-blue);
  --linkVisited:#8040bf;
  --linkActive:crimson;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--hoofdKleur);
  background-color: var(--achtergrondKleur);
}

@media (prefers-color-scheme: dark) {
  body {
    --hoofdKleur:#e1ddd9;
    --achtergrondKleur:#333333;
    --achtergrondKleur90: #404040;
    --middenkleur:#595959;
  }
}
/* links en P */
a, p {
  font-weight: 500;
}

a {
  margin-right: 0.25em;
  cursor: url("../images/jo-annie.png") 24 24, auto;
  color: var(--linkKleur);
}

a:visited {
  color: var(--linkVisited);
}

a:active {
  color: var(--linkActive);
}

/* controls */
button, input, select, button {
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background-color: inherit;
}

input[type=radio] {
  margin: 0;
  cursor: pointer;
}

input[type=radio] + label {
  cursor: pointer;
}

input[type=range] {
  --rangeTrackMaat:.6em;
  --rangeThumbMaat:1.2em;
  --rangeThickHeight:clamp(.25em, calc( (var(--rangeThumbMaat) - var(--rangeTrackMaat)) / 2 ), .5em);
  --rangeThickHeightSub:calc(var(--rangeThickHeight) / 3);
  --rangeThickMaat:1px var(--rangeThickHeight);
  --rangeThickMaatSub:1px var(--rangeThickHeightSub);
  --rangeThickFill:linear-gradient(var(--middenkleur),var(--middenkleur));
  --rangeThickTop:calc(50% + (var(--rangeTrackMaat) + var(--rangeThickHeight)) / 2);
  --rangeThickTopSub:calc(50% + (var(--rangeTrackMaat) + var(--rangeThickHeightSub)) / 2);
  -webkit-appearance: none;
  position: relative;
  height: max(var(--rangeTrackMaat) + 0.5em, var(--rangeThumbMaat));
  margin: 0;
  padding: 0;
  color: var(--hoofdKleur);
  background-color: transparent;
  /* rangeTicks */
  background-image: var(--ticksImages);
  background-size: var(--ticksSizes);
  background-position: var(--ticksPositions);
  background-repeat: no-repeat;
  cursor: ew-resize;
  display: flex;
  align-items: center;
}

/* rangeTrack */
input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: var(--rangeTrackMaat);
  color: var(--hoofdKleur);
  background-color: var(--achtergrondKleur90);
  /* rangeProgress */
  background-image: linear-gradient(to right, var(--sannes-blue) calc(var(--rangeThumbMaat) / 2 + (var(--val) - var(--min)) / (var(--max) - var(--min)) * (100% - var(--rangeThumbMaat))), transparent 0%);
  box-shadow: inset 0 0 0 1px var(--middenkleur);
  border-radius: calc(var(--rangeThumbMaat) / 2);
}

input::-moz-range-track {
  -webkit-appearance: none;
  height: var(--rangeTrackMaat);
  color: var(--hoofdKleur);
  background-color: var(--achtergrondKleur90);
  /* rangeProgress */
  background-image: linear-gradient(to right, var(--sannes-blue) calc(var(--rangeThumbMaat) / 2 + (var(--val) - var(--min)) / (var(--max) - var(--min)) * (100% - var(--rangeThumbMaat))), transparent 0%);
  box-shadow: inset 0 0 0 1px var(--middenkleur);
  border-radius: calc(var(--rangeThumbMaat) / 2);
}

/* rangeProgress - is nu onderdeel van rangeTrack */
input::-moz-range-progress {
  display: none;
}

/* rangeThumb */
input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--rangeThumbMaat);
  height: var(--rangeThumbMaat);
  background-color: var(--sannes-blue);
  border: none;
  border-radius: 50%;
  transform: translateY(calc((var(--rangeThumbMaat) - var(--rangeTrackMaat)) / -2));
}

input::-moz-range-thumb {
  -webkit-appearance: none;
  width: var(--rangeThumbMaat);
  height: var(--rangeThumbMaat);
  background-color: var(--sannes-blue);
  border: none;
  border-radius: 50%;
}

/* select */
select {
  background-color: var(--achtergrondKleur90);
}

/**********/
/* opties */
/**********/
/* button */
body > button {
  --focusKleur:forestgreen;
  position: fixed;
  width: 1.75em;
  height: 1.75em;
  right: 0.25em;
  top: 0.25em;
  padding: 0;
  z-index: 4;
  border: none;
  appearance: none;
  opacity: 0.125;
  transform: rotate(90deg);
  transition: color 0.75s 0.25s, opacity 0.75s 0.25s, transform 0.5s 0.5s;
}

body.opties > button {
  --focusKleur:crimson;
  opacity: 1;
  transform: rotate(270deg);
}

body > button:hover,
body > button:focus {
  color: var(--focusKleur);
  opacity: 1;
}

/* teller */
body > output {
  position: fixed;
  right: 0.25em;
  bottom: 0.25em;
  font-size: 0.67em;
}

/* formulier */
form {
  --witruimte:1em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  max-height: 100%;
  margin: 0;
  padding: var(--witruimte);
  overflow: auto;
  z-index: 3;
  background-color: inherit;
  box-shadow: 0 0.375em 0 rgba(54, 51, 48, 0.2);
  display: grid;
  grid-gap: calc(var(--witruimte) * 1.5);
  align-content: flex-start;
  transition: transform 1s;
  transform: translateY(calc(-100% - 1em));
}

body.opties form {
  transform: translateY(0);
}

/* fieldsets */
fieldset {
  margin: 0;
  padding: 0;
  border: none;
  transition: filter 2s;
}

fieldset:disabled {
  filter: grayscale(1);
}

legend {
  padding: 0;
  font-weight: 600;
}

fieldset div {
  display: grid;
  grid-column-gap: 0.25em;
  align-items: center;
}

fieldset:first-of-type div {
  grid-template-columns: max-content 1fr;
}

fieldset:not(:first-of-type) div {
  grid-template-columns: 1fr 1.125em;
}

/* labels en inputs */
input[type=radio] {
  font-size: 2em;
}

input[type=range] {
  display: inline-block;
  min-width: 8em;
  transform: translateY(-0.375em);
}

input[type=range] + output {
  display: inline-block;
  text-align: center;
  transform: translateY(-0.375em);
}

input + label {
  line-height: 1.625em;
}

fieldset:not(:first-of-type) label {
  grid-column: 1/-1;
}

fieldset:not(:first-of-type) label::after {
  content: ":";
}

select {
  grid-column: 1/-1;
  scroll-snap-type: y mandatory;
  font-size: 1em;
}

select optgroup {
  font-weight: 500;
}

select option {
  scroll-snap-align: end;
}

label output {
  margin-left: 0.25em;
  vertical-align: baseline;
}

output button {
  position: relative;
  display: inline-block;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 0 1px;
  appearance: none;
  background-color: transparent;
  border: none;
  transition: opacity 0.5s;
}

output button.verwijder {
  opacity: 0;
}

output button:hover::after,
output button:focus::after {
  content: "❌";
  position: absolute;
  width: 1em;
  height: 1em;
  line-height: 1em;
  right: 0.25em;
  top: 0.25em;
  font-size: 0.5em;
  color: crimson;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

@media (min-width: 22em) {
  fieldset:not(:first-of-type) div {
    grid-template-columns: max-content 1fr 1.125em;
  }
  fieldset:not(:first-of-type) label {
    grid-column: 1;
  }
  input[type=range], input[type=range] + output {
    transform: translateY(0);
  }
}
@media (min-width: 30em) {
  form {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: calc(var(--witruimte) * 2.5);
    grid-row-gap: calc(var(--witruimte) * 1.5);
  }
  fieldset:first-of-type {
    grid-row: span 3;
  }
  fieldset:first-of-type div {
    height: 100%;
    grid-template-rows: repeat(6, max-content) 1fr;
  }
  select {
    align-self: stretch;
  }
  fieldset:not(:first-of-type) div {
    grid-template-columns: 1fr 1.125em;
  }
  fieldset:not(:first-of-type) label {
    grid-column: 1/-1;
  }
  input[type=range], input[type=range] + output {
    transform: translateY(-0.375em);
  }
}
@media (min-width: 44em) and (min-height: 54em), (min-width: 68em) and (min-height: 36em), (min-width: 84em) and (min-height: 30em) {
  form {
    box-shadow: none;
    z-index: 0;
  }
}
@media (min-width: 44em) {
  fieldset:not(:first-of-type) div {
    grid-template-columns: max-content 1fr 1.125em;
  }
  fieldset:not(:first-of-type) label {
    grid-column: 1;
  }
  input[type=range], input[type=range] + output {
    transform: translateY(0);
  }
}
@media (min-width: 50em) {
  form {
    grid-template-columns: 24em 1fr;
  }
  fieldset:first-of-type div {
    grid-template-columns: max-content 9em 1fr;
    grid-template-rows: repeat(6, max-content) 1fr;
  }
  select {
    grid-column: 3;
    grid-row: 1/-1;
    margin-left: 0.5em;
  }
}
@media (min-width: 68em) {
  form {
    grid-template-columns: 24em repeat(3, minmax(auto, 14em));
    grid-template-rows: auto;
    justify-content: center;
  }
  fieldset:first-of-type {
    grid-row: span 1;
  }
  fieldset:not(:first-of-type) div {
    grid-template-columns: 1fr 1.125em;
    grid-row-gap: 0.125em;
  }
  fieldset:not(:first-of-type) label {
    grid-column: 1/-1;
  }
  input[type=range], input[type=range] + output {
    transform: translateY(-0.375em);
  }
}
/**************/
/* een bullet */
/**************/
body > div {
  --width:1;
  --height:1;
  position: absolute;
  width: calc(var(--width) * 1em);
  height: calc(var(--height) * 1em);
  left: calc(var(--posx) * 1px - var(--width) * 0.5em + var(--deltax) * -1em);
  z-index: 10000;
  font-size: 3em;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  user-select: none;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: draai calc(var(--duur) * 1s) ease-out, opneer calc(var(--duur) * 1s), vaaguit calc(var(--duur) * 1s) ease-in;
}

@keyframes draai {
  0% {
    transform: rotate(0) translatex(calc(var(--deltax) * 1em)) rotate(0);
  }
  100% {
    transform: rotate(calc(var(--richting) * -0.5turn)) translatex(calc(var(--deltax) * 1em)) rotate(calc(var(--rotaties) * var(--draairichting) * 1turn));
  }
}
@keyframes opneer {
  0% {
    top: calc(var(--posy) * 1px - var(--width) * 1em);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }
  30% {
    top: calc(var(--posy) * 1px - (var(--width) + var(--deltay)) * 1em);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  100% {
    top: 100%;
  }
}
@keyframes vaaguit {
  0%, 60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}