@import"../my/font/iconfont.css";
@import"../my/font-line-scissorsjiandao/iconfont.css";
/* 页面相关字体font-bluebook */
@import "../my/font-blubook/fonts.css";
/* 这是typora文章的相关样式 */
/* 标题相关 */
:root {
    /* dy color */
    --nav-text-color: #27DCF1;
    /* 导航栏局部文本颜色 */
    --select-text-bg-color: #ffafa3;
    /* 文本选中背景色（粉红） */
    --primary-color: red;
    --bg-color: rgb(242, 242, 242);
    /* 整体背景色（白色）white,改动*/
    --sidebarbg-color: rgb(217, 217, 217);
    /* 侧边栏背景色（白色white），改动 */
    --focus-color: #ff5d52;
    /* 点击某些元素（如标题）显示的颜色（偏红） */
    --codeblockbg-color: #eee;
    /* 代码块背景色（灰色） */
    --codeblockfont-color: #555;
    /* 代码块默认字体颜色（黑色） */
    --codeblockline-color: #e0f8f8;
    /* 代码块选中行颜色（青色） */
    --titlebefore-color: #00c4b6;
    /* 各级标题点缀颜色（绿色） */
    --codeblocknum-color: rgba(128, 128, 255, 0.8);
    /* 代码块行编号颜色（蓝色） */
    --blockquoteicon-color: #5fa7e4;
    /* blockquote提示图标色（蓝色） */
    --blockquotebg-color: #f4fcff;
    /* blockquote背景色（淡蓝） */
    --ulol-color: #81accf;
    /* 有序无序列表前缀颜色（灰色） */
    --olfore-color: #fff;
    /* 有序列表字体颜色（白色） */
    --tableevenrow-color: #eee;
    /* 表格偶数行颜色（淡灰） */
    --tablefocusrow-color: #e0f8f8;
    /* 表格鼠标悬停行颜色（淡蓝） */
    --tableborder-color: #c5c5c5;
    /* 表格边框色（黑色） */
    --tablethbg-color: #f4fcff;
    /* 表格表头背景色（淡蓝） */
    --scrollbar-color: #9e9e9e;
    /* 滚动条颜色（灰色） */
    --toc-color: #00a0a0;
    /* 目录颜色（绿色） */
    --atext-color: black;
    /* 超链接文本颜色（黑色） */
    --ahover-color: #ffffffe6;
    /* 超链接悬停文本颜色（白色） */
    --abottom-color: #81d8cf;
    /* 超链接下划线颜色（青色） */
    --code-color: #ff3502;
    /* 行内代码前景色（红色） */
    --codebg-color: #f8f5ec;
    /* 行内代码背景色（淡红） */
    --footnote-color: #e96900;
    /* 脚注上标前景色（红色） */
    --footnotebg-color: #f8f8f8;
    /* 脚注上标背景色（淡灰） */
    --highlight-color: red;
    /* 高亮文本前景色（红色） */
    --highlightbg-color: yellow;
    /* 高亮文本背景色（黄色） */
    --split-color: #00c4b6;
    /* 分割线颜色（绿色） */
    --taskborder-color: red;
    /* 任务列表边框色（红色） */
    --taskfocus-color: #00c4b6;
    /* 任务列表选中填充色（绿色） */
    --spannote-color: #e91e64;
    /* 小标签背景色（红色） */
    --emptext-color: #fe5f58;
    /* 几款强调型文本的颜色（红色） */
    --hidetextcover-color: #a1a1a1;
    /* 隐藏文本遮罩颜色（灰色） */
    --hidetext-color: #444;
    /* 隐藏文本颜色（黑色） */
    --spanbtn-color: #44d7b6;
    /* 文本按钮颜色（绿色） */
    --detailstxt-color: rgba(68, 68, 68, .7);
    /* 折叠框summary文字颜色（灰色） */
    --detailsbg-color: #ebf9ed;
    /* 折叠框summary背景色（青绿色） */
    --detailsborder-color: #00c4b6;
    /* 折叠框边框色（绿色） */
    --body-color: #000000;
    /* 文本颜色（黑色） */
    --para-color: #000000;
    /* 段落文本颜色（黑色） */
    --commonstr-color: #232629;
    /* 常规字符串颜色（黑色） */
    --commonstrbg-color: #e3e6e8;
    /* 常规字符串背景色（灰色） */
    --timebodybg-color: #efeded;
    /* 时间轴主体部分背景色（灰色） */
    --sidelist-selected-color: #eeeeee;
    /* 侧边栏条目选中背景色（灰色） */
    --yamlbg-color: #f7f7f7;
    /* 头部YAML背景色（白色） */
    --yaml-color: #585858;
    /* 头部YAML字体颜色（黑色） */
    /* dy font */
    --body-font: 'Source Sans Pro', '等距更纱黑体 SC', 'Helvetica Neue', Arial, sans-serif;
    /* 全局字体（"Poppins", -apple-system, "Helvetica Neue", Helvetica, "Noto Sans", "Nimbus Sans L", Arial, "Liberation Sans", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;） */
    --code-font: 'JetBrains Mono';
    /* 代码块以及行内代码字体 */
}
body {
    margin: 0;
    font-family: 'Glow Sans SC', -apple-system, sans-serif;
    font-weight: 600;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%
  }

