/* Custom primary and accent colors */
:root>* {
    --md-primary-fg-color: #4b4b4b;
    /* Primary color (e.g., for headers, links) */
    --md-primary-fg-color--light: #861f4194;
    --md-primary-fg-color--dark: #ac325a;
    --md-accent-fg-color: #00aaff;
    /* Accent color (e.g., hover, buttons) */
    --md-accent-fg-color--transparent: hsla(189, 100%, 37%, 0.1);
}


/* Custom code block syntax highlighting */
:root>* {
    --md-code-fg-color: #24292e;
    --md-code-bg-color: #f6f8fa;
    --md-code-hl-color: #d2e3fc;
    --md-code-hl-number-color: #005cc5;
    --md-code-hl-string-color: #032f62;
    --md-code-hl-keyword-color: #d73a49;
    --md-code-hl-function-color: #2286c3;
    --md-code-hl-constant-color: #6f42c1;
    --md-code-hl-comment-color: #13a14a;
}


/* Optional: Customize background and text for better contrast */
:root>* {
    --md-default-bg-color: #ffffff;
    --md-default-fg-color: #212121;
    --md-code-bg-color: #f5f5f5;
}


.md-typeset {
    font-size: .7rem;
}


@media screen and (min-width: 76.25em) {
    .md-nav__item--section {
        display: block;
        margin: 2.25em 0 1.25em;
    }
}


a[href^="./"] {
    color: #065fd4;
    font-weight: bold;
}


.md-container
img,
video,
iframe {
    background: #fff;
    box-sizing: content-box;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    padding: 10px;
}


.md-container
video {
    aspect-ratio: 16/9;
}