:root {
  --color-bg: light-dark(hsl(0, 0%,100%), hsl(0, 0%, 0%));
  --color-bg1: light-dark(hsl(0, 0%, 93%), hsl(0, 0%, 7%));
  --color-bg2: light-dark(hsl(0, 0%, 87%), hsl(0, 0%, 13%));
  --color-bg3: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 20%));
  --color-bg4: light-dark(hsl(0, 0%, 73%), hsl(0, 0%, 27%));
  --color-bg5: light-dark(hsl(0, 0%, 67%), hsl(0, 0%, 33%));
  --color-bg6: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 40%));
  --color-bg7: light-dark(hsl(0, 0%, 53%), hsl(0, 0%, 47%));
  --color-fg: light-dark(hsl(0, 0%, 13%), hsl(0, 0%, 90%));
  --color-fg1: light-dark(hsl(0, 0%, 7%), hsl(0, 0%, 85%));
  --color-fg2: light-dark(hsl(0, 0%, 13%), hsl(0, 0%, 80%));
  --color-fg3: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
  --color-fg4: light-dark(hsl(0, 0%, 27%), hsl(0, 0%, 70%));
  --color-fg5: light-dark(hsl(0, 0%, 33%), hsl(0, 0%, 65%));
  --color-fg6: light-dark(hsl(0, 0%, 40%), hsl(0, 0%, 60%));
  --color-fg7: light-dark(hsl(0, 0%, 47%), hsl(0, 0%, 55%));
  --color-1: light-dark(hsl(187,100%, 38%), hsl(187,100%, 38%));
  --color-1a: light-dark(hsl(187, 75%, 55%), hsl(187, 85%, 36%));
  --color-1b: light-dark(hsl(187, 60%, 65%), hsl(187, 70%, 33%));
  --color-1c: light-dark(hsl(187, 45%, 80%), hsl(187, 55%, 30%));
  --color-1d: light-dark(hsl(187, 30%, 90%), hsl(187, 40%, 25%));
  --color-1y: light-dark(hsl(187, 55%, 31%), hsl(187, 45%, 80%));
  --color-2: light-dark(hsl( 69, 96%, 44%), hsl( 69, 84%, 41%));
  --color-2a: light-dark(hsl( 69, 80%, 60%), hsl( 69, 62%, 37%));
  --color-2b: light-dark(hsl( 69, 70%, 74%), hsl( 69, 48%, 31%));
  --color-2c: light-dark(hsl( 69, 60%, 82%), hsl( 69, 28%, 24%));
  --color-2y: light-dark(hsl( 69, 62%, 37%), hsl( 69, 70%, 74%));
  --color-3: light-dark(hsl( 34,100%, 55%), hsl(34, 80%, 65%));
  --color-3a: light-dark(hsl( 34, 80%, 65%), hsl( 34, 72%, 50%));
  --color-3b: light-dark(hsl( 34, 70%, 75%), hsl( 34, 62%, 44%));
  --color-3c: light-dark(hsl( 34, 60%, 83%), hsl( 34, 47%, 38%));
  --color-3d: light-dark(hsl( 34, 50%, 90%), hsl( 34, 27%, 32%));
  --color-3y: light-dark(hsl( 34, 62%, 44%), hsl( 34, 70%, 75%));
  --color-5: hsl(187, 40%, 20%);
  --color-fg-header: light-dark(hsl(187, 30%, 90%), hsl(187, 40%, 25%));
  --color-bg-header: light-dark(hsl(187, 30%, 90%), hsl(187, 20%, 10%));
  --color-fg-footer: hsl(0, 0%, 70%);
  --color-bg-footer: light-dark(hsl(187, 40%, 20%), hsl(187, 20%, 10%));
  --color-tr1: light-dark(hsl( 34, 50%, 90%), hsl( 34, 30%, 20%));
  --color-tr2: light-dark(hsl( 34, 60%, 83%), hsl( 34, 20%, 15%));
  --color-link: light-dark(hsl(187,100%, 38%), hsl(187, 60%, 60%));
  --color-link-bg: light-dark(hsl(187, 30%, 90%), hsl(187, 40%, 25%));
  --color-warn: hsl(0, 100%, 50%);
  --header-height: 80px;
  --trans-speed-1: 1s;
  --trans-speed-2: 0.5s;
}

