:root, body {
    --md-text-font: "Anuphan";
    --md-code-font: "JetBrains Mono";
    --md-typeset-color: var(--md-default-fg-color);
    --md-admonition-fg-color: var(--md-default-fg-color);
}

[data-md-color-scheme="gb-dark"] {
    --md-default-bg-color: #110f0f;
    --md-default-bg-color--transparent: #110f0f00;
    --md-default-bg-color--light: #1e1e1e;
    --md-default-bg-color--lighter: #404040;
    --md-default-fg-color: #d5d5d5;
    --md-default-fg-color--light: #cbcbcb;
    --md-default-fg-color--lighter: #757575; /* blockquote */
    --md-default-fg-color--lightest: #1e1e1e; /* search-box */
    --md-code-bg-color: #1e1e1e;
    --md-code-fg-color: #d5d5d5;
    --md-code-hl-comment-color: var(--md-default-bg-color--lighter);
    --md-primary-fg-color: #a01919;
    --md-primary-fg-color--dark: #b01d1d;
    --md-accent-fg-color: #e32c2c;
    --md-accent-fg-color--transparent: #e32c2c1a;
    --md-typeset-a-color: #f06868;
    --md-admonition-bg-color: #171717;
    --md-typeset-mark-color: #ffffff2e;
    --md-typeset-kbd-color: var(--md-code-bg-color);
    --md-typeset-kbd-border-color: var(--md-default-bg-color--lighter);
    --md-typeset-kbd-accent-color: var(--md-default-bg-color--lighter);
    --md-typeset-table-color: var(--md-default-bg-color--light);
    --md-code-hl-name-color: #d89b39;
    --md-code-hl-variable-color: #d96a59;
    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
    --md-code-hl-operator-color: var(--md-default-fg-color--light);
    --gb-status-color-1: #9dff7a;
    --gb-status-color-2: #ffc57a;
    --gb-status-color-3: #7ab4ff;
    --gb-status-color-4: #ff937a;
    --gb-status-color-5: #a6a6a6;
    --gb-status-color-6: #9d7aff;
    --md-shadow-z2: 0 0.2rem 0.5rem #0000006f, inset 0 0 0 1px #ffffff25;
}

[data-md-color-scheme="gb-light"] {
    --md-default-bg-color: #f9f9f9;
    --md-default-bg-color--transparent: #f9f9f900;
    --md-default-bg-color--light: #ececec;
    --md-default-bg-color--lighter: #a8a8a8;
    --md-default-fg-color: #202020;
    --md-default-fg-color--light: #383838;
    --md-default-fg-color--lighter: #757575; /* blockquote */
    --md-default-fg-color--lightest: #cfcfcf; /* search-box */
    --md-code-bg-color: #ebebeb;
    --md-code-fg-color: #202020;
    --md-code-hl-comment-color: var(--md-default-bg-color--lighter);
    --md-primary-fg-color: #ca1313;
    --md-primary-fg-color--dark: #b01d1d;
    --md-accent-fg-color: #e32c2c;
    --md-accent-fg-color--transparent: #e32c2c1a;
    --md-typeset-a-color: #c32d2d;
    --md-admonition-bg-color: #f9f9f9;
    --md-typeset-mark-color: #0000002e;
    --md-typeset-kbd-color: var(--md-code-bg-color);
    --md-typeset-kbd-border-color: var(--md-default-bg-color--lighter);
    --md-typeset-kbd-accent-color: var(--md-default-bg-color--lighter);
    --md-typeset-table-color: var(--md-default-bg-color--light);
    --md-code-hl-name-color: #c49446;
    --md-code-hl-variable-color: #87382b;
    --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
    --md-code-hl-operator-color: var(--md-default-fg-color--light);
    --gb-status-color-1: #387a20;
    --gb-status-color-2: #b0762b;
    --gb-status-color-3: #21497e;
    --gb-status-color-4: #ac4129;
    --gb-status-color-5: #3a3a3a;
    --gb-status-color-6: #7644ff;
}

[data-md-color-scheme="gb-light"] img.gb-invert,
[data-md-color-scheme="gb-dark"] img.gb-revinvert,
[data-md-color-scheme="gb-light"] img.gb-revinvert.gb-animate:hover,
[data-md-color-scheme="gb-dark"] img.gb-invert.gb-animate:hover {
    filter: hue-rotate(180deg) invert(1);
}

