@import url("monokai.css");

:root {
    --pico-font-family: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
    --pico-font-size: clamp(1rem, 0.9545rem + 0.2557vw, 1.1rem);
    --pico-line-height: 1.6;
    --pico-block-spacing-vertical: 2rem;
    --pico-typography-spacing-vertical: 2rem;
}

h1 {
    --pico-font-size: 2.3rem;
    --pico-line-height: 1.4;
}
:is(h1, h2, h3, h4, h5, h6, header, footer, .tags, .meta) {
    font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
}
:is(h2, h3, h4, h5, h6) {
    scroll-margin-top: 1rem;
    .anchor:before {
        content: "¶";
        color: var(--pico-muted-color);
        text-decoration: none;
        position: absolute;
        margin-left: -1.5rem;
        opacity: 0;
    }
    &:hover .anchor:before {
        opacity: 1;
    }
}
:is(h3, h4, h5, h6) {
    --pico-font-weight: normal;
}

@media (min-width: 1024px) {
    body > header,
    body > main,
    body > footer {
        max-width: 40rem;
    }
}

body {
    text-autospace: normal;
    overflow-wrap: anywhere;
    line-break: strict;
}

a {
    --pico-text-decoration: none;
}

pre code {
    --pico-code-color: #f8f8f2;
}

ul ul {
    margin-top: 0.5rem;
    li {
        list-style: disc;
    }
}

img.avatar {
    display: inline-block;
    height: auto;
    border-radius: 60px;
    width: 120px;
}

a.meta,
a.tags {
    text-wrap: nowrap;
    color: var(--pico-secondary);
    text-decoration-color: var(--pico-secondary);
    padding: 0;
    margin: 0 0.1rem;
    :not(.tags) + & {
        margin-left: 0.3rem;
    }
    & + :not(.tags) {
        margin-right: 0.3rem;
    }
    &:first-of-type {
        margin-left: 0;
    }
    &:last-of-type {
        margin-right: 0;
    }
    body.page main & {
        font-size: smaller;
    }
}

a.icon {
    color: var(--pico-muted-color);
    &:hover {
        color: var(--pico-contrast);
    }
    svg {
        vertical-align: text-top;
        height: 1.2rem;
    }
}

body.page > header {
    padding-block: 4rem 0;
    text-align: center;
    word-break: keep-all;
    h1 {
        margin: 1rem auto 5px;
        text-indent: 0.4rem;
        color: var(--pico-contrast);
        font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
    }
    img.avatar {
        width: 100px;
        transition: opacity var(--pico-transition);
        &:hover {
            opacity: 0.8;
        }
    }
    nav {
        justify-content: center;
    }
}

body.post > header {
    nav ul {
        align-items: flex-start;
        flex-shrink: 0;
        &:first-child {
            flex-direction: column;
            align-items: start;
            li:last-child {
                &:after {
                    content: " »";
                }
            }
        }
    }
    h1 {
        @media (min-width: 768px) {
            word-break: auto-phrase;
        }
    }
    div.meta {
        display: flex;
        align-items: center;
        justify-content: end;
        flex-wrap: wrap;
        gap: 10px;
        img.avatar {
            width: 2rem;
        }
        a.author {
            flex-shrink: 0;
            font-weight: 500;
            color: var(--pico-h2-color);
            text-decoration-color: var(--pico-h2-color);
            margin-right: auto;
        }
        a.date {
            margin-left: auto;
        }
    }
}

body > footer {
    color: var(--pico-muted-color);
    font-size: smaller;
}

article {
    box-shadow: revert;
    background-color: revert;
    padding: revert;

    em {
        font-style: normal;
        font-weight: bold;
        font-size: larger;
    }
    cite {
        font-size: smaller;
    }

    p:not(:has(code), blockquote p) {
        text-align: justify;
    }

    table {
        th {
            text-wrap: nowrap;
        }
        display: block;
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    iframe {
        margin-bottom: var(--pico-typography-spacing-vertical) !important;
        max-width: 100%;
    }
    figure {
        margin-bottom: var(--pico-typography-spacing-vertical);
    }
    blockquote p:last-child {
        margin-bottom: 0;
    }

    sup {
        a::before {
            content: " [";
        }
        a::after {
            content: "]";
        }
    }
    div.footnotes::before {
        content: "";
        display: block;
        border-top: 1px solid var(--pico-muted-border-color);
    }
    div.footnotes::before,
    hr {
        width: 30%;
        margin: var(--pico-typography-spacing-vertical) auto;
    }
}

article img:not(table img) {
    border-radius: var(--pico-border-radius);
    min-width: 120px;
    height: auto;

    &.thumb {
        border-radius: 0;
        max-width: 160px;
    }
    &.w50 {
        width: 49%;
    }
    &.w100 {
        width: 100%;
    }
    &.left {
        float: left;
        margin: 0 var(--pico-spacing) var(--pico-typography-spacing-vertical) 0;
    }
    &.right {
        float: right;
        margin: 0 0 var(--pico-typography-spacing-vertical) var(--pico-spacing);
    }

    @media (max-width: 768px) {
        float: none;
        display: block;
        margin: 0 auto var(--pico-typography-spacing-vertical);
    }
}

:is(.clear, p, article, footer) {
    clear: both;
}

span.spoiler {
    border-radius: var(--pico-border-radius);
    background: var(--pico-muted-border-color);
    color: var(--pico-contrast);
    & > span[aria-hidden="true"] {
        opacity: 0;
        cursor: pointer;
    }
    & > span[aria-hidden="false"] {
        opacity: 1;
        cursor: unset;
    }
}

img.pixela {
    margin-left: 5px;
    min-height: 135px;
    background-color: white;
    filter: grayscale(100%);
    transition: var(--pico-transition);
    &:hover {
        filter: grayscale(0%);
    }
}