/* User Provided Stylesheet */




/* body {
  font-family: "Roboto Slab", Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
} */

/*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) hue-rotate(180deg) saturate(0.75) contrast(1.15) brightness(0.88);
  mix-blend-mode: plus-lighter;
}

#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 */
}


.footer {
  /* Make footer "sticky" to page bottom (also the above flex rules), per
   * the flexbox strategy described here:
   * 	https://css-tricks.com/couple-takes-sticky-footer/#aa-there-is-flexbox
   * and here:
   *    https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
   * This solution does not require hardcoding a fixed footer height in the
   * style rules.
   */
  flex-shrink: 0;
  background: #0C2340;
  color: white;
  padding-left: 2rem;
  padding-right: 2rem;

  padding-left: 3.5rem;
  padding-right: 3.5rem;

  /* Outer content grid */
  & .outer-grid {
    /* spacer, project description, spacer, link columns, spacer */
    grid-template-columns: 3fr 3fr 4fr;
    align-items: center;
    margin-bottom: 0rem;

    & li {
      list-style: none;
    }
  }

  @media (max-width: 640px) {
    & .outer-grid {
      grid-template-columns: 1fr;
      justify-items: start;
    }
  }

  /* Heading colours */
  & a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: white;
  }

  & h1 {
    font-size: 1.25rem;
    font-weight: bold;
  }
}