img.gb-invert.gb-animate,
img.gb-revinvert.gb-animate {
    transition: filter .2s;
}

[data-md-color-scheme="gb-light"] img.gb-invert.gb-animate:hover,
[data-md-color-scheme="gb-dark"] img.gb-revinvert.gb-animate:hover {
    filter: none;
}

@font-face {
    font-family: "Anuphan";
    font-display: fallback;
    src: local("Anuphan"), url('./fonts/Anuphan.woff2') format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-display: fallback;
    src: local("JetBrainsMono"), local("JetBrains Mono"), url('./fonts/JetBrainsMono.woff2') format("woff2");
}

img {
    border-radius: 15px;
}

/*
    Extend overall content area.
*/
.md-grid {
    max-width: 1440px;
}  

/*
    Extends blog post to the edge of the screen.
*/
.md-content.md-content--post article {
    flex-grow: 1;
}

/*
    Align emojis & icons with the text.
*/
.md-typeset .emojione, 
.md-typeset .gemoji, 
.md-typeset .twemoji {
    vertical-align: text-bottom;
}


.md-header__button.md-logo img {
    border-radius: 0px;
    /* make the logo fully white */
    filter: grayscale(100%) brightness(300%);
}

/*
    Add margin to end of the content.
*/
.md-content__inner.md-typeset {
    margin-bottom: 5rem;
}

/*
    Make footnote color more readable.
*/
.md-typeset .footnote {
    color: var(--md-default-fg-color--lighter);
}

/*
    Change checked tasklist color to the primary color.
*/
.md-typeset [type="checkbox"]:checked + .task-list-indicator::before {
    background-color: var(--md-accent-fg-color);
}

/*
    Add more margin before each task list item text.
*/
.task-list-control > .task-list-indicator {
    margin-left: 5px;
}

/*
    Don't use a tick icon for unchecked task list items.
*/
.md-typeset [type="checkbox"]:not(:checked) + .task-list-indicator::before {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 50px;
}

/*
    Animation for git repository stats.
*/
.md-source__repository .md-source__facts {
    animation: facts .25s ease-in;
}

/*
    Don't show any icon for custom repository stats.
*/
.md-source__repository .md-source__fact--other::before {
    display: none;
}

/*  
    ------------------
    TABS
    ------------------
*/

/*
    Make markdown tab text to match with the size of the content text.
*/
.md-typeset .tabbed-labels > label {
    font-size: .75rem !important;
}

/*
    Add a indicator below the selected item in navigation tabs.
*/
.md-tabs .md-tabs__item--active {
    font-weight: bold;
}

/*  
    ------------------
    TABLES
    ------------------
*/

.md-typeset table {
    font-size: .70rem !important;
    border-radius: 15px !important;
    /*
    background-color: var(--md-admonition-bg-color) !important;
    border: none !important;
    */
    box-shadow: var(--md-shadow-z2);
}

/*  
    ------------------
    CODE BLOCKS
    ------------------
*/

.md-typeset table.highlighttable tr td.linenos {
    border-radius: 15px 0px 0px 15px;
    font-size: .65rem !important;
}

.md-typeset table.highlighttable tr td.code div > pre > code {
    border-radius: 0px 15px 15px 0px;
}

.md-typeset div > pre > code {
    border-radius: 15px;
    font-size: .65rem !important;
}

.md-typeset table.highlighttable tr td.linenos > .linenodiv pre {
    color: var(--md-default-bg-color--lighter) !important;
}

.md-tooltip {
    background-color: var(--md-admonition-bg-color);
    border-radius: 15px;
}

.md-annotation__index::after, .md-annotation__index::before {
    height: 2.4ch;
    width: 2.4ch;
}

.md-tooltip__inner {
    font-size: .70rem !important;
}

blockquote {
    color: var(--md-default-fg-color--lighter) !important;
    border-left-color: var(--md-default-fg-color--lightest) !important;
}

/*  
    ------------------
    ADMONITON
    ------------------
*/

