html {
    --theme-color: rgb(55, 212, 236);
}
article > p {
    text-indent: 2em;
}
[class^='drawio-viewer-index-'] {
    display: flex;
    justify-content: center;
}
.token.comment {
    color: #d73a49;
    font-style: italic;
    font-family: system-ui;
}
::marker {
    font-weight: bolder;
    border-right: 0.5em;
}
.sidebar {
    border-right: none;
    box-shadow: rgb(0 0 0 / 10%) 4px 0 6px -1px, rgb(0 0 0 / 6%) 2px 0 4px -1px;
}
.app-nav ul {
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
}
.app-nav {
    position: fixed;
}
.app-nav:hover ul {
    opacity: 1;
}
.markdown-section figure,
.markdown-section p {
    margin: 0.2em 0;
}
.search {
    border-radius: 1em;
    margin: 0.2em 0.5em;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 6%) 0px 2px 4px -1px;
}
.search input:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}
.sidebar-toggle {
    border-radius: 0 30% 0 0;
}
.input-wrap:before {
    font-family: 'Material Icons Round';
    color: #000;
    font-size: 1.7em;
    margin: 0 0.5em;
    content: 'search';
}
.app-nav ul {
    opacity: 0.5;

    transition: all 0.5s !important;
    background-color: #fefefe;
    border-radius: 0.5em;
    padding: 0.3em 0.5em;
    box-sizing: border-box;
    border: 0 !important;
}
.clear-button::before {
    content: 'close';
    font-family: 'Material Icons Round';
    color: #000;
    font-size: 1.7em;
}
.clear-button svg {
    display: none;
}

.docsify-copy-code-button {
    border-radius: 50% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 2.3rem;
    width: 2.3rem;
    margin: 0.5em;
    background-color: #eee;
}
.docsify-copy-code-button span {
    display: none;
}
.docsify-copy-code-button:before {
    content: 'content_copy';
    font-family: 'Material Icons Round';
    color: #fff;
    font-size: 1.4rem;
}

.markdown-section {
    color: #000000c9;

    background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.04) 3%, transparent 0),
        linear-gradient(1turn, rgba(60, 10, 30, 0.04) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
    font-family: Robot Mono;
}

.markdown-section code,
.markdown-section pre {
    background-color: #fff;
    border-radius: 1em;
}
.markdown-section pre {
    border-radius: 10px;
    box-shadow: rgb(174 174 174 / 55%) 2px 5px 20px;
}
.markdown-section pre:before {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    content: '';
    height: 1em;
    width: 20%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url(./dots.svg);
}
.markdown-section code,
.markdown-section output:after,
.markdown-section pre {
    font-family: Robot Mono, Roboto Mono, Monaco, courier, monospace, -apple-system, system-ui, Segoe UI, Roboto,
        Robot Mono, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', Arial;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #c8c8c8;
}