/*** MODAL ***/

/* de modal als geheel */
.modal {
  min-width: 200px;
  max-height: 98vh;
  padding: 32px 0 0 0;
  position: fixed;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  margin: 0;
  background: var(--color-bg);
  border: 3px solid gray;
  scrollbar-color: var(--color-3b) var(--color-1c);
}

.modal-content {
  position: relative;
  scroll-margin-top: 0px;
  overscroll-behavior: contain;
}

#modal-content {
  background: var(--color-tr2);
}

/* modal met tekst */
.modal .tekst {
  width: 90vw;
  max-width: 80ch;
  max-height: calc(98vh - 64px);
  padding: 30px 10px 0px 15px;
  overflow-x: scroll;
  overflow-x: hidden;
}
.modal .tekst h2 {
  margin: 0;
  font-size: 100%;
  line-height: 1.6;
  color: var(--color-3);
}
.modal .tekst p {
  font-size: 100%;
  line-height: 1.6;
  color: var(--color-fg);
}
.modal .tekst a {
  font-weight: normal;
  color: var(--color-1y);
}
.modal .tekst b {
  color: var(--color-3);
}
.modal .tekst sup {
  font: normal 70% Tahoma;
  color: blue;
  margin-right: 2px;
}
.modal .tekst button {
  float: right;
  margin: 0;
  padding: 1px 6px;
  background: var(--color-bg5);
  border-radius: 6px;
}
.modal .tekst p + p {
  text-indent: 0;
}

/* de balk bovenaan, met X */
.pop .balk,
.modal .balk {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px; /*
  width: 100%;  */
  padding-left: 8px;
  font: bold 16px sans-serif;
  line-height: 2;
  color: white;
  background: var(--color-3);
  overflow: hidden;
}
.pop .balk a,
.modal .balk a {
  color: var(--color-1);
}

.modal .close {
  display: block;
  position: absolute;
  right: 6px;
  top: 2px;
  font: bold 120% sans-serif;
  color: #fff;
  z-index: 999;
}

/* modal met image */
.modal .image {
  padding: 16px;
  background: #fec;
}

.modal .image img {
  display: block;
  margin: 0;
  max-height: calc(98vh - 64px);
}

.modal::backdrop {
  background: #000;
  opacity: 0.75;
}

.pop {
  position: fixed;
  /*	position-anchor: --btn; */
  top: -5px; /* voorkom mouseout... */
  position-area: bottom span-right; /* end span-all; */
  position-visibility: always;
  position-try-fallbacks: flip-inline, flip-block;
  /*	top span-right, top span-left, bottom span-left; */
  position-try-order: normal;
  /*	position-try: bottom; */
  max-width: clamp(400px, 30vw, 600px);
  min-width: 25vw;
  max-height: 60vh;
  margin: 8px 0;
  padding: 8px;
  padding-top: 44px;
  line-height: 1.5;
  color: #000;
  background: #fed;
  position: relative;
}
.pop p {
  font-size: 100%;
  line-height: 1.6;
  color: var(--color-fg);
}
.pop a {
  font-weight: normal;
  color: var(--color-1y);
}
.pop b {
  color: var(--color-3);
}
.pop sup {
  font: bold 70% Tahoma;
  color: var(--color-3);
  margin-right: 2px;
}

.pop .meer {
  float: right;
  margin-right: 8px;
  color: var(--color-1);
  font-weight: bold;
}

.pop .tekst .meer {
  margin: 0 0 -8px 0;
  border: none;
}

.bref {
  margin: 0 -2px;
  padding: 0 2px;
  font-weight: inherit;
  border: 1px solid var(--color-bg3);
  border-radius: 6px;
  background: transparent;
}

.bref:hover {
  border: 1px solid var(--color-link);
  background: var(--color-1d);
}