:root {
    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

html {
    background: #f8f8f8
}

h1,
h2,
h3,
h4,
h5,
h6,
a[href] {
    color: #00baff
}

body {
    max-width: 800px;
    width: 100%;
    margin: 60px auto 100px auto;
    background: #fff;
    padding: 30px 80px;
    box-shadow: rgba(0, 0, 0, .2) 0 10px 30px;
    border-radius: 10px;
    position: relative
}

body:after {
    content: '我也是有底线的！';
    display: block;
    margin-right: 30px;
    padding-left: 8px;
    height: 8px;
    font-size: 15px;
    color: #aaa;
    line-height: 8px;
    white-space: nowrap;
    position: absolute;
    right: 0
}

img {
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .2) 0 5px 15px;
    margin: 20px 15px;
    max-width: calc(100% - 30px)
}

a[href] {
    text-shadow: rgba(0, 0, 0, .2) 0 1px 5px;
    transition: all .3s;
    text-decoration: none
}

a[href]:hover {
    opacity: .8;
    text-shadow: rgba(0, 0, 0, .5) 0 5px 10px
}

.emoji {
    width: 18px;
    height: 18px;
    box-shadow: none;
    border-radius: 0;
    margin: 0
}

code {
    background: rgba(0, 0, 0, .08);
    border-radius: 3px;
    padding: 0 7px
}

.prettyprint.linenums.prettyprinted {
    padding: 20px !important;
    box-shadow: rgba(0, 0, 0, .2) 0 10px 20px;
    margin: 20px 0;
    background: #eee;
    overflow: auto
}

.linenums code * {
    font-family: Consolas, monospace !important
}

.linenums code {
    background: 0
}

.kwd,
.tag {
    color: #dc3939;
    font-weight: bold
}

.lit {
    color: #46a609
}

.pun {
    color: var(--active)
}

.com,
.atn {
    color: #21a366;
    font-weight: bold
}

.str,
.atv {
    color: #d68f29
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: rgba(0, 0, 0, .2) 0 1px 5px;
    font-weight: bold;
    transition: all .3s;
    line-height: 40px
}

h1 {
    font-size: 35px;
    margin-top: 50px;
    line-height: 60px
}

h1 a {
    transition: all .3s
}

h2 {
    font-size: 28px
}

h3 {
    font-size: 26px
}

h4 {
    font-size: 24px;
    margin: 20px 0
}

h5 {
    font-size: 22px;
    margin: 15px 0
}

h6 {
    font-size: 20px;
    margin: 10px 0
}

blockquote p {
    border-left: var(--shadow) 4px solid;
    padding-left: 10px
}

* {
    max-width: 100%
}

img {
    border-radius: 4px;
    box-shadow: #0003 0 5px 15px;
    margin: 20px 15px;
    max-width: calc(100% - 30px)
}

.emoji {
    width: 18px;
    height: 18px;
    box-shadow: none;
    border-radius: 0;
    margin: 0
}

.linenums {
    overflow: auto
}

a[href] img {
    margin: 0 !important
}

pre.linenums {
    box-shadow: #0003 0 5px 15px;
    background: var(--background);
    padding: 6px;
    border-radius: 5px
}

ol.linenums {
    list-style: none;
    counter-reset: sectioncounter;
    margin: 0;
    padding: 0;
    padding: 14px
}

ol.linenums::-webkit-scrollbar {
    height: 6px
}

ol.linenums::-webkit-scrollbar-thumb {
    background: #8883
}

ol.linenums::-webkit-scrollbar-thumb:hover {
    background: #8885
}

ol.linenums::-webkit-scrollbar-thumb:active {
    background: #8882
}

ol.linenums li:before {
    content: counter(sectioncounter);
    counter-increment: sectioncounter;
    display: inline-block;
    width: 20px;
    text-align: right;
    padding: 0 10px 0 0;
    font-family: TERM;
    opacity: .8
}

:root {
    font-size: 17px;
    line-height: 30px;
    color: var(--active);
    padding: 0 25px
}

blockquote {
    color: #888;
    border-left: #aaa solid 5px;
    margin-left: 20px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative
}

h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
    content: "H1";
    position: absolute;
    left: -25px;
    font-size: 14px;
    opacity: 0;
    transform: translateX(15px) scale(0.7);
    transition: all .3s
}

h1:hover:before,
h2:hover:before,
h3:hover:before,
h4:hover:before,
h5:hover:before,
h6:hover:before {
    opacity: 1;
    transform: none
}

h1:before {
    content: "H1"
}

h2:before {
    content: "H2"
}

h3:before {
    content: "H3"
}

h4:before {
    content: "H4"
}

h5:before {
    content: "H5"
}

h6:before {
    content: "H6"
}

ul,
ol {
    padding-left: 25px
}

.task-list-li {
    margin-left: -1/5px
}

input[type="checkbox"] {
    margin-left: -27px;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--background);
    border-radius: 2px;
    position: relative;
    top: 6px;
    box-shadow: #0003 0 3px 8px
}

input[type="checkbox"]:before,
input[type="checkbox"]:after {
    content: "";
    position: absolute;
    background: var(--main)
}

input[type="checkbox"]:checked:disabled:before {
    width: 2px;
    height: 6px;
    transform: rotate(-45deg);
    top: 8px;
    left: 4px
}

input[type="checkbox"]:checked:disabled:after {
    width: 2px;
    height: 12px;
    transform: rotate(45deg);
    top: 3px;
    left: 10px
}

#counter {
    color: #999;
    position: absolute;
    top: -40px;
    right: 10px;
}

#footer {
    opacity: .5;
    position: absolute;
    bottom: -50px;
    width: 100%;
    left: 0;
    text-align: center;
    transition: opacity .3s;
    user-select: none;
}

#footer:hover {
    opacity: 1;
}

body {
    margin: 60px auto 100px auto;
}

@media screen and (max-width:920px) {
    html {
        margin: 0;
        padding: 0 !important;
        background: #FFFFFF
    }

    body {
        margin: 0 !important;
        padding: 20px !important;
        width: calc(100vw - 40px) !important;
        box-shadow: none;
        font-size: 15px;
        line-height: 1.8
    }

    h1:before,
    h2:before,
    h3:before,
    h4:before,
    h5:before,
    h6:before {
        opacity: 1;
        transform: translate(10px, -25px) !important
    }

    h1 {
        font-size: 28px;
        line-height: 1.5;
    }

    h2 {
        font-size: 25px
    }

    h3 {
        font-size: 23px
    }

    h4 {
        font-size: 21px
    }

    h5 {
        font-size: 19px
    }

    h6 {
        font-size: 17px
    }

    #footer {
        opacity: .5;
        bottom: -60px;
        padding: 30px 0;
    }
}