/* Switch Components */
.md-typeset .mdx-switch button {
    cursor: pointer;
    transition: opacity .25s;
}

.md-typeset .mdx-switch button:focus,
.md-typeset .mdx-switch button:hover {
    opacity: .75;
}

.md-typeset .mdx-switch button > code {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
    display: block;
}

/* Deprecated Elements */
.md-typeset .mdx-deprecated {
    opacity: .5;
    transition: opacity .25s;
}

.md-typeset .mdx-deprecated:focus-within,
.md-typeset .mdx-deprecated:hover {
    opacity: 1;
}

/* Column Layouts */
.md-typeset .mdx-columns ol,
.md-typeset .mdx-columns ul {
    -moz-columns: 2;
    column-count: 2;
}

@media screen and (max-width: 29.9375em) {
    .md-typeset .mdx-columns ol,
    .md-typeset .mdx-columns ul {
        -moz-columns: initial;
        columns: initial;
    }
}

.md-typeset .mdx-columns li {
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

/* Author Components */
.md-typeset .mdx-author {
    display: flex;
    font-size: .68rem;
}

.md-typeset .mdx-author img {
    border-radius: 100%;
    height: 2rem;
}

.md-typeset .mdx-author p:first-child {
    flex-shrink: 0;
    margin-right: .8rem;
}

.md-typeset .mdx-author p > span {
    display: block;
}

/* Container Styling */
.mdx-container {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,
                linear-gradient(to bottom, var(--md-primary-fg-color), #30b67e 99%, var(--md-default-bg-color) 99%);
    padding-top: 1rem;
}

/* Dark Mode Container */
[data-md-color-scheme=slate] .mdx-container {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,
                linear-gradient(to bottom, var(--md-primary-fg-color), #30b67e 99%, var(--md-default-bg-color) 99%);
}

/* Hero Section */
.mdx-hero {
    color: var(--md-primary-bg-color);
    margin: 0 .8rem;
}

.mdx-hero h1 {
    color: currentColor;
    font-weight: 700;
    margin-bottom: 1rem;
}

@media screen and (max-width: 29.9375em) {
    .mdx-hero h1 {
        font-size: 1.4rem;
    }
}

.mdx-hero__content {
    padding-bottom: 6rem;
}

/* Large Screen Hero Layout */
@media screen and (min-width: 60em) {
    .mdx-hero {
        align-items: stretch;
        display: flex;
    }
    
    .mdx-hero__content {
        margin-top: 3.5rem;
        max-width: 19rem;
        padding-bottom: 14vw;
    }
    
    .mdx-hero__image {
        order: 1;
        transform: translateX(4rem);
        width: 38rem;
    }
}

@media screen and (min-width: 76.25em) {
    .mdx-hero__image {
        transform: translateX(8rem);
    }
}

/* Hero Buttons */
.mdx-hero .md-button {
    color: var(--md-primary-bg-color);
    margin-right: .5rem;
    margin-top: .5rem;
}

.mdx-hero .md-button:focus,
.mdx-hero .md-button:hover {
    background-color: var(--md-accent-fg-color);
    border-color: var(--md-accent-fg-color);
    color: var(--md-accent-bg-color);
}

.mdx-hero .md-button--primary {
    background-color: var(--md-primary-bg-color);
    border-color: var(--md-primary-bg-color);
    color: #3618a3;
}

/* Icon Search Component */
.md-typeset .mdx-iconsearch {
    background-color: var(--md-default-bg-color);
    border-radius: .1rem;
    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .1),
                0 .025rem .05rem rgba(0, 0, 0, .1);
    position: relative;
    transition: box-shadow 125ms;
}

.md-typeset .mdx-iconsearch:focus-within,
.md-typeset .mdx-iconsearch:hover {
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .15),
                0 .025rem .05rem rgba(0, 0, 0, .15);
}

.md-typeset .mdx-iconsearch .md-input {
    background: var(--md-default-bg-color);
    box-shadow: 0 0 .6rem rgba(0, 0, 0, .07);
}

[data-md-color-scheme=slate] .md-typeset .mdx-iconsearch .md-input {
    background: var(--md-code-bg-color);
}