:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --select-text-bg-color: #b5d6fc;
    --select-text-font-color: auto;
    --monospace: "Lucida Console", Consolas, "Courier", monospace;
    --title-bar-height: 20px;
}
html {
    font-size: 14px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: initial !important;
}

body {
    margin: 0px;
    padding: 0px;
    height: auto;
    inset: 0px;
    font-size: 1rem;
    line-height: 1.428571;
    overflow-x: hidden;
    background: inherit;
}
a.url {
    word-break: break-all;
}
a:active,
a:hover {
    outline: 0px;
}

::selection {
    text-shadow: none;
    background: var(--select-text-bg-color);
    color: var(--select-text-font-color);
}
#write {
    margin: 0px auto;
    height: auto;
    width: inherit;
    word-break: normal;
    overflow-wrap: break-word;
    position: relative;
    white-space: normal;
    overflow-x: visible;
    padding-top: 36px;
}
body.typora-export {
    padding-left: 30px;
    padding-right: 30px;
}
@media screen and (max-width: 500px) {
    body.typora-export {
        padding-left: 0px;
        padding-right: 0px;
    }
    #write {
        padding-left: 20px;
        padding-right: 20px;
    }
}
#write ol {
    position: relative;
}
*,
::after,
::before {
    box-sizing: border-box;
}
#write h1,
#write p {
    width: inherit;
    position: relative;
}
p {
    line-height: inherit;
}
h1 {
    break-after: avoid-page;
    break-inside: avoid;
    orphans: 4;
}
p {
    orphans: 4;
}
h1 {
    font-size: 2rem;
}

h1,
p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
a {
    cursor: pointer;
}
div.hr:focus {
    cursor: none;
}
li div {
    padding-top: 0px;
}
blockquote {
    margin: 1rem 0px;
}

li p {
    margin: 0.5rem 0px;
}
li blockquote {
    margin: 1rem 0px;
}
li {
    margin: 0px;
    position: relative;
}
blockquote > :last-child {
    margin-bottom: 0px;
}
blockquote > :first-child,
li > :first-child {
    margin-top: 0px;
}
@media print {
    body,
    html {
        border: 1px solid transparent;
        height: 99%;
        break-after: avoid;
        break-before: avoid;
        font-variant-ligatures: no-common-ligatures;
    }
    #write {
        margin-top: 0px;
        border-color: transparent !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .typora-export * {
        print-color-adjust: exact;
    }
    .typora-export #write {
        break-after: avoid;
    }
    .typora-export #write::after {
        height: 0px;
    }
    #write > p:nth-child(1) {
        margin-top: 0px;
    }
}
code {
    font-family: var(--monospace);
}
code {
    text-align: left;
    vertical-align: initial;
}
@media print {
    .typora-export h1 {
        break-inside: avoid;
    }
}

/**
         *  We v0.2
         */

:root {
    --we-bg-color: #ffffff;
    --we-text-color: rgba(0, 0, 0, 0.9);
    --we-text-pale-color: #8e8d91;
    --we-accent-color: #576b95;
    --we-accent-pale-color: #d1d6e5;
    --we-scrollbar-thumb-color: #bbbbbb;
    --we-scrollbar-thumb-hover-color: #aaaaaa;
    --we-hover-bg-color: #f5f5f5;
    --we-input-border-color: #42414920;
    --we-input-border-focus-color: #42414940;
    --we-blockquote-border-color: #8e8d9170;
    --we-hr-color: #eeeeee;
    --we-gutter-border-color: #bababa50;
    --we-hover-accent-color: #bababa;
    --we-table-border-color: #dbdbdb;
    --we-table-btn-color: #8e8d9190;
    --we-table-btn-hover-color: #000;
    --we-highlight-color: #33529d70;
    --we-code-tooltip-border-color: #f3f3f3;
    --we-img-meta-color: #5b469b;
    --we-blur-text-color: #dddddd;
    --we-heading-char-color: #dddddd;

    --bg-color: var(--we-bg-color);
    --text-color: var(--we-text-color);
    --md-char-color: var(--we-text-pale-color);
    --meta-content-color: var(--we-text-pale-color);

    --primary-color: var(--text-color);
    --primary-btn-border-color: var(--text-color);
    --primary-btn-text-color: var(--text-color);

    --active-file-bg-color: var(--we-hover-bg-color);
    --active-file-text-color: var(--text-color);
    --active-file-border-color: var(--we-hover-bg-color);

    --side-bar-bg-color: var(--bg-color);
    --item-hover-bg-color: var(--we-hover-bg-color);
    --item-hover-text-color: var(--text-color);

    --select-text-bg-color: var(--we-accent-pale-color);
    --rawblock-edit-panel-bd: var(--we-hover-bg-color);
    --blur-text-color: var(--we-blur-text-color);
    --heading-char-color: var(--we-heading-char-color);

    --window-border: 1px solid var(--we-hover-bg-color);
    --monospace:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

body {
    background-color: var(--bg-color) !important;
    font-family: "canger";
}

html {
    font-size: 18px;
}

content {
    transition-duration: 0s;
}

/* ======= scrollbar ====== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    transition: 1s;
}

::-webkit-scrollbar-thumb {
    background-color: var(--we-scrollbar-thumb-color);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: 1s;
}

::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: var(--we-scrollbar-thumb-hover-color);
    transition: 0.3s;
}

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

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

/* ======= sidebar ====== */

/* ======= search ======= */

/* ======= typography ====== */

content {
    overflow-y: scroll;
}

#write {
    background-color: var(--bg-color) !important;
    max-width: 768px;
    padding-left: 24px;
    padding-right: 16px;
    /* scrollbar width 8px */
    padding-bottom: 180px;
    line-height: 1.5;
}

h1 {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
    font-size: 1.8rem;
}

p {
    margin-block: 1.35rem;
}

blockquote {
    margin-block: 1.35rem;
    padding-left: 1rem;
    border-left: 2px solid var(--we-blockquote-border-color);
    color: var(--we-text-pale-color);
}

a {
    text-underline-offset: 0.3em;
    color: var(--we-accent-color);
}

a:hover {
    opacity: 0.85;
}

code {
    font-size: 0.9em;
    background-color: var(--we-hover-bg-color);
    border-radius: 2.5px;
    padding: 0.1em 0.5em 0.15em;
}

hr {
    border-top: 2px solid var(--we-hr-color);
    margin-block: 2.5rem;
}

ol {
    margin-block: 1.35rem;
    padding-inline-start: 2rem;
}

ol ol {
    margin-block: 0.5rem;
}

li p {
    margin: 0.8rem 0;
}

/* ======= others ====== */

@keyframes blink-bg {
    0%,
    49% {
        background-color: var(--we-accent-pale-color);
    }
}

@media print {
    @page {
        margin: 0 0 0 0;
    }
    body.typora-export {
        padding-left: 0;
        padding-right: 0;
    }
    #write {
        padding: 0;
    }
}