@import './source/dy/iconfont.min.css';
@import './source/zj/fonts.css';
:root {
    /* dy color */
    --select-text-bg-color: #ffafa3; /* 文本选中背景色（粉红） */
    /*--primary-color: red;*/
    --focus-color: #ff5d52; /* 点击某些元素（如标题）显示的颜色（偏红） */
    --codeblockbg-color: #eee; /* 代码块背景色（灰色） */
    --codeblockfont-color: #555; /* 代码块默认字体颜色（黑色） */
    --titlebefore-color: #00c4b6; /* 各级标题点缀颜色（绿色） */
    --codeblocknum-color: rgba(128, 128, 255, 0.8); /* 代码块行编号颜色（蓝色） */
    --blockquoteicon-color: #5fa7e4; /* blockquote提示图标色（蓝色） */
    --blockquotebg-color: #f4fcff; /* blockquote背景色（淡蓝） */
    --ulol-color: #81accf; /* 有序无序列表前缀颜色（灰色） */
    --tableevenrow-color: #eee; /* 表格偶数行颜色（淡灰） */
    --tablefocusrow-color: rgba(100, 221, 221, 0.2); /* 表格鼠标悬停行颜色（淡蓝） */
    --tableborder-color: #c5c5c5; /* 表格边框色（黑色） */
    --tablethbg-color: #f4fcff; /* 表格表头背景色（淡蓝） */
    --toc-color: #00a0a0; /* 目录颜色（绿色） */
    --atext-color: black; /* 超链接文本颜色（黑色） */
    --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; /* 段落文本颜色（黑色） */
    /* dy font */
    --body-font: 'Source Sans Pro', '等距更纱黑体 SC', 'Helvetica Neue', Arial, sans-serif; /* 全局字体 */
    --code-font: 'JetBrains Mono'; /* 代码块以及行内代码字体 */
}



html {
    font-size: 17px;
}

body {
    font-family: var(--body-font);
    color: var(--body-color);
    -webkit-font-smoothing: antialiased;
    line-height: 1.8rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}

#write {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 160px;
}

/*
@media only screen and (min-width: 1400px) {
	#write {
		max-width: 1024px;
	}
}

@media only screen and (min-width: 1800px) {
	#write {
		max-width: 1200px;
	}
}
*/

#write p {
    line-height: 1.8rem;
    word-spacing: .05rem;
    color: var(--para-color);
}

#write>ul:first-child,
#write>ol:first-child {
    margin-top: 30px;
}

body>*:first-child {
    margin-top: 0 !important;
}

body>*:last-child {
    margin-bottom: 0 !important;
}



/** 超链接 **/


#write a {
    border-bottom:2px solid var(--abottom-color);
    padding: 0 4px;
    /*padding-top: 2px;*/
    transition: .3s;
    color: var(--atext-color);
    text-decoration: none;
}
#write a:hover {
    border-radius:6px;
    border-bottom:2px solid transparent;
    background-color:var(--abottom-color);
    color:#ffffffe6;
    cursor:pointer;
}
#write a[href*="muggledy"] {
    border-bottom:2px solid red;
}
#write a[href*="muggledy"]:hover {
    background-color:red;
}
#write h2 a, #write h4 a, #write a[alt="null"]{
    border-bottom: none !important;
    /*color: var(--code-color);*/
}
h2 a:hover:before, h4 a:hover:before, #write a[alt="null"]:hover:before{
    content: none !important;
}

/* 修复空链接（标题锚点）显示底部下划线的问题（padding宽度引起的问题），但是自定义锚点怎么处理？因为自定义的锚点链接里有一个空格，非空，所以自定义锚点时请额外加上alt="none"，这将会使得链接“消失” */
#write a:empty, #write a[alt="none"] {
    padding-left:0px; /*直接上display:none消除超链接会导致锚点失效，visibility:hidden又占位*/
    padding-right:0px;
}
#write a[alt="none"] span {
    display: none; /*消除空格或其他内容*/
}

/* 无样式超链接 */
#write a[alt="null"]:hover{
    background-color: inherit;
    border-radius: 0px;
    color: var(--atext-color);
}


/** 目录 **/


#write a.md-toc-inner {
    line-height: 1.6;
    white-space: pre-line;
    border-bottom: none;
    color: var(--toc-color);
}
.md-toc {
    margin-top: 50px;
    padding-bottom: 20px;
}
#write a.md-toc-inner:hover{
    text-decoration: underline;
    /* border-bottom: 2px solid var(--toc-color);text-decoration: none; */
    color: var(--toc-color);
    background-color: inherit;
    border-radius: 0px;
}
#write a.md-toc-inner code{
    color: var(--toc-color);
    background-color: #f3f4f4;
}
#write a.md-toc-inner:hover:before {
    content: none !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}

