* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--code-font-family)
}

video{
    width: 100%;
}

html {
    height: 100%;
    scroll-behavior: smooth
}

img {
    transition-duration: .2s
}

body {
    width: 100%;
    min-height: 100%;
    background-color: var(--body-bg);
    line-height: 1.5;
    flex-direction: column;
    transition-duration: .15s;
    display: flex
}

body>header>.nav-out>.nav>.blogName {
    padding: 0;
    font-size: 25px;
    font-family: 'Blueaka';
    /* color: transparent */
}

canvas{
    width: 100%;
}

@media screen and (max-width:1005px) {
    .nav {
        flex-direction: column;
        margin: 0 auto 0 auto;
        justify-content: center;
        line-height: 30px;
    }

    .home-container {
        flex-direction: column
    }

    .main>.home-container>.info-container {
        padding: 0 15px;
        max-width: 100%;
        position: inherit
    }

    .main>.home-container>.info-container>.info-container-inner {
        transform: rotateY(0);
        margin-top: 10px;
    }

    .main>.home-container>.info-container>.info-container-inner>.info {
        box-shadow: 0 0 0 0 var(--post-shadow-color)inset, 4px 4px 14px -13px var(--post-shadow-color)
    }

    .main>.home-container>.info-container>.info-container-inner>.info-link {
        box-shadow: 0 0 0 0 var(--post-shadow-color)inset, 4px 4px 14px -13px var(--post-shadow-color)
    }

    .main>.home-container>.info-container>.info-container-inner>.info>.fiximg>a>.info-icon {
        margin-top: 20px;
        max-height: 185px;
        border-radius: 3px
    }

    .main>.home-container>.info-container>.info-container-inner>.info>.info-icon:hover {
        transform: translate3d(0, 0, 0)
    }

    .main>.home-container>.info-container>.info-container-inner>.info-link>.link-button {
        width: 25%
    }

    .main>.home-container>.info-container>.info-container-inner>.info-link>.link-button:hover {
        transform: translate3d(0, 0, 0)
    }

    .main>.home-container>.post-container {
        max-width: 100%;
        width: 100%;
        padding: 0 15px 0 15px
    }

    .main>.home-container>.post-container>.main-post {
        box-shadow: 4px 4px 14px -13px var(--post-shadow-color)
    }

    .main>.home-container>.post-container>.post {
        box-shadow: 0 0 0 0 var(--tianyi-color), 4px 4px 14px -13px var(--post-shadow-color)
    }

    .main>.home-container>.post-container>.post:hover {
        box-shadow: 0 0 0 0 var(--tianyi-color), 4px 4px 14px -13px var(--post-shadow-color)
    }

    body>.topTitle {
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
        font-size: 7vmax;
        color: var(--text-color);
        width: 100%;
        transition-duration: .2s;
        height: 200px
    }

    body>.topTitle:hover {
        color: var(--tianyi-color)
    }

    body>header>.nav-out {
        margin: 0 15px;
    }

    body>header>.nav-out>.nav>.blogName {
        padding: 0;
        margin: auto;
        text-align: center;
        font-size: 25px;
        line-height: 40px;
        /* color: transparent */
    }

    body>header>.nav-out>.nav>.nav-container {
        margin: 0 auto;
        width: 100%;
        display: inline-flex;
        display: -webkit-inline-flex;
        flex-wrap: wrap;
        justify-content: center
    }

    body>header>.nav-out>.nav>.nav-container>.nav-content>.nav-link {
        padding: 0 5px;
        min-width: 50px;
        line-height: 40px;
        transition-duration: .2s;
    }

    body>header>.nav-out>.nav>.nav-container>.nav-content>.nav-link-active {
        padding: 0 5px;
        min-width: 50px;
        line-height: 40px;
        text-decoration: none;
    }

    body>header>.nav-out>.nav>.nav-container>.nav-content>.nav-link-active:hover {
        color: var(--tianyi-color);
        transition-duration: .2s;
    }

    body>header>.nav-out>.nav>.nav-container>.nav-content {
        width: 64px;
        line-height: 40px;
        height: 40px;
        margin: 0 3px;
    }
}

