@font-face {
  font-family: "SourceCodeProVF";
  src: url("/static/fonts/SourceCodePro-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

/* ===================================================================
   1) Palet-variabelen
   =================================================================== */
:root{
  --bg:#FDFDFD;--bg-donker:#E4E4E2;--bg-lichter:#C7C7C7;--text:#000000;
  --groen:#1C00CF;--geel:#836C28;--donkerblauw:#286C83;--lichtblauw:#FF252E;
  --rood:#C41A16;--oranje:#AA0D91;--paars:#4E1A7F;--grijs:#007400;
  --tip:rgba(0,0,0,0);--terminal-kleur:#0e9300;
  color-scheme:light dark;
}
html[data-theme="dark"]{
  --bg:#262628;--bg-donker:#1b1b1d;--bg-lichter:#585858;--text:#dddddd;
  --groen:#afe4af;--geel:#fcfdc6;--donkerblauw:#4c8cfc;--lichtblauw:#72cefd;
  --rood:#ef7587;--oranje:#e9be6f;--paars:#b44cd8;--grijs:#929da3;
  --tip:rgba(0,0,0,0);--terminal-kleur:#2afa15;
}

/* ===================================================================
   2) Semantische tokens
   =================================================================== */
:root{
  --surface:var(--bg);
  --surface-2:var(--bg-donker);
  --surface-3:var(--bg-lichter);
  --fg:var(--text);

  --border:color-mix(in oklab,var(--surface-3) 55%,#0000);
  --hover:color-mix(in oklab,var(--surface-2) 82%,#0000);
  --card:color-mix(in oklab,var(--surface) 88%,var(--surface-2) 12%);

  --link:var(--donkerblauw);
  --btn-bg:color-mix(in oklab,var(--surface) 75%,var(--surface-3) 25%);
  --btn-fg:var(--fg);

  --header-bg:var(--card);
  --header-border:var(--border);

  --muted:color-mix(in oklab,var(--fg) 55%,var(--surface-3) 45%);
  --code-bg:color-mix(in oklab,var(--surface-2) 85%,#0000);
  --terminal-accent:var(--terminal-kleur);
}

/* ===================================================================
   3) Reset & basis
   =================================================================== */
*{box-sizing:border-box}
html{
  font-size:16px;
  overflow-y: scroll;   /* verticale scrollbar altijd zichtbaar */
}

body{
  margin:0;background:var(--surface);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.container{
	max-width:1080px;
	margin:2rem auto;
	padding:0 1rem
}

/* ===================================================================
   4) Typografie & links
   =================================================================== */
h1,h2,h3{margin:0 0 .6rem}
h1 {text-align:center;}
h1 a{color:inherit;text-decoration:none}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--border)}

/* MD LINKS: zelfde kleur als tekst, subtiele hover */
.md p a,
.md li a,
.md ul a,
.md ol a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.md p a:hover,
.md li a:hover,
.md ul a:hover,
.md ol a:hover {
  border-bottom-color: currentColor;
  text-decoration: none;
}

/* Donker → link iets lichter dan tekst */
html[data-theme="dark"] .md p a,
html[data-theme="dark"] .md li a,
html[data-theme="dark"] .md ul a,
html[data-theme="dark"] .md ol a {
  color: color-mix(in oklab, var(--fg) 80%, blue 20%);
}

/* Licht → link iets donkerder dan tekst */
html:not([data-theme="dark"]) .md p a,
html:not([data-theme="dark"]) .md li a,
html:not([data-theme="dark"]) .md ul a,
html:not([data-theme="dark"]) .md ol a {
  color: color-mix(in oklab, var(--fg) 40%, blue 60%);
}

/* ===================================================================
   5) Buttons & Cards
   =================================================================== */
button,input,select,textarea{font:inherit}
.btn{
  border:1px solid var(--border);background:var(--btn-bg);color:var(--btn-fg);
  padding:.4rem .8rem;border-radius:10px;cursor:pointer;
}
.btn-row{display:flex;gap:.6rem;margin:.6rem 0}

.chapter-list{padding-left:1rem}
.chapter{
  background:var(--card);padding:1rem;border:1px solid var(--border);border-radius:12px;
}

/*  Buttons – editor */
.btn {
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: .4rem .8rem;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.btn:hover {
  border-color: color-mix(in oklab, var(--fg) 80%, transparent);
  background: color-mix(in oklab, var(--btn-bg) 70%, var(--surface-3) 30%);
}


/* ===================================================================
   6) Markdown code / uitvoer (generiek)
   =================================================================== */
.md pre{
  background:var(--code-bg);
  padding:.75rem;
  overflow:auto;
  border-radius:10px;
  border:1px solid var(--border);
}
.md pre code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:14px;
}

/* Inline code zonder language-class krijgt zachte bg */
.md pre:not([class*="language-"]), 
.md code:not([class*="language-"]){
  background:var(--hover);
  color:var(--fg);
}

.codebox{
  width:100%;border:1px solid var(--border);background:var(--surface);color:var(--fg);
  border-radius:10px;padding:.6rem;font-family:ui-monospace,Menlo,Consolas,monospace;
}
.output{
  min-height:2.2rem;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:.6rem;white-space:pre-wrap;
}
.hint{color:var(--muted)}
.codebox .prompt,
.md pre .prompt{
  color:var(--terminal-accent);font-weight:600;
}

/* ===================================================================
   7) Header, hamburger en drawer
   =================================================================== */
.site-header{
  position:static;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem;
  padding:.5rem 1rem;background:var(--header-bg);
}
.site-footer{
  display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;
  background:var(--header-bg);border-top:1px solid var(--header-border);border-bottom:0;margin-top:2rem;
}
.hamburger{
  width:40px;height:40px;display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  border:0;background:transparent;cursor:pointer;
}
.hamburger .bar{
  width:22px;height:2px;background:var(--fg);border-radius:1px;display:block;
}
.site-title{
  justify-self:center;margin:0;font-weight:600;text-decoration:none;color:var(--fg);
  font-size:clamp(1.9rem,1.1rem + 2vw,2.6rem);line-height:1.2;
}
.page-title{
  font-size:clamp(2rem,1.2rem + 1vw,2.6rem);
  text-align:center;margin-bottom:1.5rem;
}
.header-spacer{width:40px;height:40px}
.side-menu{
  position:fixed;inset:0 auto 0 0;width:min(280px,80vw);background:var(--surface);border-right:1px solid var(--border);
  transform:translateX(-100%);transition:transform .25s ease;z-index:1100;
}
.side-menu__inner{height:100%;overflow:auto;padding:1rem 1rem 2rem}
.menu-list{list-style:none;padding:0;margin:.5rem 0 0 0}
.menu-list li{margin:.25rem 0}
.menu-list a{
  display:block;padding:.5rem .25rem;border-radius:.5rem;color:var(--fg);text-decoration:none;
}
.menu-list a:hover,
.menu-list a:focus{background:var(--hover)}
.backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:1050;display:none;
}
body.menu-open .side-menu{transform:translateX(0)}
body.menu-open .backdrop{display:block}

/* ===================================================================
   8) Thema-toggle
   =================================================================== */
.theme-toggle{
  width:40px;height:40px;display:inline-grid;place-items:center;border:0;background:transparent;cursor:pointer;
}
.theme-icon{width:22px;height:22px;display:inline-block}
html:not([data-theme="dark"]) .theme-icon::before{content:"☀️";font-size:18px;line-height:1}
html[data-theme="dark"] .theme-icon::before{content:"🌙";font-size:18px;line-height:1}

/* ===================================================================
   9) Accordions + nested accordions
   =================================================================== */
:root{--acc-indent:1.25rem}

.md details.accordion{
  box-sizing:border-box;background:transparent;border:1px solid var(--bg-lichter);
  border-radius:16px;overflow:hidden;margin:.8rem 0;
}
.md details.accordion>summary{
  box-sizing:border-box;list-style:none;cursor:pointer;margin:0;display:grid;
  grid-template-columns:var(--acc-indent) 1fr;align-items:center;gap:.5rem;color:var(--fg);
  font-weight:600;background:var(--bg-lichter);padding:.6rem .25rem;border:0;border-radius:12px;
}
.md details.accordion>summary::-webkit-details-marker{display:none}
.md details.accordion:not([open])>summary{padding-block:.4rem}
.md details.accordion>summary::before{
  content:"▸";display:inline-block;transform:rotate(0deg);transition:transform .18s ease,color .2s ease;
  color:color-mix(in oklab,var(--fg) 70%,transparent);
}
.md details.accordion[open]>summary::before{transform:rotate(90deg);color:var(--donkerblauw)}
.md details.accordion>summary:hover{
  color:color-mix(in oklab,var(--fg) 95%,#fff 5%);
}
.md details.accordion>summary:focus-visible{
  outline:2px solid var(--donkerblauw);outline-offset:4px;border-radius:8px;
}
.md details.accordion>.accordion-body{
  box-sizing:border-box;background:transparent;padding:0;border-top:0;
}
.md details.accordion[open]>.accordion-body{
  padding:10px 12px 12px var(--acc-indent);border-top:1px solid var(--bg-lichter);
}
.md details.accordion>*:not(summary):not(.accordion-body){padding-inline-start:0}

/* nested accordions */
.md details.accordion .accordion-body>details.accordion{
  box-sizing:border-box;width:100%;margin:.5rem 0;border:1px solid var(--bg-lichter);
  border-radius:12px;background:transparent;
}
.md details.accordion .accordion-body>details.accordion>summary{
  background:var(--bg-lichter);padding:.1rem .25rem;border-top-left-radius:12px;border-top-right-radius:12px;
}

/* 9b – GENESTE ACCORDION STYLE extra borders */
.md details.accordion .accordion-body > details.accordion {
  border: 1px solid var(--text);
  border-radius: 12px;
  background: transparent;
}
.md details.accordion .accordion-body > details.accordion > summary {
  border-bottom: 1px solid var(--groen);
  background: var(--bg-lichter);
  padding: .4rem .25rem;
}
.md details.accordion .accordion-body > details.accordion[open] {
  border: 1px solid var(--groen);
}
.md details.accordion .accordion-body > details.accordion[open] > summary {
  border-bottom: 1px solid var(--groen);
}
.md details.accordion .accordion-body>details.accordion>.accordion-body{
  padding-left:var(--acc-indent);
}

/* ===================================================================
   9a) Vraag/tip/info/waarschuwing + icon
   =================================================================== */
.vraag {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--fg);
}

.icon {
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.08em;
  margin-right: 0.35em;
  display: inline-block;
}

.uitvoer {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--fg);
}

/* icoon voor uitvoer */
html:not([data-theme="dark"]) .uitvoer .icon {
  color: color-mix(in oklab, var(--groen) 80%, var(--text) 20%);
}
html[data-theme="dark"] .uitvoer .icon {
  color: color-mix(in oklab, var(--text) 20%, var(--groen) 80%);
}

/* thema-afhankelijke kleuren voor vraag-icoon */
html:not([data-theme="dark"]) .vraag .icon {
  color: color-mix(in oklab, var(--fg) 40%, blue 60%);
}
html[data-theme="dark"] .vraag .icon {
  color: color-mix(in oklab, var(--fg) 80%, blue 20%);
}

/* overige iconen */
.tip .icon        { color: var(--groen); }
.info .icon       { color: color-mix(in oklab, var(--donkerblauw) 80%, white 20%); }
.waarschuwing .icon { color: var(--rood); }

/* ===================================================================
   10) Prism thema (globaal)
   =================================================================== */
pre[class*="language-"],
code[class*="language-"]{
  --tok-comment:color-mix(in oklab,var(--grijs) 80%,var(--fg) 20%);
  --tok-punct:color-mix(in oklab,var(--fg) 75%,transparent);
  --tok-kw:color-mix(in oklab,var(--paars) 90%,var(--fg) 10%);
  --tok-func:color-mix(in oklab,var(--donkerblauw) 95%,var(--fg) 5%);
  --tok-class:color-mix(in oklab,var(--donkerblauw) 85%,var(--fg) 15%);
  --tok-string:color-mix(in oklab,var(--geel) 90%,var(--fg) 10%);
  --tok-num:color-mix(in oklab,var(--oranje) 90%,var(--fg) 10%);
  --tok-bool:var(--tok-num);
  --tok-attr:color-mix(in oklab,var(--groen) 90%,var(--fg) 10%);
  --tok-builtin:color-mix(in oklab,var(--lichtblauw) 90%,var(--fg) 10%);
  --tok-regex:color-mix(in oklab,var(--paars) 80%,var(--fg) 20%);
  --tok-del:color-mix(in oklab,var(--rood) 95%,var(--fg) 5%);
}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--tok-comment);font-style:italic}
.token.punctuation{color:var(--tok-punct)}
.token.keyword{color:var(--tok-kw);font-weight:700}
.token.function{color:var(--tok-func)}
.token.class-name,.token.constant,.token.symbol{color:var(--tok-class)}
.token.string,.token.attr-value{color:var(--tok-string)}
.token.attr-name,.token.property,.token.selector,.token.inserted{color:var(--tok-attr)}
.token.number,.token.boolean{color:var(--tok-num)}
.token.builtin,.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:var(--tok-builtin)}
.token.regex,.token.important,.token.variable{color:var(--tok-regex)}
.token.deleted{color:var(--tok-del)}
code[class*="language-"],
pre[class*="language-"]{
  text-shadow:none!important;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
}
html[data-theme="dark"] code[class*="language-"],
html[data-theme="dark"] pre[class*="language-"]{
  -webkit-font-smoothing:subpixel-antialiased;
}
html[data-theme="dark"] pre[class*="language-"]{
  background:var(--bg-donker)!important;
  border-color:color-mix(in oklab,var(--border) 85%,transparent);
}
html[data-theme="dark"] pre[class*="language-"],
html[data-theme="dark"] code[class*="language-"]{
  color:color-mix(in oklab,var(--fg) 96%,#fff 4%);
}


/* Inline code zonder language: geen blokachtergrond */
/*
.md :not(pre)>code:not([class*="language-"]){
  background:none!important;border:0!important;padding:0 .15rem!important;color:var(--donkerblauw);
}
*/

.token.operator{background:transparent!important}

/* ===================================================================
   11) Python playground (CodeFlask)
   =================================================================== */
/* Container: look + sizing (hoogte nu door JS geregeld) */
.py-playground .codeflask{
  position: relative;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;

  /* geen vaste height/min-height hier */
  height: auto;
}


/* Interne lagen: transparant; geen borders/shadows/padding */
.py-playground .CodeFlask__pre,
.py-playground .CodeFlask__code,
.py-playground .CodeFlask__textarea,
.py-playground .CodeFlask__lines{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tekstinvoerlaag: tekst onzichtbaar, caret zichtbaar */
.py-playground .CodeFlask__textarea{
  color:transparent!important; caret-color:var(--fg)!important;
  outline:none!important; resize:none; overflow:hidden;
}
@supports (-webkit-touch-callout:none){
  .py-playground .CodeFlask__textarea{
    -webkit-text-fill-color:transparent; transform:translateZ(0);
  }
}

/* Gutter */
.py-playground .CodeFlask__lines{pointer-events:none}
html[data-theme="dark"]  .py-playground .CodeFlask__lines{color:rgba(255,255,255,.45)!important}
html:not([data-theme="dark"]) .py-playground .CodeFlask__lines{color:rgba(0,0,0,.45)!important}
.py-playground .CodeFlask__lines {
  transform: translateX(-7px);
}

/* Rij onder de editor */
.py-playground .btn-row {
  display: flex;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 4rem);
  margin: .6rem 0;
}
.py-playground .btn-row .btn {
  flex: 1 1 0;
  padding: .35rem .5rem;
  font-size: 0.85rem;
}

.py-playground .output{
  border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;background:var(--code-bg);
  max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;
}

/* Containment/klikbaarheid (zeker in accordions) */
details.accordion .accordion-body{overflow:visible}
.md details.accordion>summary{position:relative;z-index:2}

/* Responsief */
@media (max-width:640px){
  .py-playground .codeflask{height:200px}
  .py-playground .output{max-height:160px}
}

/* --- Absolute caret-perfect monospace font --- */
.py-playground .CodeFlask__pre,
.py-playground .CodeFlask__code,
.py-playground .CodeFlask__textarea,
.py-playground .CodeFlask__lines,
pre[class*="language-"],
code[class*="language-"] {
  font-family: "SourceCodeProVF", monospace !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  tab-size: 4;
  -moz-tab-size: 4;
}

/* Extra algemene codeflask container (los van .py-playground) */
.codeflask .CodeFlask__pre,
.codeflask .CodeFlask__textarea,
.codeflask .CodeFlask__lines {
  top: 0;
  bottom: 0;
}

/* Scrollbar in gutter verbergen, wel scroll houden */
.CodeFlask__lines {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.CodeFlask__lines::-webkit-scrollbar {
  display: none;
}

/* In de editor: slechts één scroll-laag (textarea) */
/* Gutter en highlight-layer zelf laten NIET scrollen */
.py-playground .CodeFlask__pre,
.py-playground .CodeFlask__lines {
  overflow: hidden !important;
}
/* Textarea blijft de enige echte scrollcontainer */
.py-playground .CodeFlask__textarea {
  overflow: hidden !important;   /* laat de editor-container groeien */
  scrollbar-width: none;
}

/* ===================================================================
   12) Half-width OUTPUT code blocks (```output```)
   =================================================================== */
.md pre.is-output-block {
  position: relative;
  width: 75% !important;
  margin: 1.5rem auto !important;
  padding: 0.5rem !important;
  box-sizing: border-box;
  border-radius: 0.6rem;
}

/* ===================================================================
   13) Tabellen in Markdown
   =================================================================== */

.md table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 1rem;
  border-radius: 12px;
  overflow: hidden;                 /* zodat de radius werkt */
}

/* Cellen algemeen */
.md table th,
.md table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

/* Header: zelfde kleur als ingeklapte accordion-summary */
.md table thead th {
  background: var(--bg-lichter);
  font-weight: 900 !important;
  text-align:center !important;
}

/* Als er geen <thead> is, maar de eerste rij gebruikt th’s,
   dan ook die stylen als header */
.md table tr:first-child th {
  background: var(--bg-lichter);
}

/* Zebra-striping voor datarijen
   – we gaan uit van tbody (meeste renderers maken die aan) */
.md table tbody tr:nth-child(odd) {
  /* lichte grijstint, subtiel */
  background: color-mix(in oklab, var(--surface-3) 40%, transparent);
}

.md table tbody tr:nth-child(even) {
  background: transparent;
}

/* Extra: kleine hover voor leesbaarheid (optioneel) */
.md table tbody tr:hover {
  background: color-mix(in oklab, var(--hover) 60%, transparent);
}

p.tip {
	text-align:center;
	font-size: 1rem;
	margin:0;
	padding:0;
}

/* ===================================================================
   14) Index pagina onderwerpen lijstje
  =================================================================== */
.outer-box-index {	display:flex; ustify-content:center; }
h2#onderwerpen { text-align: center; }
div.midden1 { display: flex; justify-content: center; }
div.midden2 { display: flex; justify-content: center; align-self:center; }
div.midden2 p { text-align:center; }

@keyframes eggpulse {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.25); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.theme-toggle.secret-active {
  animation: eggpulse 0.8s ease-in-out infinite;
}



/* ===================================================================
   15) extra ruimte onder de pagina
  =================================================================== */

.container {
    padding-bottom: 300px;
}




/* ===================================================================
   16) oneindige loop - code blok weg faden - H7 / 4 
  =================================================================== */


:root {
  /* bestaande variabelen… */
  --code-bg: color-mix(in oklab,var(--surface-2) 85%,#0000);

  /* nieuw: rgb voor gradients */
  --code-bg-rgb: 38, 38, 40; /* dark theme kleur */
}

html[data-theme="light"] {
  --code-bg-rgb: 240, 240, 240;
}


/* Speciaal effect: BASIC-loop blok met fade naar beneden */
.md .basic-loop-fade pre {
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* Fade-overlay */
.md .basic-loop-fade pre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%; /* fade-bereik, pas aan naar smaak */
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(var(--code-bg-rgb), 0) 0%,
    rgba(var(--code-bg-rgb), 0.4) 40%,
    rgba(var(--code-bg-rgb), 0.7) 80%,
    rgba(var(--code-bg-rgb), 1) 100%
  );
}


/* ------------- H9 standaard python functies ---------------- */

/* wrapper: alles onder elkaar, met ruimte ertussen */
.stdlib-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* grote lijst: 2 kolommen, maar elk <li> blijft heel */
.stdlib-topics {
  list-style: none;
  margin: 0;
  padding: 0;

  /* 2 kolommen maken */
  column-count: 2;
  column-gap: 2rem;
}

/* elk blok (os, datetime, math, …) blijft als geheel in één kolom */
.stdlib-topics > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 1.5rem;
}

