:root {
    --md-admonition-icon--youtube: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>');
    /* Primary color shades */
    --md-primary-fg-color: #94e2d5;
    --md-primary-fg-color--light:#bac2de;
    --md-primary-fg-color--dark: #a6adc8;
    --md-primary-bg-color: hsl(240deg, 21%, 15%);
    --md-primary-bg-color--light: hsl(237deg, 16%, 23%);
    --md-text-link-color: hsl(170deg, 57%, 73%);

    /* Accent color shades */
    --md-accent-fg-color: rgb(98, 18, 189);
    --md-accent-fg-color--transparent: hsla(189, 100%, 37%, 0.1);
    --md-accent-bg-color: hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
  }

[data-md-color-scheme="youtube"] {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

[data-md-color-scheme="mocha"] {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

[data-md-color-scheme="latte"] {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}
  
  .md-typeset .admonition.youtube,
  .md-typeset details.youtube {
    border-color: rgb(255, 0, 0);
  }
  .md-typeset .youtube > .admonition-title,
  .md-typeset .youtube > summary {
    background-color: rgba(255, 0, 0, 0.1);
    border-color: rgb(255, 0, 0);
  }
  .md-typeset .youtube > .admonition-title::before,
  .md-typeset .youtube > summary::before {
    background-color: rgb(255, 0, 0);
    -webkit-mask-image: var(--md-admonition-icon--youtube);
            mask-image: var(--md-admonition-icon--youtube);
  }

@media only screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 85%;
  }
  .md-footer__inner {
    max-height: 50%;
  }

}