h1 code {
    font-size: inherit !important;
}
h2 code {
    font-size: inherit !important;
}
h3 code {
    font-size: inherit !important;
}
h4 code {
    font-size: inherit !important;
}
h5 code {
    font-size: inherit !important;
}
h6 code {
    font-size: inherit !important;
}



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


h1 {
    text-align: center;
    padding-bottom: 0.3em;
    font-size: 2.2em;
    line-height: 1.2;
    margin: 2.4em auto 1.2em;
    color: black;
}
/*
h1:after { //一级大标题下划线（为固定长度）
    content: '';
    display: block;
    margin: 0.2em auto 0;
    width: 100px;
    height: 2px;
    border-bottom: 2px solid var(--titlebefore-color);
}
*/
h2 {
    margin: 1.8em auto 1.2em;
    font-size: 1.8em;
    border-bottom: 2px solid var(--titlebefore-color);
}
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;
}
#write>h2.md-focus:before {
    color: var(--focus-color);
}
#write>h2.md-focus {
    border-bottom-color: var(--focus-color);
}

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

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

#write h5::before,
#write 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;
}
#write h5.md-focus:before, #write h6.md-focus:before{
    color: var(--focus-color);
}
#write h5, #write h6 {
    /* margin-left: 2em; */
    font-size: 1rem;
}
#write h5::before {
    content: 'H5';
    top: 0.18rem;
}
#write h6::before {
    content: 'H6';
    top: 0.18rem;
}



p,
blockquote,
ul,
ol,
dl,
table {
    margin: 0.8em 0;
}

li>ol,
li>ul {
    margin: 0 0;
}

body>h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body>h1:first-child+h2 {
    margin-top: 0;
    padding-top: 0;
}

body>h3:first-child,
body>h4:first-child,
body>h5:first-child,
body>h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}

#write ol,
#write ul {
    padding-left: 35px;
    margin: .5rem 0;
}

#write ol>li>*,
#write ul>li>* {
    color: #333;
    font-weight: normal;
}

#write ol>li>*:not(ol):not(ul),
#write ul>li>*:not(ol):not(ul) {
    padding-left: .25rem;
}



/** 引用块（提示型） **/


blockquote {
    /* border: 1px solid #d1f3ff; */
    border-left: 5px solid var(--blockquoteicon-color);
    padding: 10px 15px;
    color: #3f3f3f;
    background-color: var(--blockquotebg-color); /* white */
    border-radius: 3px;
    position:relative;
}

/* 给提示块加info图标 */
blockquote>* {
    margin-left: 2rem !important;
}
blockquote::before {
    content: '\e613';
    font-family: "iconfont";
    color: var(--blockquoteicon-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: large;
    font-weight: 600;
}
/*
blockquote:hover {
    border-left: 5px solid var(--focus-color);
}
blockquote:hover:before {
    color: var(--focus-color);
}
*/


/** 表格样式 **/


table {
    padding: 0;
    word-break: initial;
}
/*
table tr {
    border-top: 1px solid var(--main-6);
    margin: 0;
    padding: 0;
}
*/
table tr:nth-child(2n) {
    background-color: var(--tableevenrow-color);
}
table tr th {
    font-weight: bold;
    border: 1px solid var(--tableborder-color);
    background-color: var(--tablethbg-color);
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid var(--tableborder-color);
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}
table tr:hover {
  background-color: var(--tablefocusrow-color);
}


/** 代码块 **/


#write .CodeMirror pre {
    font-family: var(--code-font);
    font-size: 0.95em;
    padding-left: 12px;
}
.md-fences {
    background: var(--codeblockbg-color);
    border-radius: 3px;
    color: var(--codeblockfont-color);
    padding: 0 4px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-height: 1.6em;
}

/* 行号左框线 */
/*
#write .CodeMirror-gutters {
    border-right: 1px solid rgba(204, 51, 0);
}
*/

/* 代码块行号颜色 */
.cm-s-inner .CodeMirror-linenumber {
    /* width: 2ch !important; */
    color: var(--codeblocknum-color);
}

/* 代码块光标线条宽度、颜色 */
#write .CodeMirror-cursors .CodeMirror-cursor {
    border-left: 2px solid var(--focus-color);
}

/* 蓝色行内数学公式 */
/*
[md-inline='inline_math'] {
    color: blue;
    font-size: 100%;
}
*/

/* 修复行间公式在手机端屏幕宽度较小时公式极端缩小的问题，但是打印为pdf时仍要设为100%，否则有滚动条 */
@media only screen and (max-width: 800px) {
    .MathJax_SVG_Display svg{
        max-width: inherit !important;
    }
}


/** 行内代码 **/


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


/** 脚注（上标） **/


#write .md-footnote {
    background-color: var(--footnotebg-color);
    color: var(--footnote-color);
}

