#container{
    margin: 20px auto;
    display: flex;
    gap: 2rem;
}


#container #left{
    flex: 2;
    background: #f0f0f3;
    box-shadow: 8px 8px 16px #d1d1d4, -8px -8px 16px #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
}
#container #right{
    flex: 1;
    background: #f0f0f3;
    box-shadow: 8px 8px 16px #d1d1d4, -8px -8px 16px #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}






#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{
    background-color: #eee;
}
#content pre{
    border: none;
    background-color: #eee;
    tab-size: 4;
    padding: 6px;
    overflow: auto;
    font-size: 65%;
    border-radius: 1px;
}
#content pre code{
    display: inline;
    padding: 0;
    margin: 0;
    overflow: visible;
    line-height: inherit;
    border: 0;
    white-space: pre;
    border-radius: 5px;
    font-family: SFMono-Regular,Consolas,liberation mono,Menlo,Courier,monospace;
}

#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;
}


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;
}



@media (max-width: 960px) {
    #container{
        flex-direction: column;
        max-width: 100%;
    }
    #container #left{
        margin: 0 1em;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .2), -4px -4px 4px #fff;
    }

    #container #right{
        margin: 0 1em;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .2), -4px -4px 4px #fff;
    }
}