@charset "utf-8";

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

    --bg: #f7f9fd;
    --bg-subtle: color-mix(in srgb, var(--bg), black 10%);
    --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%);

    --featured: #5ac6e7;

    --post-bg: #f6f6f6;





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

}

@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: #e0e6ee;
        --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%);
        --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-subtle);}
a:not([role=button]):hover{color: var(--text-strong);}


img {max-width: 100%;}
img[src=''] { visibility: hidden;}

h1 { font-size: 2.2rem;}
h2 {    font-size: 1.9rem;}
h3 {    font-size: 1.5rem;}
h4 {    font-size: 1.2rem;}
h5 {    font-size: 1.0rem;}
small {    font-size: 0.6rem;}



/*==========construct=============*/

body{
    width:100%;
}

.container {
    width: min(100%, 1200px);
    max-width: 100%;
    overflow-x: hidden;
    margin: 0 auto;

    display: grid;
    grid-template-areas: 
    "header header"
    "main main"
    "footer footer";
    grid-template-columns: 1fr 180px;
    
    gap:1rem;

    header{grid-area: header;}
    main{grid-area: main;}
    footer{grid-area: footer;}

}

body[data-page="index"] .container {
    grid-template-areas: 
    "header header"
    "main aside"
    "footer footer";
    

    aside{
        width: 200px;
        grid-area: aside;
        padding-right: 1rem;
    }
}

@media (max-width:768px){
    body[data-page="index"] .container {
    grid-template-areas: 
    "header header"
    "main main"
    "aside aside"
    "footer footer";
    

    aside{
        width: 100%;
        grid-area: aside;
        padding: 1rem;
    }
}


}



.header {
    
    padding: 1rem;
    height: min-content;
    margin-bottom: 1.5rem;

    .title {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;

        a {
            height: 2.3rem;
            width: 2.3rem;
            display: block;
            font-size: 0;
        }

        h1 {
            margin-left: 0.6rem;
        }

        h1>a {
            all: unset;
            user-select: none;
            cursor: pointer;
        }

        img {
            width: auto;
            height: 100%;
            display: block;
        }
    }
    .subtitle {
        text-align: center;
        margin-top: 0.8rem;
        }
        
    & nav.header-menu a{ 
        padding:2px 12px;
        margin: 0 0.2rem;
    }
        
}

main{
    padding: 0 1rem;
    min-height: 60vh;
}



.pager{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    display: none;

    &.show{
        display: flex;
    }
    &.hide{
        display: none;
    }
    & a{
        display: inline-block;
        padding: 0.2rem 0.5rem;
        color: var(--text-subtler);
        background-color: var(--bg-subtle);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        cursor: default;

    }
    & a[href]{
        color: var(--text);
        background-color: var(--bg);
        cursor: pointer;

    }
}

footer {
    text-align: center;
    margin: 0 atuo;
    padding:1rem;

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

hr {
    color: var(--border-color);
    border: none;
    height: 1px;
    background: linear-gradient(to right,
            transparent 0%,
            currentColor 10%,
            currentColor 90%,
            transparent 100%);
    margin-top: 1rem;
    margin-bottom: 1rem;
}