#container{
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 80%;
}

#container #left{
    background: #f0f0f3;
    border-radius: 1rem;
    transition: box-shadow 0.2s ease;
    margin: 0 1em;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .2), -4px -4px 4px #fff;
    padding: 1.5rem;
}
#container #right{
    background: #f0f0f3;
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 0 1em;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .2), -4px -4px 4px #fff;
}


@media (max-width: 960px) {
    #container{
        flex-direction: column;
        max-width: 100%;
    }
    #container #left{
        margin: 0 6px;
        padding: 6px;
    }
    #container #right{
        margin: 0 6px;
    }
}


#title{
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 1em;
    word-wrap: break-word;

}

.time{
    color: #888;
    text-align: end;
    font-size: 0.9em;
}

#content{
    word-break: break-word;
}

/*
   code pre
*/
pre {
    white-space: pre;          /* 保留空格和换行（但配合下面 nowrap 不会自动换行） */
    overflow-x: auto;          /* 横向溢出时显示滚动条 */
    overflow-y: hidden;        /* 防止纵向滚动（可选） */
    -ms-overflow-style: thin;  /* IE/Edge 滚动条样式（较细） */
    scrollbar-width: thin;     /* Firefox 滚动条宽度：thin / auto / none */
    background-color: #666;
    color: whitesmoke;
    padding: 1em;
    box-sizing: border-box;
}

/* Webkit 浏览器（Chrome, Safari）自定义滚动条样式（可选） */
pre::-webkit-scrollbar {
    height: 8px;               /* 横向滚动条高度，很小 */
}

pre::-webkit-scrollbar-thumb {
    background-color: #aaa;    /* 滚动条滑块颜色 */
    border-radius: 4px;
}

pre::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道颜色 */
}

/* 如果你希望 code 标签继承或微调样式 */
code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 0.9em;
    line-height: 1.4;
    white-space: pre;          /* 确保 code 内也不换行 */
}

/**/
#content h1{
    margin-top: 0;
    margin-bottom: 0.5em;
}
#content h2{
    margin-top: 1em;
    margin-bottom: 0.25em;
    border-bottom: 1px solid black;
}
#content h3{
    margin-top: 1em;
    margin-bottom: 0.25em;
    border-bottom: 1px solid #8d6e63;
}
#content h4{
    margin-top: 1em;
    margin-bottom: 0.125em;
}

#content p{
    margin-top: 0;
    margin-bottom: 4px;
    line-height: 1.5em;
}

/*
表格
*/
table {
    display: block;
    overflow-x: auto;
    white-space: nowrap; /* 防止单元格换行，保持列宽 */
    padding: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 第一行作为“表头”样式 */
tbody tr:first-child td {
    font-weight: bold;
    background-color: #eef5ff;
    color: #1a4f8f;
    padding: 12px 16px;
    border-bottom: 2px solid #cfe0ff;
}

/* 其他行 */
tbody tr:not(:first-child) td {
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
}

/* 斑马纹（跳过第一行） */
tbody tr:nth-child(even):not(:first-child) {
    background-color: #fafbff;
}
tbody tr:nth-child(odd):not(:first-child) {
    background-color: #ffffff;
}

/* 悬停高亮 */
tbody tr:not(:first-child):hover {
    background-color: #f0f7ff !important;
}

/* 单元格默认左对齐，不换行 */
td {
    text-align: left;
}

/**/
figure.image{
    text-align: center;
}
figure.image-style-block-align-left{
    text-align: left;
}
img{
    max-width: 100%;
    height: auto;
}



/*
    右侧
*/
#right{}

#right>#tags{
    background: #f0f0f3;
    box-shadow: 8px 8px 16px #d1d1d4, -8px -8px 16px #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
#tags>h3{
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
#tags>#tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
#tags>#tag-list>span{
    background: #f0f0f3;
    box-shadow: 3px 3px 6px #d1d1d4, -3px -3px 6px #ffffff;
    border-radius: 1rem;
    padding: 0.5em 1em;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
#tags>#tag-list>span:hover{
    cursor: pointer;
    box-shadow: inset 2px 2px 4px #d1d1d4, inset -2px -2px 4px #ffffff;
}
#tags>#tag-list>span>a{
    text-decoration: none;
    color: #666;
}

#right #archives{
    background: #f0f0f3;
    box-shadow: 8px 8px 16px #d1d1d4, -8px -8px 16px #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
#archives>h3{
    font-size: 1.125em;
    font-weight: bold;
    margin-bottom: 1em;
}
#archives>div{
    display: flex;
    flex-direction: row;
    gap: 0.75em;
    flex-wrap: wrap;
}
#archives>div>span{
    background: #f0f0f3;
    box-shadow: 3px 3px 6px #d1d1d4, -3px -3px 6px #ffffff;
    border-radius: 1rem;
    padding: 0.5em 1em;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
#archives>div>span>a{
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}
#archives>div>span>a:hover{
    color: #333;
}