.iconfont {
    font-family: "iconfont" !important;
    /* font-size: 16px; */
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/** 有序、无序列表，来自Butterfly主题 **/


#articleContent ul li,
#articleContent ol li,
#articleContent .ul .li,
#articleContent .ol .li {
    list-style-type: none;
}

#articleContent ul>li:not(.tab):before,
#articleContent .ul>.li:not(.tab):before {
    margin-left: -22px;
    margin-top: 8px;
    width: .62em;
    height: .62em;
    border: .1em solid var(--ulol-color);
    /* #81d8cf */
    border-radius: .31em;
    background: 0 0;
    content: '';
    line-height: .42em;
}

#articleContent ol li:before,
#articleContent ul li:before,
#articleContent .ol .li:before,
#articleContent .ul .li:before {
    position: absolute;
    background: #81ACCF;
    /* #81d8cf */
    color: #fff;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

#articleContent ol li:first-child,
#articleContent .ol .li:first-child {
    /* https://www.w3school.com.cn/cssref/pr_gen_counter-increment.asp */
    counter-reset: li;
}

#articleContent ol li:hover:before,
#articleContent ul li:hover:before,
#articleContent .ol .li:hover:before,
#articleContent .ul .li:hover:before {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

#articleContent ul>li:not(.tab):hover:before,
#articleContent .ul>.li:not(.tab):hover:before {
    border-color: var(--focus-color);
}

#articleContent ol>li:before,
#articleContent .ol>.li:before {
    margin-top: 4px;
    margin-left: -25px;
    width: 1.65em;
    height: 1.65em;
    border-radius: 0.825em;
    content: counter(li);
    counter-increment: li;
    text-align: center;
    font-size: .65em;
    line-height: 1.7em;
}

/* 列表子项上下间隔调整 */
#articleContent ul li *,
#articleContent ol li *,
#articleContent .ul .li *,
#articleContent .ol .li * {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* 列表上下间隔调整 */
#articleContent ul li,
#articleContent ol li,
#articleContent .ul .li,
#articleContent .ol .li {
    margin-top: 7px;
    margin-bottom: 7px;
}

blockquote {
    border-left: 5px solid #5fa7e4;
    padding: 5px 15px;
    color: #3f3f3f;
    background-color: #f4fcff;
    border-radius: 3px;
    position: relative;
}

#articleContent blockquote p {
    margin: 0;
}


blockquote::before {
    content: '\e607';
    font-family: "iconfont";
    color: #5fa7e4;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: large;
    font-weight: 600;
}

blockquote>* {
    margin-left: 2rem !important;
}



/** 文本高亮 **/


#articleContent span[md-inline="highlight"] mark {
    background-color: var(--highlightbg-color);
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 2px;
    color: var(--highlight-color);
    font-weight: 500;
}

/** 文本加粗显示 **/


#articleContent span[md-inline="strong"] strong {
    padding: 0.1em;
    color: rgb(220, 53, 69);
    visibility: visible;
}


/* 透明渐变水平线 */
hr {
    /* width: 80%;
    margin: 0 auto;
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--split-color), rgba(0, 0, 0, 0)); */

    position: relative;
    margin: 2rem auto;
    width: calc(100% - 4px);
    border: 2px dashed #a4d8fa;
    background: #fff;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: #49b1f5;
    content: '\e6ec';
    font: normal normal normal 14px/1 iconfont;
    font-size: 20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
hr:hover::before {
left: 95%;
}
#articleContent del {
    padding: 1px 2px;
}

.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
    color: #22a2c9;
}

.cm-s-inner .cm-string {
    color: #22a2c9;
}


/** 任务列表小方框 **/


.md-task-list-item>input {
    margin-left: -1.3em;
    margin-top: 0.4rem;
    -webkit-appearance: none;
}

.md-task-list-item>input:before {
    content: '';
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    vertical-align: middle;
    text-align: center;
    font-size: 0.8rem;
    color: white;
    border-radius: 2px;
    /*background-color: white;*/
    border: 1px solid var(--taskborder-color);
    margin-top: -0.4rem;
    transition: all 0.2s linear;
}