::selection {
    background-color: var(--selection-text-bg)
}

::-moz-selection {
    background-color: var(--selection-text-bg)
}

@media(prefers-color-scheme:dark) {
    body[data-theme=auto] {
        --body-bg: #3A3A3A;
        --post-bg: #2B2B2B;
        --header-bg: #262626;
        --post-shadow-color: #000;
        --text-color: #d9d9d9;
        --text-blogname-color: #ffffff;
        --page-button-color: #fff;
        --page-current-color: #717585;
        --tianyi-color: #66ccff;
        --post-code-bg: #333333;
        --post-code-text-color: snow;
        --post-reference-bg: #595959;
        --post-important-bg: #40405f;
        --code-block-bg: #272822;
        --selection-text-bg: #505074;
        --zh-font-family: "Microsoft YaHei";
        --code-font-family: Consolas, "Courier New", var(--zh-font-family);
    }

    @media(prefers-color-scheme:light) {
        body[data-theme=auto] {
            --body-bg: rgb(235, 235, 235);
            --post-bg: rgba(255, 250, 250);
            --header-bg: rgba(194, 194, 194);
            --post-shadow-color: #666699;
            --text-color: #666699;
            --text-blogname-color: #666699;
            --page-button-color: #474769;
            --page-current-color: #b1b6ce;
            --tianyi-color: #008ac5;
            --post-code-bg: #333333;
            --post-code-text-color: snow;
            --post-reference-bg: #595959;
            --post-important-bg: #C2C2C2;
            --selection-text-bg: #B1D8DD;
            --code-block-bg: #272822;
            --zh-font-family: "Microsoft YaHei";
            --code-font-family: Consolas, "Courier New", var(--zh-font-family);
        }
    }
}

body[data-theme=dark] {
    --body-bg: #3A3A3A;
    --post-bg: #2B2B2B;
    --header-bg: #262626;
    --post-shadow-color: #000;
    --text-color: #d9d9d9;
    --text-blogname-color: #ffffff;
    --page-button-color: #fff;
    --page-current-color: #717585;
    --tianyi-color: #66ccff;
    --post-code-bg: #333333;
    --post-code-text-color: snow;
    --post-reference-bg: #595959;
    --post-important-bg: #40405f;
    --code-block-bg: #272822;
    --selection-text-bg: #505074;
    --zh-font-family: "Microsoft YaHei";
    --code-font-family: Consolas, "Courier New", var(--zh-font-family);
}

body[data-theme=light] {
    --body-bg: #EBEBEB;
    --post-bg: #FFFAFA;
    --header-bg: #C2C2C2;
    --post-shadow-color: #666699;
    --text-color: #666699;
    --text-blogname-color: #666699;
    --page-button-color: #474769;
    --page-current-color: #b1b6ce;
    --tianyi-color: #008ac5;
    --post-code-bg: #333333;
    --post-code-text-color: snow;
    --post-reference-bg: #595959;
    --post-important-bg: #C2C2C2;
    --selection-text-bg: #B1D8DD;
    --code-block-bg: #272822;
    --zh-font-family: "Microsoft YaHei";
    --code-font-family: Consolas, "Courier New", var(--zh-font-family);
}


.main {
    display: block;
    flex: auto
}

.home-container {
    justify-content: center;
    display: flex;
    display: -webkit-flex;
    margin: 0 auto;
    width: 100%;
    /* max-width: 975px; */
    word-break: break-all
}

.post-container {
    max-width: 85%;
    width: 775px;
    height: 100%;
    border: 0;
    padding: 0 10px 0 10px
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-size: 13px;
    text-align: center
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    font-size: 13px;
    text-align: center
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    font-size: 13px;
    text-align: center
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    font-size: 13px;
    text-align: center
}

