html.dark .shiki,
html.dark .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* responsive image */

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 0 0 2em 0;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

article img {
    max-width: 100%;
}

article img[width] {
    width: auto;
}

article img[width][height] {
    height: auto;
}

/* sliding-in effect: https://antfu.me/posts/sliding-enter-animation */

@keyframes slide-enter {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 100;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .slide-enter-content > * {
        --stagger: 0;
        --delay: 150ms;
        --start: 0ms;
        animation: slide-enter 1s both 1;
        animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
    }

    .slide-enter-content > *:nth-child(1) {
        --stagger: 1;
    }
    .slide-enter-content > *:nth-child(2) {
        --stagger: 2;
    }
    .slide-enter-content > *:nth-child(3) {
        --stagger: 3;
    }
    .slide-enter-content > *:nth-child(4) {
        --stagger: 4;
    }
    .slide-enter-content > *:nth-child(5) {
        --stagger: 5;
    }
    .slide-enter-content > *:nth-child(6) {
        --stagger: 6;
    }
    .slide-enter-content > *:nth-child(7) {
        --stagger: 7;
    }
    .slide-enter-content > *:nth-child(8) {
        --stagger: 8;
    }
    .slide-enter-content > *:nth-child(9) {
        --stagger: 9;
    }
    .slide-enter-content > *:nth-child(10) {
        --stagger: 10;
    }
    .slide-enter-content > *:nth-child(11) {
        --stagger: 11;
    }
    .slide-enter-content > *:nth-child(12) {
        --stagger: 12;
    }
    .slide-enter-content > *:nth-child(13) {
        --stagger: 13;
    }
    .slide-enter-content > *:nth-child(14) {
        --stagger: 14;
    }
    .slide-enter-content > *:nth-child(15) {
        --stagger: 15;
    }
    .slide-enter-content > *:nth-child(16) {
        --stagger: 16;
    }
    .slide-enter-content > *:nth-child(17) {
        --stagger: 17;
    }
    .slide-enter-content > *:nth-child(18) {
        --stagger: 18;
    }
    .slide-enter-content > *:nth-child(19) {
        --stagger: 19;
    }
    .slide-enter-content > *:nth-child(20) {
        --stagger: 20;
    }
}

/* sticky header fixes */

article h1,
article h2 {
    scroll-margin-top: 3.5em;
}

article h3 {
    scroll-margin-top: 4em;
}

article h4 {
    scroll-margin-top: 4.5em;
}

article h5 {
    scroll-margin-top: 5em;
}

article h6 {
    scroll-margin-top: 5.5em;
}