@charset "utf-8";

:root,
:root[data-theme="light"] {

    --bg: #fdfeff;
    --bg-subtle: color-mix(in srgb, var(--bg), black 0.5%);


    --bg-subtler: color-mix(in srgb, var(--bg), black 20%);
    --bg-strong: color-mix(in srgb, var(--bg), white 10%);
    --bg-stronger: white;

    --text: #2f3236;
    --text-subtle: color-mix(in srgb, var(--text), white 20%);
    --text-subtler: color-mix(in srgb, var(--text), white 40%);
    --text-subtlest: color-mix(in srgb, var(--text), white 60%);
    --text-strong: color-mix(in srgb, var(--text), black 50%);

 

    --border-color: color-mix(in srgb, var(--text), white 70%);
    --font-machine: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --height-header: 56px;
    --heigth-footer: 48px;

    --card-radius: 12px;
    --shadow: 0 0 10px rgba(0, 0, 0, 0.12);

    --width-wrapper: 1200px;
    --width-main: min(100%, 960px);
    
    --hr-color: hsl(from var(--text) h s l / 0.22);

    --font-serif : Georgia, "Times New Roman", serif;

}

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

    :root,
    :root[data-theme="dark"] {
        --bg: #333536;
        --bg-subtle: color-mix(in srgb, var(--bg), white 10%);
        --bg-subtler: color-mix(in srgb, var(--bg), white 20%);
        --bg-strong: color-mix(in srgb, var(--bg), black 12%);
        --bg-stronger: black;

        --text: #e9eaeb;
        --text-subtle: color-mix(in srgb, var(--text), black 20%);
        --text-subtler: color-mix(in srgb, var(--text), black 40%);
        --text-subtlest: color-mix(in srgb, var(--text), black 60%);
        --text-strong: color-mix(in srgb, var(--text), white 50%);
        --text-stronger: white;
        --post-bg: #404040;

        --border-color: color-mix(in srgb, var(--text), black 70%);
    }


}


html {
    font-size: 16px;
}

body {
    color: var(--text);
    background-color: var(--bg);
    font: 1rem/1.5 system-ui, "-apple-system", "Segoe UI", sans-serif, "Helvetica Neue", Tahoma, Verdana, "Microsoft YaHei", Arial;
    clear: both;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    list-style: none;
    text-decoration: none;
    font-family: inherit;
    outline: 0;
}

a:not([role=button]) {
    color: var(--text-strong);
}

a:not([role=button]):hover {
    color: var(--text-stronger);
}


img {
    max-width: 100%;
}

img[src=''] {
    visibility: hidden;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size: 1.5rem;
}



small {
    font-size: 0.6rem;
}

.card {
    border: none;
    border-radius: var(--card-radius);
    background-color: var(--bg-subtle);
    overflow: hidden;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    &:hover {
        background-color: var(--bg);
        box-shadow: var(--shadow);
    }
}






/*==========construct=============*/
hr {
    color: var(--hr-color);
    border: none;
    height: 1px;
    background: linear-gradient(to right,
            transparent 0%,
            currentColor 8%,
            currentColor 92%,
            transparent 100%);
    margin-top: 1rem;
    margin-bottom: 1rem;
}



body {
    width: 100%;
}


.container {
    width:100%;
    max-width: 100%;
    overflow-x: hidden;
    
    margin: 0 auto;
    padding-top: var(--height-header);

    position: relative;

}



.site-header {
    --header-padding: 1.5rem;

    height: var(--height-header);
    
    
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    background-color: hsl(from var(--bg) h s l / 0.5);
    backdrop-filter: blur(8px);
    

    & hr{margin: 0;}


    & .wrap {
        width: min(97%, var(--width-wrapper));
        margin: 0 auto;
        box-shadow: 0 4px 10px -6px var(--header-shadow);
        height: inherit;
        display: flex;
        align-items: center;
        justify-content: space-between;


        padding:0 1.4rem;
        

        & .brand {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;

            & .title {
                font-size: 1.2rem;
                text-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
            }

            & .title {
                display:flex;
                align-items: center;
                gap: 2px;

                & svg.logo{
                    --icon-color:red;
                    width: 28px;
                    height: 28px;
                }

            }


        }

        & .subtitle {
            font-size: 0.85rem;
            color: var(--text-subtle);
            font-weight: 400;
        }

        & .right-zone {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        & .breadcrumb {
            font-size: 0.8rem;
            color: var(--text-subtle);
        }

        & .breadcrumb span:not(:last-child)::after,
        & .breadcrumb a:not(:last-child)::after {
            content: " / ";
            margin: 0 4px;
            color: hsl(from var(--text-subtle) h s l / 30%);
        }

        & .db-logo {
            height: var(--height-header);
            padding: 20px 5px;
            overflow: hidden;


            & img {
                width: auto;
                height: 100%;
                display: block;
                filter: brightness(0.6);

            }

        }

    }

}

@media (max-width: 680px) {
    .site-header{
        padding:0;

        & .wrap{
            padding: 0 var(--header-padding);

            & .right-zone { display: none; }
        }

        & hr{width: 100vw; }
    } 
}


main {
    width: var(--width-main);
    margin: 0 auto;

    padding: 0 1rem;
    min-height: 60vh;


}




footer.site-footer {
    width:100%;
    text-align: center;
    margin: 0 auto;
    padding: 1rem;



    a,
    p {
        font-size: 12px;
        color: rgb(from var(--text) r g b / 50%)
    }
}

.tag-cloud{
    width: var(--width-main);
    margin: 5rem auto 2rem auto;

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;


    & a{
        display:flex;
        justify-content: center;
        align-items: center;

        min-width: 3rem;
        font-size: 0.8rem;
        padding: 2px 12px;

        border-radius: 999px;
        border: 1px solid hsl(from var(--text) h s l / 30%);
        cursor: pointer;
        transition: all 0.2s ease;
        color: var(--text);
        text-decoration: none;
        text-align: center;

    }
}