.post {
    background-color: var(--post-bg);
    backdrop-filter: blur(4px);
    cursor: default;
    display: block;
    margin-top: 10px;
    min-height: 100px;
    width: 100%;
    border: 0;
    box-shadow: 0 0 0 0 var(--tianyi-color), 4px 4px 14px -13px var(--post-shadow-color)
}

.newest-title {
    cursor: inherit;
    display: block;
    margin: 75px 0;
    min-height: 100px;
    width: 100%;
    border: 0;
    color: var(--text-color);
    font-size: 50px;
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.chroma .lntd {
    line-height: 23px;
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0
}

.chroma {
    background-color: var(--code-block-bg)
}

.post-page {
    border: 0;
    background-color: var(--post-bg);
    width: 100%;
    margin-top: 10px;
    height: 40px;
    box-shadow: 4px 4px 14px -13px var(--post-shadow-color)
}

.post-type {
    border: 0;
    background-color: var(--post-bg);
    width: 100%;
    height: 40px
}

.post-page-container {
    height: 40px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    text-align: center
}

.post-page-container-currentPage {
    color: var(--page-current-color);
    line-height: 40px;
    width: 30px;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.post-page-container-content-left {
    height: 40px;
    width: calc((100% - 27px)/2);
    justify-content: right;
    display: flex
}

.post-page-container-content-right {
    height: 40px;
    width: calc((100% - 27px)/2);
    justify-content: left;
    display: flex
}

.post-page-container-button {
    cursor: pointer;
    color: var(--text-color);
    justify-content: center;
    line-height: 40px;
    width: 30px;
    box-shadow: 0 0 0 0 var(--tianyi-color)inset;
    transition-duration: .2s
}

.post-page-container-button:hover {
    box-shadow: 0 -2px 0 0 var(--tianyi-color)inset;
    text-decoration: none
}

.post-page-container-nullSearch {
    padding: 0 5px;
    color: var(--text-color);
    justify-content: center;
    display: inline-block;
    line-height: 40px;
    min-width: 55px;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.main-post {
    margin-top: 10px;
    text-align: center;
    background-color: var(--post-bg);
    backdrop-filter: blur(4px);
    display: block;
    cursor: inherit;
    min-height: 400px;
    width: 100%;
    border: 0;
    cursor: default;
    color: var(--text-color);
    box-shadow: 4px 4px 14px -13px var(--post-shadow-color)
}

.main-post img {
    width: 100%;
    border: 0
}

.main-post a {
    color: var(--tianyi-color)
}

.important {
    background-color: var(--post-important-bg);
    color: var(--tianyi-color);
    padding: 0 3px
}

.highlight {
    background-color: var(--code-block-bg);
    color: var(--text-color);
    position: relative;
    overflow: auto;
    max-height: 400px
}

.highlight-wrapper:hover .copyCodeButton {
    opacity: 1
}

.copyCodeButton {
    position: absolute;
    top: 25px;
    right: 25px;
    background: var(--post-important-bg);
    border: none;
    padding: 8px 16px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 14px;
    opacity: 0;
    transition: opacity .3s ease
}

.main-post-container {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap
}

.main-post-content {
    text-align: left;
    margin: 0 20px
}

.main-post-content-txt {
    padding: 8px 0;
}

a {
    text-decoration: none;
    color: var(--tianyi-color)
}

a:hover {
    text-decoration: underline
}

.nav-content>a {
    color: var(--text-color);
}



.nav-index>a:hover {
    text-decoration: none
}

.post-Img-container {
    width: 100%;
    max-height: 200px;
    border: 0;
    display: block;
    overflow-y: auto
}

::-webkit-scrollbar {
    height: auto
}

::-webkit-scrollbar-thumb {
    background-color: var(--post-important-bg)
}

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

.post-Img-container img {
    width: 100%;
    border: 0;
    background-color: var(--tianyi-color);
    display: block
}

.post-txt-container {
    bottom: 0;
    width: 100%;
    cursor: default;
    min-height: 60px;
    margin: 0
}

.post-txt-container-title {
    color: var(--text-color);
    padding: 15px 0 15px;
    display: inline-block
}

.post-txt-container-datetime {
    color: var(--text-color);
    font-size: 12px;
    line-height: 30px;
    padding: 0 20px;
    display: inline-block;
    transition-duration: .2s
}

.post-txt-container-datetime:hover {
    box-shadow: 3px 0 0 0 var(--tianyi-color)inset
}

.post-txt-container-introduction img {
    width: 80%
}

pre {
    font-family: microsoft yahei ui;
    word-wrap: break-word;
    overflow: auto;
    word-break: break-all;
    word-wrap: break-word
}

.post-txt-container-title:hover {
    text-decoration: none;
    color: var(--tianyi-color)
}

.post-txt-container .post-detail-txt p {
    margin-left: 20px;
    margin-right: 20px
}

.topTitle {
    margin: auto;
    text-align: center;
    font-size: 10vmax;
    line-height: 200px;
    color: var(--body-bg);
    width: 100%;
    height: 0;
    overflow: hidden;
    flex: none;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.errorTitle {
    margin: auto;
    text-align: center;
    font-size: 15vmax;
    line-height: 200px;
    color: var(--text-color);
    width: 100%;
    height: 200px;
    overflow: hidden;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.errorDes {
    margin: auto;
    text-align: center;
    font-size: 3vmax;
    color: var(--text-color);
    width: 100%;
    overflow: hidden;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.console-type-container {
    height: 40px;
    padding: 0 5px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    text-align: center
}

.console-container-button {
    padding: 0 5px;
    cursor: pointer;
    color: var(--page-button-color);
    justify-content: center;
    line-height: 40px;
    width: 50px;
    box-shadow: 0 0 0 0 var(--tianyi-color)inset
}

.console-container-button:hover {
    box-shadow: 0 -2px 0 0 var(--tianyi-color)inset
}

ruby {
    text-indent: 0
}

ruby>rt {
    /* display: block; */
    font-size: 50%;
    text-align: start
}

rt {
    text-indent: 0;
    line-height: normal;
    -webkit-text-emphasis: none
}

rt.ttt::before {
    content: attr(data-rt)
}

hr {
    margin: 40px auto;
    max-width: 150px;
    width: 30%;
    height: 2px;
    opacity: .55;
    border: 0;
    background: var(--text-color);
    box-sizing: content-box;
    overflow: visible
}

.post-detail-txt .table-wrapper {
    overflow-x: auto;
    display: block;
    word-break: initial;
    padding: 10px
}

.post-detail-txt {
    width: 100%;
    color: var(--text-color);
    padding: 0 0 10px;
    line-height: 30px;
    font-size: 17px;
    word-break: break-word
}

.post-detail-txt a {
    color: var(--tianyi-color)
}

.post-detail-txt p a {
    color: var(--tianyi-color)
}

.post-detail-txt a:hover {
    text-decoration: underline
}

.post-detail-txt h1 {
    font-size: 42px;
    line-height: 46px;
    box-shadow: 0 -23px 0 0 var(--post-important-bg)inset
}

.post-detail-txt h2 {
    font-size: 36px;
    line-height: 40px;
    box-shadow: 0 -20px 0 0 var(--post-important-bg)inset
}

.post-detail-txt h3 {
    font-size: 32px;
    line-height: 36px;
    box-shadow: 0 -18px 0 0 var(--post-important-bg)inset
}

.post-detail-txt h4 {
    font-size: 26px;
    line-height: 30px;
    box-shadow: 0 -15px 0 0 var(--post-important-bg)inset
}

.post-detail-txt h5 {
    font-size: 24px;
    line-height: 28px;
    box-shadow: 0 -14px 0 0 var(--post-important-bg)inset
}

.post-detail-txt h6 {
    font-size: 20px;
    line-height: 24px;
    box-shadow: 0 -12px 0 0 var(--post-important-bg)inset
}

.post-detail-txt h1,
.post-detail-txt h2,
.post-detail-txt h3,
.post-detail-txt h4,
.post-detail-txt h5,
.post-detail-txt h6 {
    font-weight: 500;
    margin: 15px;
    word-break: break-word;
    width: fit-content
}

.post-detail-txt h1 code,
.post-detail-txt h1 tt,
.post-detail-txt h2 code,
.post-detail-txt h2 tt,
.post-detail-txt h3 code,
.post-detail-txt h3 tt,
.post-detail-txt h4 code,
.post-detail-txt h4 tt,
.post-detail-txt h5 code,
.post-detail-txt h5 tt,
.post-detail-txt h6 code,
.post-detail-txt h6 tt {
    font-size: 85%;
    font-family: var(--code-font-family)
}

.post-detail-txt>:first-child {
    margin-top: 0
}

.post-detail-txt>:last-child {
    margin-bottom: 0
}

.post-detail-txt blockquote {
    box-shadow: 3px 0 0 0 var(--tianyi-color)inset;
    background-color: var(--post-important-bg);
    padding: 10px 15px;
    color: var(--text-color);
    font-size: inherit;
    border-left: 2px solid var(--color-border)
}

.post-detail-txt p,
.post-detail-txt ul,
.post-detail-txt ol,
.post-detail-txt dl,
.post-detail-txt details {
    margin: 10px
}

.post-detail-txt ul,
.post-detail-txt ol {
    padding-left: 28px;
    line-height: 1.75
}

.post-detail-txt ul ul,
.post-detail-txt ul ol,
.post-detail-txt ol ol,
.post-detail-txt ol ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 16px
}

.post-detail-txt li>p {
    margin: 0
}

.post-detail-txt .highlight pre code {
    font-family: var(--code-font-family);
    color: #fff
}

.post-detail-txt pre {
    word-wrap: normal;
    font-family: var(--code-font-family);
    background-color: var(--code-block-bg);
    padding: 25px;
    overflow-x: auto;
    color: #fff
}

.post-detail-txt .highlight pre {
    margin-left: 0;
    margin-right: 0
}

.post-detail-txt kbd,
.post-detail-txt code,
.post-detail-txt tt {
    word-wrap: break-word;
    word-break: break-all;
    display: inline;
    font-family: var(--code-font-family);
    padding: 2px 6px;
    color: var(--text-color);
    background-color: var(--post-important-bg);
    hyphens: none
}

.chroma .lntable {
    margin: 0
}

pre.chroma {
    padding: 5px
}

.post-detail-txt kbd br,
.post-detail-txt code br,
.post-detail-txt tt br {
    display: none
}

.post-detail-txt pre code {
    word-wrap: inherit;
    word-break: inherit;
    font-size: inherit;
    display: inline;
    padding: 0;
    background-color: initial;
    hyphens: none;
    color: #fff;
    font-family: var(--code-font-family)
}

.post-detail-txt pre code br {
    display: unset;
    font-family: var(--code-font-family)
}

.post-detail-txt del code {
    text-decoration: inherit;
    font-family: var(--code-font-family)
}

mark {
    background-color: var(--post-important-bg);
    color: var(--text-color)
}

.post-detail-txt blockquote>:first-child {
    margin-top: 0
}

.post-detail-txt blockquote>:last-child {
    margin-bottom: 0
}

.post-detail-txt .table-wrapper table {
    overflow-x: auto;
    border-collapse: collapse;
    background-color: initial
}

.post-detail-txt table tr {
    background-color: initial
}

.post-detail-txt table th {
    font-weight: 500
}

.post-detail-txt table th,
.post-detail-txt table td {
    background-color: initial;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--post-important-bg);
    vertical-align: top
}

.post-detail-txt img:not(.emoji) {
    max-width: 100%;
    border: 0;
    display: block
}

.post-detail-txt .footnotes {
    font-size: 14px
}

.chroma .hl {
    display: block;
    width: 100%;
    background-color: #ffc
}

.chroma .lnt {
    margin-right: .4em;
    padding: 0 .4em;
    color: #7f7f7f;
    display: block
}

.chroma .ln {
    margin-right: .4em;
    padding: 0 .4em;
    color: #7f7f7f
}

.chroma .k {
    color: #66d9ef
}

.chroma .kc {
    color: #66d9ef
}

.chroma .kd {
    color: #66d9ef
}

.chroma .kn {
    color: #f92672
}

.chroma .kp {
    color: #66d9ef
}

.chroma .kr {
    color: #66d9ef
}

.chroma .kt {
    color: #66d9ef
}

.chroma .n {
    color: #f8f8f2
}

.chroma .na {
    color: #a6e22e
}

.chroma .nb {
    color: #f8f8f2
}

.chroma .bp {
    color: #f8f8f2
}

.chroma .nc {
    color: #a6e22e
}

.chroma .no {
    color: #66d9ef
}

.chroma .nd {
    color: #a6e22e
}

.chroma .ni {
    color: #f8f8f2
}

.chroma .ne {
    color: #a6e22e
}

.chroma .nf {
    color: #a6e22e
}

.chroma .fm {
    color: #f8f8f2
}

.chroma .nl {
    color: #f8f8f2
}

.chroma .nn {
    color: #f8f8f2
}

.chroma .nx {
    color: #a6e22e
}

.chroma .py {
    color: #f8f8f2
}

.chroma .nt {
    color: #f92672
}

.chroma .nv {
    color: #f8f8f2
}

.chroma .vc {
    color: #f8f8f2
}

.chroma .vg {
    color: #f8f8f2
}

.chroma .vi {
    color: #f8f8f2
}

.chroma .vm {
    color: #f8f8f2
}

.chroma .l {
    color: #ae81ff
}

.chroma .ld {
    color: #e6db74
}

.chroma .s {
    color: #e6db74
}

.chroma .sa {
    color: #e6db74
}

.chroma .sb {
    color: #e6db74
}

.chroma .sc {
    color: #e6db74
}

.chroma .dl {
    color: #e6db74
}

.chroma .sd {
    color: #e6db74
}

.chroma .s2 {
    color: #e6db74
}

.chroma .se {
    color: #ae81ff
}

.chroma .sh {
    color: #e6db74
}

.chroma .si {
    color: #e6db74
}

.chroma .sx {
    color: #e6db74
}

.chroma .sr {
    color: #e6db74
}

.chroma .s1 {
    color: #e6db74
}

.chroma .ss {
    color: #e6db74
}

.chroma .m {
    color: #ae81ff
}

.chroma .mb {
    color: #ae81ff
}

.chroma .mf {
    color: #ae81ff
}

.chroma .mh {
    color: #ae81ff
}

.chroma .mi {
    color: #ae81ff
}

.chroma .il {
    color: #ae81ff
}

.chroma .mo {
    color: #ae81ff
}

.chroma .o {
    color: #f92672
}

.chroma .ow {
    color: #f92672
}

.chroma .p {
    color: #f8f8f2
}

.chroma .c {
    color: #75715e
}

.chroma .ch {
    color: #75715e
}

.chroma .cm {
    color: #75715e
}

.chroma .c1 {
    color: #75715e
}

.chroma .cs {
    color: #75715e
}

.chroma .cp {
    color: #75715e
}

.chroma .cpf {
    color: #75715e
}

.chroma .gd {
    color: #f92672
}

.chroma .ge {
    font-style: italic
}

.chroma .gi {
    color: #a6e22e
}

.chroma .gs {
    font-weight: 700
}

.chroma .gu {
    color: #75715e
}

header {
    display: block;
    flex: none;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: auto;
    z-index: 9999;
    position: sticky;
}

.nav {
    display: flex;
    display: -webkit-flex;
    top: 0;
    min-height: 60px;
    max-width: 945px;
    line-height: 60px;
    min-height: 60px;
    margin: 0 auto 0 auto;
}

.nav-out{
    color: var(--text-color);
    box-shadow: 0 6px 24px -14px var(--post-shadow-color);
    background-color: var(--post-bg);
    transition-duration: .2s;
}

.blogName {
    padding: 0 40px;
    font-size: 23px;
    position: inherit;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    color: var(--text-color);
    margin: 0 15px;
}

.blogName:hover {
    color: var(--tianyi-color);
    text-decoration: none;
    transition-duration: .2s;
}

.nav-container {
    display: flex;
    display: -webkit-flex
}

.nav-content {
    width: 64px;
    height: 60px;
    display: grid;
    margin: 0 3px;
}

.nav-link {
    padding: 0 15px;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    line-height: 60px;
    min-width: 64px;
    transition-duration: .2s;
}

.nav-content:hover a .hover-bar {
    width: 100%
}

.nav-link:hover {
    color: var(--tianyi-color);
    text-decoration: none;
    box-shadow: 0 -3px 0 0 var(--tianyi-color) inset;
    transition-duration: .2s;
}

.nav-link-active {
    padding: 0 15px;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    line-height: 60px;
    min-width: 64px;
    color: var(--tianyi-color);
    box-shadow: 0 -3px 0 0 var(--tianyi-color)inset;
}

.nav-link-active:hover {
    text-decoration: none;
    color: var(--tianyi-color);
    transition-duration: .2s;
}

.hover-bar-active {
    color: var(--tianyi-color);
    text-decoration: none;
    width: 100%;
    margin: 0 auto;
    height: 3px;
    background-color: var(--tianyi-color);
    transition-duration: .3s;
    box-shadow: 0 -5px 25px 1px var(--tianyi-color)
}

.hover-bar {
    width: 0;
    margin: 0 auto;
    height: 3px;
    background-color: var(--tianyi-color);
    transition-duration: .3s;
    box-shadow: 0 -5px 25px 1px var(--tianyi-color)
}

.footer {
    width: 100%;
    padding: 40px 0 20px;
    background-color: var(--footer-bg);
    backdrop-filter: blur(4px);
    color: var(--text-color);
    display: inline-flex;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex: none
}

.footer-content {
    line-height: 20px;
    font-size: 12px;
    padding: 0 20px
}

.footer>.footer-content>a {
    min-width: 168px
}

.info-container {
    max-width: 21%;
    padding: 10px 0 5px 0;
    top: 60px;
    height: 100%;
    position: sticky;
    /* perspective: 1500px;
    -webkit-perspective: 1500px */
}

.info-container-inner {
    height: 100%;
    /* transform: rotateY(-20deg) */
}

.info {
    text-align: center;
    backdrop-filter: blur(4px);
    border: 0;
    background-color: var(--post-bg);
    width: 100%;
    box-shadow: 2px 1px 11px -10px var(--post-shadow-color)
}

.info-icon {
    max-width: 185px;
    width: 100%;
    border: 0;
    background-color: var(--tianyi-color)
}

.info-icon:hover {
    transform: translate3d(0, -5px, 0)
}

.info-name {
    font-size: 25px;
    line-height: 50px;
    width: 100%;
    color: var(--text-color)
}

.info-txt {
    word-break: break-word;
    font-size: 15px;
    line-height: 25px;
    width: 100%;
    color: var(--text-color)
}

.info-link {
    backdrop-filter: blur(4px);
    display: inline-flex;
    flex-wrap: wrap;
    border: 0;
    background-color: var(--post-bg);
    width: 100%;
    min-height: 40px;
    margin-top: 10px;
    justify-content: space-around;
    box-shadow: 2px 1px 11px -10px var(--post-shadow-color)
}

.link-button {
    border: 0;
    width: 25.01%;
    text-align: center;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 0 0 0 0 var(--tianyi-color)inset;
    justify-content: center
}

.link-button:hover {
    box-shadow: 0 -2px 0 0 var(--tianyi-color)inset;
    transform: translate3d(0, -5px, 0)
}

.searchBar {
    height: 46.75px;
    width: 80%;
    font-size: 18px;
    padding: 0 10px;
    border: 0;
    color: var(--text-color);
    background-color: var(--post-bg)
}

.searchBar:focus {
    outline: none
}

.searchButton {
    height: 46.75px;
    width: 20%;
    position: relative;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
    color: var(--text-color);
    box-shadow: 0 0 0 0 var(--tianyi-color)inset;
    transition-duration: .2s
}

.searchButton:hover {
    box-shadow: 0 -2px 0 0 var(--tianyi-color)inset
}

.post-detail-dynamic {
    color: var(--text-color);
    height: 40px;
    line-height: 40px;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.post-detail-datetime {
    color: var(--text-color);
    height: 40px;
    line-height: 40px;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

.post-detail-title {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    font-size: 40px;
    color: var(--text-color)
}

.post-detail-postInfo-container {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around
}

.highlight-wrapper {
    position: relative
}

.mywaifu {
    position: relative
}

.mywaifu img {
    position: absolute;
    left: 0;
    bottom: 0
}

.mywaifu img:hover{
    transform: translate3d(0, -5px, 0);
}

.post-txt-container-title h1,
.post-txt-container-title h2,
.post-txt-container-title h3,
.post-txt-container-title h4,
.post-txt-container-title h5,
.post-txt-container-title h6 {
    font-weight: 500;
    padding: 0 20px 0 20px;
    font-size: 28px;
    line-height: 45px;
    transition-duration: .2s
}

.post-txt-container-title:hover>h1,
.post-txt-container-title:hover>h2,
.post-txt-container-title:hover>h3,
.post-txt-container-title:hover>h4,
.post-txt-container-title:hover>h5,
.post-txt-container-title:hover>h6 {
    box-shadow: 3px 0 0 0 var(--tianyi-color)inset, 950px 0 0 0 var(--post-important-bg)inset
}

.relicContainer {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-warp: wrap;
    justify-content: space-between;
    flex: none;
}

.relic {
    max-width: 160px;
    box-shadow: 3px 0 0 0 #d97d22 inset;
    margin: 10px 20px 10px 0;
}

.relicPropContainer {
    width: 100%;
    font-size: 11px;
    line-height: 10px;
    margin-left: 3px;
}

.configSelect {
    background-color: #40405f;
    color: #66ccff;
    border: 0;
    line-height: 30px;
    font-size: 17px;
    word-break: break-word;
}

input[type="checkbox"] {
    background-color: #40405f;
    color: #66ccff;
    outline: none;
    background: #40405f;
    border: 1px solid #66ccff;
    position: relative;
}

input[type="checkbox"]:checked::before {
    background-color: #40405f;
    color: #66ccff;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #40405f;
    color: #66ccff;
    width: 20px;
    height: 20px;
    line-height: 30px;
}

input:checked::after {
    content: '';
    height: 6px;
    width: 10px;
    border: 2px solid #66ccff;
    position: absolute;
    top: 3px;/*top和left是用来定位的 */
    left: 3px;
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}

.warning-internet{
    min-height:25px;
    background-color:var(--post-important-bg);
    width:100%;
    line-height:25px;
    color: var(--text-color);
}

@font-face {
    font-family: 'Blueaka_Bold';
    src: url('../font/Blueaka_Bold.woff2') format('woff2');
    font-display: swap;
  }

  @font-face {
    font-family: 'Blueaka';
    src: url('../font/Blueaka.woff2') format('woff2');
    font-display: swap;
  }