.md-typeset .admonition, 
.md-typeset details {
    border-width: 0 !important;
    border-radius: 15px !important;
    padding: 0 1rem !important;
    font-size: .75rem !important;
}

.md-typeset .admonition .admonition-title, 
.md-typeset details summary {
    padding-bottom: .6rem !important;
    padding-top: .6rem !important;
    border-radius: 15px 15px 0px 0px !important;
    margin: 0 -1rem !important;
    padding-left: 2.7rem !important;
    transition: border-radius .2s;
}

.md-typeset .admonition .admonition-title::before,
.md-typeset details summary::before {
    left: .9rem !important;
}

.md-typeset details summary::after {
    right: .9rem !important;
}

.md-typeset .admonition .admonition-title::before,
.md-typeset details summary::before,
.md-typeset details summary::after {
    top: .85em !important;
    height: 25px !important;
    width: 23px !important;
}

.md-typeset details:not([open]) summary {
    border-radius: 15px 15px 15px 15px !important;
}

.md-typeset .admonition p:nth-of-type(2), 
.md-typeset details p:first-of-type {
    margin-top: .4rem !important;
}

/*  
    ------------------
    GADGETBRIDGE-SPECIFIC
    ------------------
*/

/*
    Screenshot alignment
*/

img[gb-align="center"] {
    margin: auto;
    display: block;
}

img[gb-align="left"] {
    float: left;
    display: block;
    margin-right: 30px;
}

div[gb-wrap] {
    overflow: auto;
}

div[gb-wrap="inline"] {
    text-align: center;
}

div[gb-wrap="inline"] > * {
    display: inline-block;
    vertical-align: middle;
}

div[gb-wrap="inline"] > * + * {
    margin-left: 40px;
}

div[gb-wrap="inline"] > div > p {
    margin: 10px 0;
}

div[gb-wrap="inline"] > p > img + img {
    margin-left: 10px;
}

div[gb-wrap="inline"] > div[gb-title]::after {
    content: attr(gb-title);
    display: inline-block;
    font-size: .65rem;
    text-align: center;
    margin-top: -10px;
    text-wrap: wrap;
    max-width: 160px;
    line-height: 1.45;
}

/*
    Device support card
*/

.gb-device {
    color: var(--md-default-fg-color);
    display: inline-block;
    position: relative;
    user-select: none;
    cursor: pointer;
}

.gb-device > .gb-device-summary:active + .gb-device-info,
.gb-device > .gb-device-summary:focus + .gb-device-info,
.gb-device > .gb-device-summary:focus-within + .gb-device-info,
.gb-device > .gb-device-summary + .gb-device-info:focus,
.gb-device > .gb-device-summary + .gb-device-info:focus-within,
.gb-device > .gb-device-summary + .gb-device-info:hover,
:target + .gb-device > .gb-device-summary + .gb-device-info {
    display: block;
    animation: popup-animation .2s cubic-bezier(0.010, 0.165, 0.000, 1.265) both;
}

.gb-device > .gb-device-summary:focus,
.gb-device > .gb-device-summary:focus-within,
.gb-device > .gb-device-summary:active,
.gb-device > .gb-device-summary:hover,
.gb-device > .gb-device-summary:target {
    background: var(--md-default-bg-color--light);
    color: inherit;
}

.gb-device > .gb-device-summary {
    color: inherit;
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-block;
    border: 2px solid var(--md-default-bg-color--light);
    transition: background .1s;
    scroll-margin-top: 150px;
    scroll-snap-margin-top: 150px;
}

/*
    TODO: Maybe create a circle bar to indicate the support level?

.gb-device > .gb-device-summary::before {
    content: "";
    height: 30px;
    width: 30px;
    color: inherit;
    background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDIgNDIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjEiIGN5PSIyMSIgcj0iMTYiIGZpbGw9InRyYW5zcGFyZW50Ii8+PGNpcmNsZSBjeD0iMjEiIGN5PSIyMSIgcj0iMTYiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtZGFzaG9mZnNldD0iMCIgc3Ryb2tlLWRhc2hhcnJheT0iODUgMTUiLz48L3N2Zz4=");
    display: inline-block;
    vertical-align: middle;
    border-radius: 28px;
    margin-left: -10px;
    margin-right: 10px;
}
*/

