#container{
    max-width: 80%;
    margin: 20px auto;
    padding-left: 1em;
    padding-right: 1em;
    display: flex;
    gap: 2rem;
}


#container #left{
    flex: 2;
}
#container #right{
 flex: 1;
}

/*
search
*/

#left #search{
    background: #e6e7ee;
    box-shadow: inset 5px 5px 10px #d1d1d4, inset -5px -5px 10px #ffffff;
    border-radius: 1rem;
    padding: 0.5rem;
    margin-bottom: 2rem;
}
#left #search>div{
    display: flex;
    align-items: center;
}
#left #search>div>input{
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: none;
    outline: none;
    color: #444;
    transition: all 0.2s ease;
}


#left #articles{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
#left #articles>.article{
    background: #f0f0f3;
    box-shadow: 8px 8px 16px #d1d1d4, -8px -8px 16px #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease;
}
#left #articles>.article:hover{
    box-shadow: inset 3px 3px 6px #d1d1d4, inset -3px -3px 6px #ffffff;
}
#left #articles>.article:active{
    box-shadow: inset 3px 3px 6px #d1d1d4, inset -3px -3px 6px #ffffff;
}
.article>h2{
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
}
.article>h2>a{
    text-decoration: none;
    color: black;
}
.article>p{
    color: #666;
    word-break: break-all;
    white-space: break-spaces;
}
.article .gap{
    display: inline-flex;
    gap: 1em;
}
.article .tag{
    background: #f0f0f3;
    box-shadow: 3px 3px 6px #d1d1d4, -3px -3px 6px #ffffff;
    border-radius: 1rem;
    padding: 0.3em 0.5em;
    font-size: 0.875em;
    color: #666;
    transition: all 0.2s ease;
    text-decoration: none;
}
.article .tag:hover {
    cursor: pointer;
    box-shadow: inset 2px 2px 4px #d1d1d4, inset -2px -2px 4px #ffffff;
}
.article .archive{
    text-decoration: none;
    color: #666;
    padding: 0.3em 0.5em;
}
.article .time{
    color: #888;
    font-size: 0.9em;
}



/*
    右侧
*/
#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{}
#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{

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

    }

    #container #right{
    }

}