.stdlib-topics > li > strong {
  display: block;
  margin-bottom: 0.25rem;
}

/* binnenste lijstjes */
.stdlib-topics ul {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
}

/* knoppen als "links" */
.snippet-link {
  display: inline-block;
  margin: 0.1rem 0;
  padding: 0.15rem 0.35rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}

.snippet-link:hover {
  text-decoration: none;
}

/* editor: gewoon volle breedte onder de lijst */
.stdlib-editor {
  min-width: 0;
}

/* Op smalle schermen weer één kolom */
@media (max-width: 768px) {
  .stdlib-topics {
    column-count: 1;
  }
}

/* ------------- EINDE H9 standaard python functies ---------------- */


/* Hoofddtyuk 1 video's */

/* Container voor de twee video’s */
#video {
  margin-top: 1.5rem;
}

/* Kopjes boven de video’s */
.video-headings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 0.75rem;
}

/* Video’s naast elkaar */
.video-row {
  display: flex;
  gap: 2rem;
}

/* Video styling */
.video-row video {
  flex: 1;
  max-width: 400px;
  border-radius: 8px;
  width: 50%;
  aspect-ratio: 16 / 9;
}

.video-row video {
  background-color: #262628;
  display: block;
}


/* Responsive: onder elkaar op smalle schermen */
@media (max-width: 900px) {
  .video-headings {
    grid-template-columns: 1fr;
  }

  .video-row {
    flex-direction: column;
  }
}

/* einde Container voor de twee video’s */