// place your custom styles here
.vp-blog-hero-description {
    text-align: center;
    margin: 0.75rem auto 0;
}

.vp-nav-logo {
    border-radius: 9999px;
}

.vp-blog-hero-image {
    border-radius: 2rem;
}

.vp-blogger-avatar {
    border-radius: 1rem;
}

$width: 48rem;
$height: 25rem;

.vp-page.vp-blog-home {
    & .vp-blog-mask:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: min($width, calc(100vw - 2rem));
        height: min($height, 100vh);
        z-index: 2;
        display: block;
        transform: translate(max(calc(min($width, calc(100vw - 2rem)) / -2), -50vw),
                calc(min($height, 100vh) / -2));
        backdrop-filter: blur(1rem);
        /* 边框模糊效果 */
        /* filter: blur(.25rem); */
        border-radius: 1rem;

        html[data-theme='dark'] & {
            background: #3333337f;
            box-shadow: 0.25rem 0.25rem #0000007f;
        }

        html[data-theme='light'] & {
            background: #cccccc7f;
            box-shadow: 0.25rem 0.25rem #6666667f;
        }
    }

    & .vp-blog-mask::after {
        opacity: unset;
        background: unset;

        html[data-theme='dark'] & {
            background: #0000007f;
        }
    }

    & .vp-blog-hero {
        padding: 2rem;

        html[data-theme='light'] & {
            color: var(--grey-darker);
        }
    }
}