a {
    color: #8b80f9
}

a:hover {
    color: #fc7753
}

pre {
    border-left-color: #8b80f9
}

code,
pre {
    font-family: source code pro, Consolas, Lucida Console, Monaco, Andale Mono, DejaVu Sans Mono, Courier New, monospace
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}

body {
    padding: 0;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-family: source sans pro, Ubuntu, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans CN, Source Han Sans SC, Microsoft YaHei, Wenquanyi Micro Hei, WenQuanYi Zen Hei, ST Heiti, SimHei, WenQuanYi Zen Hei Sharp, Arial, sans-serif
}

.nav-container {
    position: fixed;
    z-index: 100
}

.nav-container .entry {
    background-color: rgba(96, 108, 118, .3);
    margin-top: 1em;
    font-size: 3rem;
    width: 4rem;
    height: 4rem;
    -webkit-transition: .4s ease;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
    transition: .4s ease
}

.nav-container .entry.active,
.nav-container .entry:hover {
    background-color: #606c76;
    color: #fff
}

.nav-container .entry.active:hover {
    color: #fc7753
}

.nav-container .nav {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: flex;
    background-color: rgba(0, 0, 0, .8);
    width: 100vw;
    height: 100vh
}

.nav-container .nav .item {
    font-size: 4rem;
    font-family: Comfortaa, source sans pro, Ubuntu, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans CN, Source Han Sans SC, Microsoft YaHei, Wenquanyi Micro Hei, WenQuanYi Zen Hei, ST Heiti, SimHei, WenQuanYi Zen Hei Sharp, Arial, sans-serif;
    cursor: pointer;
    padding-left: 1em;
    padding-right: 1em;
    color: hsla(0, 0%, 100%, .8)
}

@media only screen and (max-height:400px) {
    .nav-container .nav .item {
        font-size: 3rem
    }
}

.nav-container .nav .item:hover {
    color: #fff;
    text-shadow: 0 0 2px #fff
}

.container {
    padding-top: 3.5rem
}

.article .title {
    margin-bottom: .5rem
}

.article hr.splitline {
    margin-top: 0
}

.article .content h1:before,
.article .content h2:before,
.article .content h3:before,
.article .content h4:before,
.article .content h5:before,
.article .content h6:before {
    content: "# ";
    color: #8b80f9
}

.article .content img {
    display: block;
    margin: auto;
    max-width: 75%;
    min-width: 35%
}

.article .content code {
    overflow-wrap: break-word;
    white-space: unset
}

.article .content p.caption {
    font-size: .8em;
    color: #606c76;
    display: -ms-flexbox;
    display: flex
}

.article .content p.caption,
.loading {
    -ms-flex-pack: center;
    justify-content: center
}

.loading {
    width: 100%;
    padding: 1em;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center
}

.loading .pacman>div:first-of-type,
.loading .pacman>div:nth-child(2) {
    border-top-color: #8b80f9;
    border-left-color: #8b80f9;
    border-bottom-color: #8b80f9
}

.loading .pacman>div:nth-child(3),
.loading .pacman>div:nth-child(4),
.loading .pacman>div:nth-child(5),
.loading .pacman>div:nth-child(6) {
    background-color: #8b80f9
}

section.splash {
    width: 100vw;
    height: 100vh
}

section.splash .shadow {
    background-color: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%
}

section.splash .body {
    background-image: url(/img/background.jpg);
    background-size: cover;
    background-position: 50%;
    width: 100%;
    height: 100%
}

section.splash .content {
    font-family: Comfortaa, source sans pro, Ubuntu, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Source Han Sans CN, Source Han Sans SC, Microsoft YaHei, Wenquanyi Micro Hei, WenQuanYi Zen Hei, ST Heiti, SimHei, WenQuanYi Zen Hei Sharp, Arial, sans-serif;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column
}

section.splash .content .title {
    margin-bottom: 1.4rem;
    color: hsla(0, 0%, 100%, .8);
    font-size: clamp(4rem, 15vw, 6rem)
}

section.splash .content .subtitle {
    margin-bottom: 1rem;
    color: hsla(0, 0%, 100%, .7)
}

section.splash .content nav {
    display: -ms-flexbox;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width:600px) {
    section.splash .content nav {
        -ms-flex-direction: column;
        flex-direction: column
    }
}

section.splash .content nav a {
    color: #fff;
    font-size: clamp(1.2em, 6vw, 1.8em);
    padding: 0 .6em 1em;
    color: hsla(0, 0%, 100%, .65);
    transition: all .6s;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center
}

section.splash .content nav a:hover {
    color: #fff;
    text-shadow: 0 0 2px #fff
}

.blog-item .tag,
.blog-item .title,
.hover-highlight {
    transition: color .2s ease
}

.blog-item .tag:hover,
.blog-item .title:hover,
.hover-highlight:hover {
    color: #fc7753
}

.blog-item {
    margin-bottom: 2em
}

.blog-item .title {
    margin-bottom: .5rem;
    color: #8b80f9;
    cursor: pointer
}

.blog-item .time {
    color: #606c76
}

.blog-item .tag {
    color: #606c76;
    cursor: pointer;
    padding-left: .4em
}

.hover-highlight {
    transition: color .2s ease
}

.hover-highlight:hover {
    color: #fc7753
}

span.image-caption {
    display: block;
    text-align: center;
    font-size: 90%;
    color: grey
}

.tags-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tags-container .tag {
    border: 1px solid #8b80f9;
    box-shadow: 0 0 .2em #8b80f9;
    border-radius: 2em;
    padding: 0 1em;
    margin-top: .5em;
    margin-right: .5em;
    cursor: pointer;
    transition: .2s ease;
    display: inline-block
}

.tags-container .tag:last-child {
    margin-right: 0
}

.tags-container .tag.active,
.tags-container .tag:hover {
    border: 1px solid #fc7753;
    box-shadow: 0 0 .2em #fc7753
}

.tags-container .tag.active {
    color: #fc7753
}