/* 脚注上标链接禁止显示下划线样式 */
#write sup.md-footnote a{
    color: inherit !important; /* 鼠标hover时禁止颜色发生变化 */
    border-bottom: none;
    padding: 1px;
    background-color: inherit;
}


/** 文本高亮 **/


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


/** 分割线 **/


/*
hr {
    height: 1px;
    padding: 0;
    margin: 16px 0;
    background-color: var(--split-color);
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}
*/
hr { /* 来自next主题样式 */
    background-image: repeating-linear-gradient(-45deg, var(--split-color), var(--split-color) 4px, transparent 4px, transparent 8px);
    border: 0;
    height: 3px;
    margin: 40px 0
}



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

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


/** 导出html文件，修复流程图在手机端高度太大的问题 **/


.md-diagram-panel svg{
    max-width: inherit !important;
    height: inherit !important;
}



/* @media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
} */

/* .md-fences {
    background-color: #f8f8f8;
} */

#write pre.md-meta-block {
    /* padding: 1rem; */
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
    bottom: .375rem;
    /* bottom: .575rem; */
}

#write>h3.md-focus:before {
    left: -1.5625rem;
    top: .375rem;
}

#write>h4.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write>h5.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write>h6.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}



/** 图片 **/


.md-image {
    margin: 24px auto; /* 图片上下边距24像素 */
}
.md-image img {
    border-radius: 4px;
}

/* 当按`![shadow-随便写]()`格式写时（或`<img src="" alt="shadow-随便写">`），会有阴影 */
.md-image img[alt|='shadow'] {
    box-shadow: #84A1A8 0px 10px 15px;
    background-size: 100% 100%;
    cursor: default;
    border-left: 0;
    border-right: 0;
}

/* 模糊特效 */
.md-image img[alt|='blur'] {
    filter:blur(6px);
    -webkit-filter:blur(6px);
    -moz-filter:blur(6px);
    -ms-filter:blur(6px);
    -o-filter:blur(6px);
    transition: all 0.2s linear;
}
.md-image img[alt|='blur']:hover {
    filter:none;
    -webkit-filter:none;
    -moz-filter:none;
    -ms-filter:none;
    -o-filter:none;
}

.md-image>.md-meta {
    border-radius: 3px;
    font-family: var(--body-font);
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
}



.md-tag {
    color: inherit;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}

/* focus mode */

.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: var(--body-font);
}

.file-node-content:hover .file-node-icon {
    color: var(--titlebefore-color);
}
.file-node-content:hover {
    cursor: pointer;
    color: var(--titlebefore-color) !important;
}
.outline-item:hover {
    color: var(--titlebefore-color) !important;
}
/*
.mac-seamless-mode #typora-sidebar {
    background-color: var(--side-bar-bg-color);
}
*/
.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #e6f0fe;
}

/* 侧边栏 */
/*
.file-list-item.active {
    background: var(--active-file-bg-color);
    color: var(--active-file-text-color);
    border-left: 4px solid var(--main-6);
}
.file-tree-node.active>.file-node-background {
    background-color: var(--active-file-bg-color);
    border-left: 4px solid var(--main-6);
    border-color: var(--active-file-border-color);
}
*/

@media print {
    .typora-export * {
        -webkit-print-color-adjust: exact;
    }
    html {
        font-size: 16px!important;
    }
    body {
        font-family: Times, 'SimSun', serif!important;
        color: #000000!important;
    }
    p {
        color: #000000!important;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
    .MathJax_SVG_Display svg{
        max-width: 100% !important;
    }
}



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


#write ul li, #write ol li, #write .ul .li, #write .ol .li {
    list-style-type: none;
}
#write ul>li:not(.tab):before, #write .ul>.li:not(.tab):before {
    margin-left: -22px;
    margin-top: 10px;
    width: .62em;
    height: .62em;
    border: .1em solid var(--ulol-color); /* #81d8cf */
    border-radius: .31em;
    background: 0 0;
    content: '';
    line-height: .42em;
}
#write ol li:before, #write ul li:before, #write .ol .li:before, #write .ul .li:before {
    position: absolute;
    background: var(--ulol-color); /* #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;
}
#write ol li:first-child, #write .ol .li:first-child { /* https://www.w3school.com.cn/cssref/pr_gen_counter-increment.asp */
    counter-reset: li;
}
#write ol li:hover:before, #write ul li:hover:before, #write .ol .li:hover:before, #write .ul .li:hover:before {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}
#write ul>li:not(.tab):hover:before, #write .ul>.li:not(.tab):hover:before{
    border-color: var(--focus-color);
}
#write ol>li:before, #write .ol>.li:before {
    margin-top: 6px;
    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;
}

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

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


/** 小标签 **/


