.mdi::before {
  display: var(--fa-display,inline-block);
  line-height: 1.05;

  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* FIXME: 'fa-' is silly here, but it's what vncnt-hugo expects. */
.mdi.fa-minecraft::before {
  /* Icon downloaded from https://icon-sets.iconify.design/mdi/minecraft/ */
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath fill='black' d='M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2m2 4v4h4v2H8v6h2v-2h4v2h2v-6h-2v-2h4V6h-4v4h-4V6z'/%3E%3C/svg%3E");
  content: 'MC';  /* Never actually renders, just can't be empty */
}

/* I don't really understand the need for this one, but it helps the horizontal spacing with whatever comes next */
a.icon:has(i.mdi.fa-minecraft){letter-spacing: -.2rem;}


/* This is still a fontawesome one, but I think it's not available in the version included with vncnt-hugo */
.fab.fa-duolingo::before {
  display: var(--fa-display,inline-block);
  line-height: 1.05;
  width: 1em;
  height: 1em;
  /* Icon downloaded from https://icon-sets.iconify.design/fa7-brands/duolingo/ */
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 600 600'%3E%3Cpath fill='black' d='M536.3 294.5c10.4 88.5-43.4 172.1-128.2 199s-176.6-10.3-218.9-88.7c-72 3-137.4-39.8-163.2-105.5c-2.6-6.6-1.9-14 1.9-19.9s10.2-9.7 17.2-10.1l96.1-6l-23.8-75.9c-6.3-20-2.2-41.9 11-58.3s33.7-25 54.5-23c52.2 5 86.8 4.8 104-.6S332 80.7 371 47.1c15.9-13.7 37.7-18.5 57.8-12.7s36.1 21.3 42.4 41.4l23.6 75.2l80.8-49.7c6-3.7 13.4-4.3 19.9-1.6s11.3 8.3 12.9 15.2c16.2 68.2-12.4 140.3-72.1 179.5zM290.5 539.9c15.1 7.5 21.5 25.8 14.2 41s-25.4 21.9-40.7 14.9l-43.9-21c-15.1-7.5-21.5-25.8-14.2-41s25.4-21.9 40.7-14.9l43.8 21zm306.1-130.2c14.8 8.4 20 27.3 11.6 42.2l-23.9 42.4c-8.7 14.3-27.1 19.2-41.6 10.9s-19.9-26.6-12-41.4l23.9-42.4c4-7.1 10.7-12.4 18.6-14.6s16.3-1.2 23.4 2.9'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  content: 'D';  /* Never actually renders, just can't be empty */
}