@media print
{    
    .no-print, .no-print *:not(.print)
    {
        display: none !important;
    }

    .print, .print *
    {
        display: block !important;
    }
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    background-color: #9EF5D2;
    background-image: linear-gradient(90deg,#87CEFA,#9EF5D2);
}

.content {
    gap: 8px;
}

@media (width < 1300px) {
    .content {
        display: flex;
        flex-direction: column;
        margin: 8px;
        gap: 8px;
    }

    .left-side {
        order: 2;
    }

    .main-content {
        order: 1;
    }

    .right-side {
        order: 3;
    }
}

aside {
    gap: 8px;
}


@media (width >= 1300px) {
    .sticky {
        position: sticky;
        top: 8px;
    }

    aside {
        width: 400px;
    }

    aside .card {
        overflow-x: hidden;
    }
}

main {
    gap: 8px;
}

.github-avatar {
    display: block;
    width: 260px;
    height: 260px;
    border-radius: 260px;
    margin: auto;
}

img {
    max-width: 100%;
}

.article-header {
    background-image: linear-gradient(90deg, #9EF5D2, #87CEFA);
}

.article-border-top,
.article-border-bottom {
    border: 2px solid;
    border-image: linear-gradient(to right, #9EF5D2, #87CEFA) 2;
}

.article-border-left {
    border: 2px solid #9EF5D2;
}

.article-border-right {
    border: 2px solid #87CEFA;
}

.markdown-body pre {
    color: #fafafa;
    background-color: rgb(21,27,35);
}

.comment {
    background-color: #ffffff;
}

.article-preview {
    overflow-x: hidden;
    overflow-y: hidden;
    outline: 0;
    scrollbar-gutter: stable;
}

.article-preview:focus {
    overflow-x: hidden;
    overflow-y: scroll;
}

.category-link {
    width: 100%; 
    display: flex; 
    align-items: center; 
    font-size: 1rem;
    transition: all 200ms ease;
    color: white;
}

.category-link:hover {
    color: white;
    background-color: #ec407a;
    padding-left: 1rem;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
  
::-webkit-scrollbar-thumb {
    background: DeepSkyBlue;
    cursor: default;
}

::-webkit-scrollbar-thumb:hover {
    background: DeepSkyBlue;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* 为最外层 ol 设置计数器 */
ol {
    list-style: none; /* 移除默认的数字标记 */
    counter-reset: level1; /* 初始化第一层计数器 */
}

/* 每一层 li 内增加对应的计数器 */
ol > li {
    counter-increment: level1; /* 递增第一级计数器 */
}

ol > li::marker {
    content: counter(level1) ". "; /* 显示第一级计数器 */
}

/* 第二层 ol 的样式 */
ol ol {
    counter-reset: level2; /* 初始化第二层计数器 */
}

ol ol > li {
    counter-increment: level2; /* 递增第二级计数器 */
}

ol ol > li::marker {
    content: counter(level1) "." counter(level2) ". "; /* 显示第一级和第二级计数器 */
}

/* 第三层 ol 的样式 */
ol ol ol {
    counter-reset: level3; /* 初始化第三层计数器 */
}

ol ol ol > li {
    counter-increment: level3; /* 递增第三级计数器 */
}

ol ol ol > li::marker {
    content: counter(level1) "." counter(level2) "." counter(level3) ". "; /* 显示第一级、第二级和第三级计数器 */
}

/* 第四层 ol 的样式 */
ol ol ol ol {
    counter-reset: level4; /* 初始化第四层计数器 */
}

ol ol ol ol > li {
    counter-increment: level4; /* 递增第四级计数器 */
}

ol ol ol ol > li::marker {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) ". "; /* 显示多层级计数器 */
}

/* 第五层 ol 的样式 */
ol ol ol ol ol {
    counter-reset: level5; /* 初始化第五层计数器 */
}

ol ol ol ol ol > li {
    counter-increment: level5; /* 递增第五级计数器 */
}

ol ol ol ol ol > li::marker {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) ". ";
}

/* 第六层 ol 的样式 */
ol ol ol ol ol ol {
    counter-reset: level6; /* 初始化第六层计数器 */
}

ol ol ol ol ol ol > li {
    counter-increment: level6; /* 递增第六级计数器 */
}

ol ol ol ol ol ol > li::marker {
    content: counter(level1) "." counter(level2) "." counter(level3) "." counter(level4) "." counter(level5) "." counter(level6) ". ";
}