font {
    display: inline;
    padding: .2em .6em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--spannote-color);
}
font[title="red"] {
    background-color:#e91e64;
}
font[title="blue"] {
    background-color:#02aaf4;
}
font[title="yellow"] {
    background-color:#ffc50a;
}
font[title="green"] {
    background-color:#8bc34a;
}
font[title="gray"] {
    background-color:#4c4c4c;
}


/** 强调型文本 **/


span[alt='emp'] {
    border-bottom: 4px dotted var(--emptext-color);
}
span[alt='underline'] {
    border-bottom: 2px solid var(--emptext-color);
}
span[alt='wavy'] {
    text-decoration-style: wavy;
    text-decoration-line: underline;
    text-decoration-color: var(--emptext-color);
}


/** 折叠标签 **/


details {
    display: block;
    padding: 16px;
    margin: 1em 0;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    -webkit-transition: all .28s ease;
    -moz-transition: all .28s ease;
    -o-transition: all .28s ease;
    -ms-transition: all .28s ease;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
    border: 1px solid #f6f6f6;
}
summary {
    display: list-item;
}
details summary {
    cursor: pointer;
    padding: 16px;
    margin: -16px;
    border-radius: 4px;
    color: var(--detailstxt-color);
    font-size: .875rem!important;
    font-weight: 700;
    position: relative;
    line-height: normal;
}
details>summary {
    background: var(--detailsbg-color);
}
details[open] {
    border-color: var(--detailsborder-color);
}
details[open]>summary {
    color: #444;
    margin-bottom: 0;
}
details[open]>summary {
    border-bottom: 1px solid var(--detailsborder-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 折叠框、视频、音频标签点击时候会出现黑色边框，极不美观，去除 */
summary:focus {
    outline: none !important;
}
video:focus{
    outline: none !important;
}
audio:focus{
    outline: none !important;
}


/** 隐藏型文本 **/


span[alt="hide"] {
    color: transparent;
    background: var(--hidetextcover-color);
    border-radius: 2px;
    -webkit-transition: all .28s ease;
    -moz-transition: all .28s ease;
    -o-transition: all .28s ease;
    -ms-transition: all .28s ease;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease;
}
span[alt="hide"]:hover {
    color:var(--hidetext-color);
    background:0 0
}


/** 彩虹变换字体特效（来自黑石博客） **/


@-webkit-keyframes rainbowan {
    to {
        background-position: -2000vw;
    }
}
@keyframes rainbowan {
    to {
        background-position: -2000vw;
    }
}
span[alt="rainbow"], span[alt="rainbow"] * {
    padding-top: 3px;
    background-image: linear-gradient( to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
    background-size: 110vw;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-animation: rainbowan 60s linear infinite;
    animation: rainbowan 60s linear infinite;
}


/** 一款时尚的span字体，来自QinXS **/


span[alt="modern"] {
    display: inline;
    padding: 5px 10px;
    border-radius: 20px;
    font-family: var(--body-font);
    font-size: 1em;
    letter-spacing: .2em;
    color: red;
    text-shadow: 0 8px 9px #c4b59d, 0 -2px 1px #fff;
    font-weight: 700;
    background: linear-gradient(to bottom,#ece4d9 0,#e9dfd1 100%);
}


/** volantis文本按钮样式 **/


span[alt="btn"] {
    color: var(--spanbtn-color);
    border: 1px solid var(--spanbtn-color);
    padding: 3px 4px 2px;
    margin: 4px;
    line-height: 1.1;
    border-radius: 2px;
}
#write span[alt="btn"] a{
    color: var(--spanbtn-color);
    border-bottom:none;
    background-color:inherit;
    transition: none;
}
span[alt="btn"]:hover {
    color: var(--focus-color);
    border: 1px solid var(--focus-color);
}
#write span[alt="btn"]:hover a{
    color: var(--focus-color);
}


/** 抖音字效 **/


@-webkit-keyframes uk-text-shadow-glitch{0%{text-shadow:none}25%{text-shadow:-1px -1px 0 #ff0048,1px 1px 0 #3234ff}50%{text-shadow:1px -1px 0 #ff0048,-1px 1px 0 #3234ff}75%{text-shadow:-1px 1px 0 #ff0048,1px -1px 0 #3234ff}to{text-shadow:1px 1px 0 #ff0048,-1px -1px 0 #3234ff}}@keyframes uk-text-shadow-glitch{0%{text-shadow:none}25%{text-shadow:-1px -1px 0 #ff0048,1px 1px 0 #3234ff}50%{text-shadow:1px -1px 0 #ff0048,-1px 1px 0 #3234ff}75%{text-shadow:-1px 1px 0 #ff0048,1px -1px 0 #3234ff}to{text-shadow:1px 1px 0 #ff0048,-1px -1px 0 #3234ff}}

span[alt="shake"] {
    -webkit-animation: uk-text-shadow-glitch .95s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
    animation: uk-text-shadow-glitch .95s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
}