araozu.dev/public/blog.css

:not(pre)>code {
    font-family: "Iosevka Fixed Web", Iosevka, monospace;
    border: solid 1px var(--c-border-2);
    padding: 0 0.25rem;
    border-radius: 0.25rem;
}

pre.astro-code {
    padding: 1rem;
    border-radius: 0.5rem;
    border: solid 1px var(--c-border-1);
    font-size: 0.8rem;
}

pre.astro-code>code {
    counter-reset: step;
    counter-increment: step 0;
}

pre.astro-code>code .line::before {
    content: counter(step);
    counter-increment: step;
    width: 1rem;
    margin-right: 1.5rem;
    display: inline-block;
    text-align: right;
    color: rgba(115, 138, 148, .4)
}

#blog p {
    margin: 1rem 0;
}

#blog h2 {
    font-size: 1.5rem;
    font-family: "Iosevka Etoile Web", serif;
    font-weight: 900;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

#blog h3 {
    font-size: 1.25rem;
    font-family: "Iosevka Etoile Web", serif;
    font-weight: 900;
    margin-top: 2.25rem;
    margin-bottom: 1.5rem;
}

#blog li {
    list-style-type: circle;
    margin: 0.5rem 0;
}

#blog a {
    text-decoration: underline;
    color: #3b82f6;
}

#blog img {
    max-height: 400px;
    display: inline-block;
}

#blog p:has(> img) {
    text-align: center;
}

#blog blockquote {
    border-left: 5px solid var(--c-border-1);
    padding-left: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

@media (prefers-color-scheme: dark) {

    .astro-code,
    .astro-code 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;
    }
}