/* || General Styles */

@keyframes heart {

    0%,
    40%,
    80%,
    to {
        transform: scale(1)
    }

    20%,
    60% {
        transform: scale(1.15)
    }
}

.md-banner a,
.md-banner a:focus,
.md-banner a:hover {
    color: currentcolor
}

.md-banner strong {
    white-space: nowrap
}

[dir=ltr] .md-banner .banner-icon {
    margin-left: .2em
}

[dir=rtl] .md-banner .banner-icon {
    margin-right: .2em
}

.mdx-container {
    height: 800px;
    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), #2e303e);
    padding-top: 1rem
}

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

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

.mdx-hero h2 {
    color: currentcolor;
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -.01em;
    font-size: 2em;
    line-height: 1.3;
    margin: 0 0 1.25em;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

@media screen and (max-width:59.9375em) {
    /* 59.9375em = 959px (to work nicely alongside mid-width of 60em used below) */
    .mdx-hero h1 {
        font-size: 1.4rem
    }
    .mdx-hero__image{
        text-align:center;
    }
    .mdx-hero__image img {
        margin: 0 0 1rem;
        max-width: 55%;
    }
    .mdx-hero__image-2 {
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    .mdx-hero__image-2 img {
        margin: 0 0 1rem;
        max-width: 55%;
    }
    .mdx-hero__content-2 {
        margin: 0 !important;
        padding-bottom: 6rem !important;
    }
    .mdx-hero__content-3a {
        max-width: 100%;
        margin: 0 !important;
    }
    .mdx-hero__codeblock {
        margin: 0 !important;
        width: 100% !important;
    }
}

@media screen and (max-width:28.125em) {
    /* 28.125em = 450px */
    .mdx-hero h1 {
        font-size: 1.4rem
    }
    .mdx-hero__image{
        text-align:center;
    }
    .mdx-hero__image img {
        margin: 0 0 1rem;
        max-width: 90%;
    }
    .mdx-hero__image-2 {
        padding: 0;
        margin: 0;
        text-align:center;
    }
    .mdx-hero__image-2 img {
        margin: 0 0 1rem;
        max-width: 90%;
    }
    .mdx-hero__content-3a {
        max-width: 100%;
        margin: 0 !important;
    }
    .mdx-hero__codeblock {
        margin: 0 !important;
        width: 100% !important;
    }
}

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

@media screen and (min-width:60em) {
    /* 60em = 960px */
    .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;
        max-width: 60%;
        max-height: 60%;
        padding-right: 2.5rem;
        margin-top: 50px;
    }
}

@media screen and (min-width:76.25em) {
    /* 76.24em = 1220px */
    .mdx-hero__image {
        transform: translateX(8rem)
    }
}

.mdx-container-2 {
    padding: 0rem;
    background-color: white;
    margin-bottom: 0px;
}

.mdx-hero__image-2 {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 50px;
    max-width: 50%;
    max-height: 50%;
    order: 1;
    padding-right: 0.5rem;
    padding-left: 0rem;
    float: left;
}

.mdx-hero__content-2 {
    margin: 60px 0 175px 30px;
    justify-content: left;
    color: var(--md-primary-fg-color);
    font-weight: 300;
    padding: 0 0 40px;
    word-break: break-word;
    float: right;
}

.mdx-container-3 {
    padding: 0rem;
    background: linear-gradient(to bottom, #2e303e, var(--md-primary-fg-color));
}

.mdx-hero__content-3t {
    margin-top: 150px;
    color: white;
    font-weight: 300;
    padding: 0 0px;
    padding-bottom: 5px;
    word-break: break-word;
    float: top;
}

.mdx-hero__content-3a {
    margin-bottom: 100px;
    margin-right: 30px;
    color: white;
    font-weight: 300;
    padding: 0 0px;
    padding-bottom: 40px;
    word-break: break-word;
    display:inline-block;
    /*float: left;*/
}

.mdx-hero__codeblock {
    margin-top: 25px;
    margin-bottom: 100px;
    margin-left: 30px;
    color: white;
    font-weight: 300;
    padding: 0 0px;
    padding-bottom: 40px;
    word-break: break-word;
    display:inline-block;
    /*float: right;*/
    width: 66%;
}

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

.md-typeset .mdx-iconsearch {
    background-color: var(--md-default-bg-color);
    border-radius: .1rem;
    box-shadow: var(--md-shadow-z1);
    position: relative;
    transition: box-shadow 125ms
}

.md-typeset .mdx-iconsearch:focus-within,
.md-typeset .mdx-iconsearch:hover {
    box-shadow: var(--md-shadow-z2)
}

.md-typeset .mdx-iconsearch .md-input {
    background: var(--md-default-bg-color);
    box-shadow: none
}

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

.md-typeset .mdx-iconsearch-result {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-color: var(--md-default-fg-color--lighter) rgba(33, 198, 28, 0);
    scrollbar-width: thin;
    touch-action: pan-y
}

.md-tooltip .md-typeset .mdx-iconsearch-result {
    max-height: 10.25rem
}

.md-typeset .mdx-iconsearch-result::-webkit-scrollbar {
    height: .2rem;
    width: .2rem
}

.md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb {
    background-color: var(--md-default-fg-color--lighter)
}

.md-typeset .mdx-iconsearch-result::-webkit-scrollbar-thumb:hover {
    background-color: var(--md-accent-fg-color)
}

.md-typeset .mdx-iconsearch-result__meta {
    color: var(--md-default-fg-color--lighter);
    font-size: .64rem;
    position: absolute;
    right: .6rem;
    top: .4rem
}

[dir=ltr] .md-typeset .mdx-iconsearch-result__list {
    margin-left: 0
}

[dir=rtl] .md-typeset .mdx-iconsearch-result__list {
    margin-right: 0
}

.md-typeset .mdx-iconsearch-result__list {
    list-style: none;
    margin: 0;
    padding: 0
}

[dir=ltr] .md-typeset .mdx-iconsearch-result__item {
    margin-left: 0
}

[dir=rtl] .md-typeset .mdx-iconsearch-result__item {
    margin-right: 0
}

.md-typeset .mdx-iconsearch-result__item {
    border-bottom: .05rem solid var(--md-default-fg-color--lightest);
    margin: 0;
    padding: .2rem .6rem
}

.md-typeset .mdx-iconsearch-result__item:last-child {
    border-bottom: none
}

.md-typeset .mdx-iconsearch-result__item>* {
    margin-right: .6rem
}

.md-typeset .mdx-iconsearch-result__item img {
    height: .9rem;
    width: .9rem
}

[data-md-color-scheme=slate] .md-typeset .mdx-iconsearch-result__item img[src*=squidfunk] {
    filter: invert(1)
}

.md-typeset .mdx-premium p {
    margin: 2em 0;
    text-align: center
}

.md-typeset .mdx-premium img {
    height: 3.25rem
}

.md-typeset .mdx-premium p:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.md-typeset .mdx-premium p:last-child>a {
    display: block;
    flex-shrink: 0
}

.md-typeset .mdx-sponsorship__list {
    margin: 2em 0
}

.md-typeset .mdx-sponsorship__list:after {
    clear: both;
    content: "";
    display: block
}

[dir=ltr] .md-typeset .mdx-sponsorship__item {
    float: left
}

[dir=rtl] .md-typeset .mdx-sponsorship__item {
    float: right
}

.md-typeset .mdx-sponsorship__item {
    border-radius: 100%;
    display: block;
    height: 1.6rem;
    margin: .2rem;
    overflow: hidden;
    transform: scale(1);
    transition: color 125ms, transform 125ms;
    width: 1.6rem
}

.md-typeset .mdx-sponsorship__item:focus,
.md-typeset .mdx-sponsorship__item:hover {
    transform: scale(1.1)
}

.md-typeset .mdx-sponsorship__item:focus img,
.md-typeset .mdx-sponsorship__item:hover img {
    filter: grayscale(0)
}

.md-typeset .mdx-sponsorship__item--private {
    background: var(--md-default-fg-color--lightest);
    color: var(--md-default-fg-color--lighter);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.6rem;
    text-align: center
}

.md-typeset .mdx-sponsorship__item img {
    display: block;
    filter: grayscale(100%) opacity(75%);
    height: auto;
    transition: filter 125ms;
    width: 100%
}

.md-typeset .mdx-sponsorship-button {
    font-weight: 400
}

.md-typeset .mdx-sponsorship-count,
.md-typeset .mdx-sponsorship-total {
    font-weight: 700
}

/* || Typography */

h3 {
    font-weight: bold;
}

/* || Colors */

.arrow {
    color:#B7C5FD
}

.check {
    color:#00E676
}

.banner-icon {
    color: #B8D5B8;
}

.git {
    color:#fff
}

.light-accent{
    color:#B7C5FD !important;
}

.mdx-hero .md-button:focus,
.mdx-hero .md-button:hover {
    background-color: #B7C5FD;
    border-color: #B7C5FD;        
    color: #fff
}

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

/* Code highlighting */
pre { line-height: 125% !important; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.demo-highlight {
    overflow-x: auto;
}
.demo-highlight .hll { background-color: #ffffcc }
.demo-highlight { background: #ffffff; }
.demo-highlight .c { color: #177500 } /* Comment */
.demo-highlight .err { color: #000000 } /* Error */
.demo-highlight .k { color: #A90D91 } /* Keyword */
.demo-highlight .l { color: #1C01CE } /* Literal */
.demo-highlight .n { color: #000000 } /* Name */
.demo-highlight .o { color: #000000 } /* Operator */
.demo-highlight .ch { color: #177500 } /* Comment.Hashbang */
.demo-highlight .cm { color: #177500 } /* Comment.Multiline */
.demo-highlight .cp { color: #633820 } /* Comment.Preproc */
.demo-highlight .cpf { color: #177500 } /* Comment.PreprocFile */
.demo-highlight .c1 { color: #177500 } /* Comment.Single */
.demo-highlight .cs { color: #177500 } /* Comment.Special */
.demo-highlight .kc { color: #A90D91 } /* Keyword.Constant */
.demo-highlight .kd { color: #A90D91 } /* Keyword.Declaration */
.demo-highlight .kn { color: #A90D91 } /* Keyword.Namespace */
.demo-highlight .kp { color: #A90D91 } /* Keyword.Pseudo */
.demo-highlight .kr { color: #A90D91 } /* Keyword.Reserved */
.demo-highlight .kt { color: #A90D91 } /* Keyword.Type */
.demo-highlight .ld { color: #1C01CE } /* Literal.Date */
.demo-highlight .m { color: #1C01CE } /* Literal.Number */
.demo-highlight .s { color: #C41A16 } /* Literal.String */
.demo-highlight .na { color: #836C28 } /* Name.Attribute */
.demo-highlight .nb { color: #A90D91 } /* Name.Builtin */
.demo-highlight .nc { color: #3F6E75 } /* Name.Class */
.demo-highlight .no { color: #000000 } /* Name.Constant */
.demo-highlight .nd { color: #000000 } /* Name.Decorator */
.demo-highlight .ni { color: #000000 } /* Name.Entity */
.demo-highlight .ne { color: #000000 } /* Name.Exception */
.demo-highlight .nf { color: #000000 } /* Name.Function */
.demo-highlight .nl { color: #000000 } /* Name.Label */
.demo-highlight .nn { color: #000000 } /* Name.Namespace */
.demo-highlight .nx { color: #000000 } /* Name.Other */
.demo-highlight .py { color: #000000 } /* Name.Property */
.demo-highlight .nt { color: #000000 } /* Name.Tag */
.demo-highlight .nv { color: #000000 } /* Name.Variable */
.demo-highlight .ow { color: #000000 } /* Operator.Word */
.demo-highlight .mb { color: #1C01CE } /* Literal.Number.Bin */
.demo-highlight .mf { color: #1C01CE } /* Literal.Number.Float */
.demo-highlight .mh { color: #1C01CE } /* Literal.Number.Hex */
.demo-highlight .mi { color: #1C01CE } /* Literal.Number.Integer */
.demo-highlight .mo { color: #1C01CE } /* Literal.Number.Oct */
.demo-highlight .sa { color: #C41A16 } /* Literal.String.Affix */
.demo-highlight .sb { color: #C41A16 } /* Literal.String.Backtick */
.demo-highlight .sc { color: #2300CE } /* Literal.String.Char */
.demo-highlight .dl { color: #C41A16 } /* Literal.String.Delimiter */
.demo-highlight .sd { color: #C41A16 } /* Literal.String.Doc */
.demo-highlight .s2 { color: #C41A16 } /* Literal.String.Double */
.demo-highlight .se { color: #C41A16 } /* Literal.String.Escape */
.demo-highlight .sh { color: #C41A16 } /* Literal.String.Heredoc */
.demo-highlight .si { color: #C41A16 } /* Literal.String.Interpol */
.demo-highlight .sx { color: #C41A16 } /* Literal.String.Other */
.demo-highlight .sr { color: #C41A16 } /* Literal.String.Regex */
.demo-highlight .s1 { color: #C41A16 } /* Literal.String.Single */
.demo-highlight .ss { color: #C41A16 } /* Literal.String.Symbol */
.demo-highlight .bp { color: #5B269A } /* Name.Builtin.Pseudo */
.demo-highlight .fm { color: #000000 } /* Name.Function.Magic */
.demo-highlight .vc { color: #000000 } /* Name.Variable.Class */
.demo-highlight .vg { color: #000000 } /* Name.Variable.Global */
.demo-highlight .vi { color: #000000 } /* Name.Variable.Instance */
.demo-highlight .vm { color: #000000 } /* Name.Variable.Magic */
.demo-highlight .il { color: #1C01CE } /* Literal.Number.Integer.Long */

/*Pill button styling used for alpha, beta tags*/
.pill-btn{
    display: inline-block;
    position: absolute;    
    background-color: rgb(0, 230, 118);
    color: #fff;
    border-radius: 0.75em;
    font-size: 0.5em;
    font-weight: 600;
    margin-left: 0.75em;
    margin-right: 1em;
    margin-top: 0.25em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0;
    padding-bottom: 0;
}