/* Override header background */
.md-header {
    background-color: #000 !important;
}

@media screen and (max-width: 76.2344em) {
    .md-nav--primary .md-nav__title[for="__drawer"] {
        background-color: #000 !important;
    }
}

img[alt="Graphite Logo"] {
    display: block;
    margin: auto;
    width: 100%;
    min-width: 200px;
    max-width: 520px;
}

/* Custom colors */
:root>* {
    /* binome's colors */
    --binome_pink: #F21CA6;
    --binome_pink-dark: #D61A8A;
    --binome_purple: #8157CA;
    --binome_purple-dark: #6A4FA3;
    --binome_teal: #08F2DB;
    --binome_teal-dark: #06D6B0;
    --binome_light-pink: #F9D6E8;
    --binome_light-teal: #D6F9F2;
    --binome_light-purple: #CDC2E0;
    --binome_obsidian: #181818;

    --md-primary-fg-color: var(--binome_pink);
    --md-primary-fg-color--light: var(--binome_light-pink);
    --md-primary-fg-color--dark: var(--binome_pink-dark);

    --md-accent-fg-color: var(--binome_pink);
    --md-accent-fg-color--light: var(--binome_light-pink);
    --md-accent-fg-color--dark: var(--binome_pink-dark);
}

[data-md-color-scheme="slate"] {
    --md-default-bg-color: var(--binome_obsidian);
}

/* .md-typeset {
    h1, h2, h3 {
        color: var(--binome_purple);
    }
} */

@media screen and (min-width: 76.2344em) {
    .md-nav label[tabindex=""] span, .md-nav__title {
        opacity: 0.5;
        margin-left: -8px;
    }
}

p code, li code {
    color: #FF4689 !important
}