/* User Provided Stylesheet */


/* h5p */
.H5P-embed {
  width: 100% !important;
  height: 200px !important;
}

div:has(> iframe[src*="h5p.com"]) {
  width: 100% !important;
  height: 200px !important;
}

div:has(> iframe[src*="h5p.com"]) > iframe[src*="h5p.com"] {
  width: 100% !important;
  height: 100% !important;     /* <-- key */
  display: block;              /* avoids inline gaps */
  border: 0;
  zoom: 1.0;
}

aside.admonition-h5p {
  border-color: rgb(133, 132, 132) !important; /* Important zorgt ervoor dat we over de oude stijl heen schrijven */
  background-color: rgb(255, 255, 255); /* Change background color text part*/
} 

aside.admonition-h5p > div:first-child {
  background-color: rgb(156, 154, 154);  /* Change header background color */
}

aside.admonition-h5p .myst-admonition-header-text { /* set title size */
  font-weight: 300 !important;
}

.dark aside.admonition-h5p .dark\:text-white {
   color: rgb(23 25 25); 
}

html.dark iframe[src*="h5p.com"] {
  filter: invert(1) hue-rotate(180deg) saturate(0.75) contrast(1.15) brightness(0.88);
  mix-blend-mode: plus-lighter;
} 

/* grasple exercise */
.grasple-embed {
  width: 100% !important;
  height: 500px !important;
}

div:has(> iframe[src*="embed.grasple.com"]) {
  width: 100% !important;
  height: 500px !important;
}

div:has(> iframe[src*="embed.grasple.com"]) > iframe[src*="embed.grasple.com"] {
  width: 100% !important;
  height: 100% !important;     /* <-- key */
  display: block;              /* avoids inline gaps */
  border: 0;
  zoom: 0.7;
}

aside.admonition-grasple {
  border-color: rgb(133, 132, 132) !important; /* Important zorgt ervoor dat we over de oude stijl heen schrijven */
  background-color: rgb(255, 255, 255); /* Change background color text part*/
} 

aside.admonition-grasple > div:first-child {
  background-color: rgb(156, 154, 154);  /* Change header background color */
}

aside.admonition-grasple .myst-admonition-header-text { /* set title size */
  font-weight: 300 !important;
}

.dark aside.admonition-grasple .dark\:text-white {
   color: rgb(23 25 25); 
}

.dark aside.admonition-grasple .dark\:text-white {
   color: rgb(23 25 25); 
}

html.dark iframe[src*="embed.grasple.com"] {
  filter: invert(0.93) saturate(0.75) contrast(1.15) brightness(0.88);
}

/* end grasple */


/* Code toegevoegd 17/05. Leuke kleurtjes zodat het makkelijk te zien is wat waar komt */


/* css for update date  */
#skip-to-frontmatter {
  margin-bottom: 0;
  order: -2; /* Keep the original date first */
}

.article.content.article-grid {
  display: grid;
}

.updated-date-container {
  order: -1; /* Move it visually below the date */
}

/* end update date */


/*Title color in dark mode*/
.dark aside.admonition-experiment .dark\:text-white {
   color: rgb(23 25 25); 
}

/* Parent */
aside.admonition-experiment {
  border-color: rgb(255, 0, 0) !important; /* Important zorgt ervoor dat we over de oude stijl heen schrijven */
  background-color: rgb(255, 255, 255); /* Change background color text part*/
} 

/* Title */
aside.admonition-experiment > div:first-child {
  background-color: rgb(251, 183, 183);  /* Change header background color */
}

/* Icon */
aside.admonition-experiment > div:first-child::before {
  content: "🧪";
  /* add padding left so it is not directly on the side*/
  padding-left: 0.2em;
  margin-left: 0.5em;
}

aside.admonition-experiment > div:first-child > div:first-child {
  background-color: rgb(251, 183, 183); /* changes header color of text part
  margin-left: 0 !important; /* voorkomt dubbele margin */
}

/* end of new code */

.admonition-experiment .admonition-title-experiment {
  background-color: black; /* Change header background color */
  color: #FFFFFF; /* Change header text color */
}

/* Custom icon using ::before pseudo-element */
.admonition-experiment .admonition-title-experiment::before {
  content: "🧪"; /* Use an emoji or */
  content: "\f0c3"; /* Use a FontAwesome icon code */
  font-family: "Font Awesome 5 Free"; /* If using FontAwesome */
  margin-right: 0.5em;
}

aside.admonition-experiment img {
display: block;
}



/* ADMONITION INTERMEZZO */
/* Parent */
aside.admonition-intermezzo {
  border-color: rgb(162, 0, 255) !important; 
  background-color: rgb(255, 255, 255); 
} 

/* Title */
aside.admonition-intermezzo > div:first-child {
  background-color: rgb(218, 154, 255);  
}

/* Icon */
aside.admonition-intermezzo > div:first-child::before {
  content: "📖";
  /* add padding left so it is not directly on the side*/
  padding-left: 0.2em;
  margin-left: 0.5em;
}

aside.admonition-intermezzo > div:first-child > div:first-child {
  background-color: rgb(218, 154, 255); /* changes header color of text part
  margin-left: 0 !important; /* voorkomt dubbele margin */
}

.admonition-intermezzo .admonition-title-intermezzo {
  background-color: black; /* Change header background color */
  color: #FFFFFF; /* Change header text color */
}

/* Custom icon using ::before pseudo-element */
.admonition-intermezzo .admonition-title-intermezzo::before {
  content: "📖"; /* Use an emoji or */
  content: "f518"; /* Use a FontAwesome icon code */
  font-family: "Font Awesome 5 Free"; /* If using FontAwesome */
  margin-right: 0.5em;
}

aside.admonition-intermezzo img {
display: block;
}


/* ADMONITION EXAMPLE */
/* Parent */
aside.admonition-example {
  border-color: rgb(12, 35, 64) !important; 
  background-color: rgb(255, 255, 255); 
} 

/* Title */
aside.admonition-example > div:first-child {
  background-color: rgb(0, 118, 194);  
}

/* Icon */
aside.admonition-example > div:first-child::before {
  content: "🔍";
  color:rgb(12, 35, 64)
  /* add padding left so it is not directly on the side*/
  padding-left: 0.2em;
  margin-left: 0.5em;
}

aside.admonition-example > div:first-child > div:first-child {
  background-color: rgb(0, 118, 194); /* changes header color of text part
  margin-left: 0 !important; /* voorkomt dubbele margin */
}

.admonition-example .admonition-title-example {
  background-color: black; /* Change header background color */
  color: #FFFFFF; /* Change header text color */
}

/* Custom icon using ::before pseudo-element */
.admonition-example .admonition-title-example::before {
  content: "🔍"; /* Use an emoji or */
  content: "f002"; /* Use a FontAwesome icon code */
  font-family: "Font Awesome 5 Free"; /* If using FontAwesome */
  margin-right: 0.5em;
}

aside.admonition-example img {
display: block;
}


/* dark mode white inverter */
.dark img[src$=".svg"]:not(.no-invert) {
  filter: invert(1) brightness(1);
}