.gb-device > .gb-device-summary > .gb-device-tag + .gb-device-tag {
    margin-left: 10px;
}

.gb-device > .gb-device-summary > .gb-device-tag:first-child > svg {
    margin-left: -8px;
    margin-right: 10px;
}

.gb-device > .gb-device-summary > .gb-device-tag:first-child + .gb-device-tag::before {
    content: "";
    height: 30px;
    width: 2px;
    background: var(--md-default-bg-color--light);
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.gb-device > .gb-device-info {
    transform-origin: top left;
    padding: 20px 25px;
    background: var(--md-default-bg-color);
    box-shadow: var(--md-shadow-z2);
    border-radius: 20px;
    display: none;
    opacity: 0;
    z-index: 2;
    min-width: 200px;
    max-width: 35rem;
    font-size: .75rem;
    will-change: margin-top, scale;
    cursor: initial;
    user-select: initial;
}

.gb-device > .gb-device-info > h3 {
    margin-top: 0px;
    margin-bottom: 15px;
}

.gb-device > .gb-device-info > h3 > code {
    background: none;
    margin: 0px;
    padding: 0px;
}

/*
    TODO: Unused

    .gb-device > .gb-device-info > .gb-device-info-close,
    .gb-device > .gb-device-info > .gb-device-info-link {
        position: absolute;
        display: inline-block;
        right: -25px;
        top: -25px;
        color: inherit;
        border-radius: 50px;
        padding: 10px 15px;
        align-content: center;
        text-align: center;
        background: var(--md-default-bg-color--lighter);
    }

    .gb-device > .gb-device-info > .gb-device-info-close {
        display: none;
    }

    .gb-device > .gb-device-summary:target + .gb-device-info > .gb-device-info-close {
        display: block;
        background: var(--md-primary-fg-color--dark);
    }

    .gb-device > .gb-device-summary:target + .gb-device-info > .gb-device-info-link {
        display: none;
    }
*/

.gb-device > .gb-device-info > .gb-device-info-fact {
    display: flex;
    color: inherit;
    outline: 8px solid transparent;
    transition: background .1s, outline .1s;
    border-radius: 10px;
    padding-right: 20px;
    user-select: text;
}

.gb-device > .gb-device-info > .gb-device-info-fact + .gb-device-info-fact {
    margin-top: 20px;
}

.gb-device > .gb-device-info > a.gb-device-info-fact:hover,
.gb-device > .gb-device-info > a.gb-device-info-fact:active,
.gb-device > .gb-device-info > a.gb-device-info-fact:focus,
.gb-device > .gb-device-info > a.gb-device-info-fact:focus-visible,
.gb-device > .gb-device-info > a.gb-device-info-fact:focus-within {
    background: var(--md-default-bg-color--light);
    outline-width: 10px;
    outline-color: var(--md-default-bg-color--light);
}

.gb-device > .gb-device-info > .gb-device-info-fact > .gb-device-info-icon {
    flex-shrink: 0;
    height: 50px;
    width: 50px;
    background: var(--md-default-bg-color--light);
    display: inline-block;
    border-radius: 50px;
    align-content: center;
    text-align: center;
    margin: auto 0;
}

.gb-device > .gb-device-info > .gb-device-info-fact > .gb-device-info-icon > svg,
.gb-device > .gb-device-info > .gb-device-info-close > svg,
.gb-device > .gb-device-info > .gb-device-info-link > svg,
.gb-device > .gb-device-summary > .gb-device-tag > svg {
    height: 100%;
    width: 26px;
    vertical-align: middle;
    fill: currentColor;
}

.gb-device > .gb-device-info > .gb-device-info-fact[class*="gb-color"]:not([href]) > .gb-device-info-icon > svg {
    fill: var(--md-default-bg-color);
}

.gb-device > .gb-device-info > .gb-device-info-fact[class*="gb-color"]:not([href]) > .gb-device-info-icon {
    background: currentColor;
}

.gb-device > .gb-device-info > .gb-device-info-fact > .gb-device-info-text {
    vertical-align: middle;
    display: inline-block;
    margin-left: 15px;
    line-height: 1.4;
}

.gb-device > .gb-device-info > .gb-device-info-fact > .gb-device-info-text > .gb-device-info-text-line {
    display: block;
    font-weight: bold;
}

.gb-device > .gb-device-info > .gb-device-info-fact > .gb-device-info-text > .gb-device-info-text-line + .gb-device-info-text-line {
    display: block;
    font-weight: initial;
}

.gb-device > .gb-device-info > .gb-device-info-title {
    color: var(--md-default-fg-color--lighter);
    margin-top: 15px;
    margin-bottom: 10px;
    display: inline-block;
}

@keyframes popup-animation {
    0% {
        opacity: 0;
        transform: scale(.8);
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        transform: scale(1);
        margin-top: 10px;
    }
}

.gb-color-1 { color: var(--gb-status-color-1) !important; }
.gb-color-2 { color: var(--gb-status-color-2) !important; }
.gb-color-3 { color: var(--gb-status-color-3) !important; }
.gb-color-4 { color: var(--gb-status-color-4) !important; }
.gb-color-5 { color: var(--gb-status-color-5) !important; }
.gb-color-6 { color: var(--gb-status-color-6) !important; }

/*
    Button
*/

.gb-button {
    padding: 14px 22px;
    background-color: var(--md-typeset-a-color);
    color: var(--md-default-bg-color) !important;
    transition: background-color .2s !important;
    font-weight: bolder;
    border-radius: 50px;
    display: inline-block;
    box-shadow: none;
    cursor: pointer;
}

.gb-button.gb-button-icon {
    padding: 12px 15px;
}

.gb-button.gb-button-secondary {
    background-color: var(--md-default-bg-color--light);
    color: var(--md-typeset-a-color) !important;
}

.gb-button span.twemoji {
    font-size: larger;
    vertical-align: text-top;
}

.gb-button:not(.gb-button-icon) span.twemoji:first-child {
    margin-right: 8px;
}

.gb-button:hover {
    background-color: var(--md-accent-fg-color);
    color: var(--md-default-bg-color) !important;
}

.gb-button:disabled {
    background-color: var(--md-default-bg-color--light);
    color: var(--md-default-bg-color--lighter) !important;
    box-shadow: none;
    cursor: not-allowed;
}

.gb-button-group > p {
    display: flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-wrap: wrap;
}

.gb-button-group .gb-button {
    margin: 0;
}

/*
    Color preview
*/

.gb-color {
    width: 1rem;
    height: 1rem;
    border-radius: 50px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

/*
    Images & step-by-step instructions
*/

.gb-hero {
    display: flex;
    column-gap: 5vw;
    row-gap: 50px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.gb-hero > div:first-child {
    flex-shrink: 1;
    flex-grow: 3;
    flex-basis: 300px;
}

.gb-hero-image {
    flex-basis: 400px;
    flex-grow: 2;
    flex-shrink: 1;
    max-width: 600px;
}

.gb-hero-image > p {
    margin: 0;
}

/*
    Icon text containers used for "Quick links"
*/

div[gb-spot] {
    display: flex;
    margin: 30px 0;
}

div[gb-spot] > p {
    margin: auto;
}

div[gb-spot] > p:first-child .twemoji {
    height: 1.5em;
    width: 1.5em;
    padding: 25px;
    box-sizing: content-box;
    background-color: var(--md-default-bg-color--light);
    border-radius: 50px;
    margin-right: 25px;
}

div[gb-spot] > p:first-child .twemoji svg {
    margin: auto;
    width: 100%;
}

/*
    CSS-only countdown to show supported 
    gadget count in a cool-looking way.
*/

span.gb-gadgets {
    align-items: center; 
    justify-content: center; 
    display: flex; 
    flex-wrap: nowrap;
}

span.gb-gadgets > span.gb-gadget-count {
    font-size: 2.5em; 
    vertical-align: middle; 
    margin-right: 15px;
    background-color: var(--md-default-bg-color--light);
    border-radius: 20px;
    padding: 0px 10px;
}

span.gb-gadgets > span.gb-gadget-count-text {
    text-align: center;
}

span.gb-digit-display > span {
    display: block;
    animation-duration: .8s;
    animation-delay: .5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    height: inherit;
    user-select: none;
}

span.gb-digit-display {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    height: 1.5em;
    -webkit-mask-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
    -webkit-mask-position: center;
    -webkit-mask-size: 2.5em;
    mask-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%);
    mask-position: center;
    mask-size: 2.5em;
}

@media screen and (max-width: 60em) {
    span.gb-gadgets > span.gb-gadget-count {
        margin-right: 0px;
    }

    span.gb-gadgets {
        flex-direction: column;
    }

    div[gb-wrap] > p > img {
        float: none;
        margin: auto;
    }

    .gb-hero {
        text-align: center;
    }

    .gb-button-group > p {
        justify-content: center;
    }

    /*
    .gb-device > .gb-device-info > .gb-device-info-close,
    .gb-device > .gb-device-info > .gb-device-info-link {
        background: none;
        padding: none;
        right: 10px;
        top: 10px;
    }

    .gb-device > .gb-device-info > .gb-device-info-close {
        color: var(--md-default-bg-color);
    }

    .gb-device > .gb-device-info {
        width: 90%;
        max-width: 90%;
        position: fixed;
        bottom: 20px;
        box-sizing: border-box;
        left: 5%;
        border-radius: 20px;
        transform-origin: bottom center;
        overflow-y: auto;
        max-height: 50%;
        -webkit-overflow-scrolling: touch;
    }
    */
}

/*
    Show gadget support card on hover if there is no tracking device
    (such as on mobile, since hover will be triggered on tap)
*/
@media (hover: none) {
    .gb-device > .gb-device-summary:hover + .gb-device-info {
        display: block;
        animation: popup-animation .2s cubic-bezier(0.010, 0.165, 0.000, 1.265) both;
    }
}

@keyframes digit-0 { to { transform: translateY(calc(1.5em * -0)); } }
@keyframes digit-1 { to { transform: translateY(calc(1.5em * -1)); } }
@keyframes digit-2 { to { transform: translateY(calc(1.5em * -2)); } }
@keyframes digit-3 { to { transform: translateY(calc(1.5em * -3)); } }
@keyframes digit-4 { to { transform: translateY(calc(1.5em * -4)); } }
@keyframes digit-5 { to { transform: translateY(calc(1.5em * -5)); } }
@keyframes digit-6 { to { transform: translateY(calc(1.5em * -6)); } }
@keyframes digit-7 { to { transform: translateY(calc(1.5em * -7)); } }
@keyframes digit-8 { to { transform: translateY(calc(1.5em * -8)); } }
@keyframes digit-9 { to { transform: translateY(calc(1.5em * -9)); } }
span.gb-digit-display[data-digit="0"] > span { animation-name: digit-0; }
span.gb-digit-display[data-digit="1"] > span { animation-name: digit-1; }
span.gb-digit-display[data-digit="2"] > span { animation-name: digit-2; }
span.gb-digit-display[data-digit="3"] > span { animation-name: digit-3; }
span.gb-digit-display[data-digit="4"] > span { animation-name: digit-4; }
span.gb-digit-display[data-digit="5"] > span { animation-name: digit-5; }
span.gb-digit-display[data-digit="6"] > span { animation-name: digit-6; }
span.gb-digit-display[data-digit="7"] > span { animation-name: digit-7; }
span.gb-digit-display[data-digit="8"] > span { animation-name: digit-8; }
span.gb-digit-display[data-digit="9"] > span { animation-name: digit-9; }


/*
 * Add sublist style for details
 * This allows for expandable sublists
 */
details.sublist {
    background: none;
	margin: 0 0;
}

details.sublist[open],
details.sublist[open] > summary {
    box-shadow: 0 0 0 .2rem var(--md-code-bg-color) !important;
}

details.sublist > summary {
    font-weight: inherit;
    font-size: inherit;
    padding: .3em 3em .3em 1em !important;
    background: none;
    box-shadow: 0 0 0 .12rem var(--md-code-bg-color) inset !important;
}

details.sublist > summary::before {
    visibility: hidden;
}

details.sublist > summary::after {
    top: .3em !important;
    right: .5rem !important;
    transform: rotate(90deg);
}

details.sublist[open] > summary::after {
    transform: rotate(270deg);
}