.md-task-list-item>input:checked:before,
.md-task-list-item>input[checked]:before {
    content: '\2714';
    font-size: 0.625rem;
    color: white;
    border: 1px solid var(--taskfocus-color);
    background-color: var(--taskfocus-color);
    line-height: .8rem;
}

.md-task-list-item:before {
    content: none !important;
}

#articleContent input[type=checkbox] {
    position: absolute;
    top: 6px;
    left: -6px;
    background-color: inherit;
}

.md-task-list-item.task-list-done {
    text-decoration: line-through;
    color: #999;
}

.md-task-list-item.task-list-done span {
    color: #999;
}



/** 行内代码 **/


#articleContent p code {
    padding: 2px 4px;
    border-radius: 2px;
    font-family: var(--code-font);
    /*font-family: '微软雅黑';*/
    font-size: 0.9rem;
    color: var(--code-color);
    background-color: var(--codebg-color);
}


#articleContent p code {
    vertical-align: initial;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(231, 234, 237);
    background-color: green;
    border-radius: 3px;
    padding: 4px;
    font-size: 0.9em;
    color: rgb(255, 255, 255);
}


#articleContent p strong {
    color: red;
}




/** 不同级别标题样式 **/


h1 {
    text-align: center;
    padding-bottom: 0.3em;
    font-size: 2.2em;
    line-height: 1.2;
    margin: 1.2em auto 1.2em;
    display: block;
    position: relative;
}


h1:after {
    display: inline-block;
    width: fit-content;
    background: var(--titlebefore-color);
    bottom: -5px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    width: 100%;
    transition-delay: 0s;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

h1:hover:after {
    transform: scaleX(1);
}

h2 {
    line-height: 1.225;
    margin: 1.8em auto 1.2em !important;
    font-size: 1.8em;
    border-bottom: 2px solid var(--titlebefore-color) !important;
}

h2::before {
    content: '\e689' !important;
    /* 风车图标 */
    color: var(--titlebefore-color);
    font-family: "iconfont";
}

/* h2标题前缀旋转动画 */
@-moz-keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes avatar_turn_around {
    from {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

h2:before {
    display: inline-block;
    -webkit-animation: avatar_turn_around 1s linear infinite;
    -moz-animation: avatar_turn_around 1s linear infinite;
    -o-animation: avatar_turn_around 1s linear infinite;
    -ms-animation: avatar_turn_around 1s linear infinite;
    animation: avatar_turn_around 1s linear infinite;
    font-size: 34px;
    margin-left: -29px;
}

/* h2标题内容稍稍偏右一点 */
h2 * {
    margin-left: .18rem;
}

#articleContent>h2.md-focus:before {
    color: var(--focus-color);
}

#articleContent>h2.md-focus {
    border-bottom-color: var(--focus-color);
}

.about-content-description h2:before {
    content: none !important;
}

.about-content-description h2 {
    border-bottom: none;
}

h3 {
    font-size: 1.4em;
    line-height: 1.43;
    margin: 1.6em auto 1.2em;
    padding-left: 9px;
    border-left: 5px solid var(--titlebefore-color);
}

h4 {
    margin-top: 1.3em;
    font-size: 1.2em;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block;
    border: 1px solid var(--titlebefore-color);
    border-top: 4px solid var(--titlebefore-color);
}

/* 三级四级标题点击后的前缀提示图标 */
#articleContent>h3.md-focus:before,
#articleContent>h4.md-focus:before {
    width: auto;
    height: auto;
    background-color: var(--focus-color);
    color: #ffffff;
}

#articleContent>h3.md-focus,
#articleContent>h4.md-focus {
    border-color: var(--focus-color);
}

#articleContent h5::before,
#articleContent h6::before {
    position: absolute;
    right: calc(100% + .75em);
    top: 0;
    color: var(--titlebefore-color);
    /* #5b5b5b */
    font-size: 0.8rem;
    font-weight: bold;
    font-variant: 'small-caps';
    white-space: nowrap;
    /* 文本强制不换行 */
    border: 0;
}

#articleContent h5.md-focus:before,
#articleContent h6.md-focus:before {
    color: var(--focus-color);
}

#articleContent h5,
#articleContent h6 {
    /* margin-left: 2em; */
    font-size: 1rem;
}

#articleContent h5::before {
    content: 'H5';
    top: 0.18rem;
}

#articleContent h6::before {
    content: 'H6';
    top: 0.18rem;
}

/* 表格相关样式 */
#articleContent table th {
    background-color: #273f60;
    color: #fff;
}

#articleContent table td {
    background-color: #000000;
    color: #fff;
}