/* 文章分类书本样式 */
.chip-container .tag-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.chip-container .tag-chips a {
    margin: 7px 7px 10px;
}

.chip-container .chip {
    max-width: calc(100% / 4);
    min-width: 10em;
    height: 200px;
    position: relative;
    transition: .5s linear;
    padding: 19px 0;
    line-height: 20px;
    z-index: 990;
    border-radius: 5px 15px 15px 5px;
    transform-origin: left center 0;
}

.chip-container .notebook-cover::before {
    content: "";
    position: absolute;
    width: 10px;
    height: calc(100% + 2px);
    top: -1px;
    z-index: 100;
    border-radius: 2px;
    right: 25px;
    transition: 2s ease;
    background: linear-gradient(to right, #1e606e 0, #2e95aa 12%, #1e606e 25%, #2e95aa 37%, #1e606e 50%, #2e95aa 62%, #1e606e 75%, #2e95aa 87%, #1e606e 100%);
}

.chip .notebook-skin {
    height: 50px;
    width: 100%;
    background: #e8e8e0;
    margin-top: 42px;
    padding: 10px 32px 64px 10px;
    font-size: 19px;
    position: relative;
    z-index: 10;
    color: #222;
    text-align: left;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

.chip .notebook-skin:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 15px;
    left: 0;
    bottom: 0;
    background: #cddc39;
}

.notebook-cover {
    background: #cc4b48;
    height: 200px;
    width: 140px;
    position: absolute;
    border-radius: 5px 15px 15px 5px;
    z-index: 10;
    transition: .5s linear;
    transform-style: preserve-3d;
    transform-origin: left center 0;
}

.moleskine-wrapper {
    max-width: calc(100% / 4);
    min-width: 10em;
}

.moleskine-notebook:hover .notebook-cover {
    transform: rotateY(-50deg);
    z-index: 99;
    box-shadow: 20px 10px 50px rgba(0, 0, 0, .2);
}

.moleskine-notebook {
    height: 200px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    transition: .5s linear;
    border-radius: 5px 15px 15px 5px;
    transform-origin: left center 0;
}

.moleskine-notebook:hover {
    transform: rotateZ(-10deg);
}

.notebook-page.dotted {
    background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
    background-size: 100% 10px;
}

.chip-container .chip:hover {
    filter: invert(.1);
}

.notebook-page {
    height: 100%;
    width: 140px;
    position: absolute;
    top: 10px;
    background-color: #fbfae8;
    z-index: 0;
    border-radius: 5px 16px 16px 5px;
    overflow: hidden;
}

/* 小花花背景图基础样式 */
.card{
    background-image: url('/medias/flowerbg-white.png');
    background-position: top;
    background-attachment: fixed;
}

/* 暗黑模式下小花花背景图切换 */
#dark-mode .card{
    background-image: url('/medias/flowerbg-black.png');
}