#footer {
    background-color: rgba(0, 0, 0, .25) !important
}

#page-header {
    background: transparent !important
}

:root {
    --card-bg: rgba(255, 255, 255, 0.91)
}

#workboard {
    font-size: 13px;
    font-weight: 700
}

[data-theme="dark"] .magnet_link_context {
    background: #1e1e1e;
    color: antiquewhite
}

[data-theme="dark"] .magnet_link_context:hover {
    background: #3ecdf1;
    color: #f2f2f2
}

#pagination {
    width: 100%;
    margin: auto
}

#nav .menus_items {
    position: absolute !important;
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important
}

#nav .menus_items .menus_item:hover .menus_item_child {
    display: flex !important
}

.menus_items .menus_item:nth-child(5) .menus_item_child {
    left: -38px
}

[data-theme="dark"] #site-name,
[data-theme="dark"] #site-title {
    animation: light_15px 10s linear infinite
}

[data-theme="dark"] #site-subtitle {
    animation: light_10px 10s linear infinite
}

[data-theme="dark"] #post-info {
    animation: light_5px 10s linear infinite
}

[data-theme="light"] #site-name,
[data-theme="light"] #site-title {
    animation: light_15px 10s linear infinite
}

[data-theme="light"] #site-subtitle {
    animation: light_10px 10s linear infinite
}

[data-theme="light"] #post-info {
    animation: light_5px 10s linear infinite
}

@keyframes light_15px {
    0% {
        text-shadow: #5636ed 0 0 15px
    }

    12.5% {
        text-shadow: #11ee5e 0 0 15px
    }

    25% {
        text-shadow: #f14747 0 0 15px
    }

    37.5% {
        text-shadow: #f1a247 0 0 15px
    }

    50% {
        text-shadow: #f1ee47 0 0 15px
    }

    50% {
        text-shadow: #b347f1 0 0 15px
    }

    62.5% {
        text-shadow: #002afa 0 0 15px
    }

    75% {
        text-shadow: #ed709b 0 0 15px
    }

    87.5% {
        text-shadow: #39c5bb 0 0 15px
    }

    100% {
        text-shadow: #5636ed 0 0 15px
    }
}

@keyframes light_10px {
    0% {
        text-shadow: #5636ed 0 0 10px
    }

    12.5% {
        text-shadow: #11ee5e 0 0 10px
    }

    25% {
        text-shadow: #f14747 0 0 10px
    }

    37.5% {
        text-shadow: #f1a247 0 0 10px
    }

    50% {
        text-shadow: #f1ee47 0 0 10px
    }

    50% {
        text-shadow: #b347f1 0 0 10px
    }

    62.5% {
        text-shadow: #002afa 0 0 10px
    }

    75% {
        text-shadow: #ed709b 0 0 10px
    }

    87.5% {
        text-shadow: #39c5bb 0 0 10px
    }

    100% {
        text-shadow: #5636ed 0 0 10px
    }
}

@keyframes light_5px {
    0% {
        text-shadow: #5636ed 0 0 5px
    }

    12.5% {
        text-shadow: #11ee5e 0 0 5px
    }

    25% {
        text-shadow: #f14747 0 0 5px
    }

    37.5% {
        text-shadow: #f1a247 0 0 15px
    }

    50% {
        text-shadow: #f1ee47 0 0 5px
    }

    50% {
        text-shadow: #b347f1 0 0 5px
    }

    62.5% {
        text-shadow: #002afa 0 0 5px
    }

    75% {
        text-shadow: #ed709b 0 0 5px
    }

    87.5% {
        text-shadow: #39c5bb 0 0 5px
    }

    100% {
        text-shadow: #5636ed 0 0 5px
    }
}

#universe {
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1
}

#cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    background: rgb(58, 204, 194);
    border-radius: 8px;
    opacity: 0.25;
    z-index: 10086;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform
}

#cursor.hidden {
    opacity: 0
}

#cursor.hover {
    opacity: 0.1;
    transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5)
}

#cursor.active {
    opacity: 0.5;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5)
}

:root {
    --trans-light: rgba(255, 255, 255, 0.88);
    --trans-dark: rgba(25, 25, 25, 0.88);
    --border-style: 1px solid rgb(169, 169, 169);
    --backdrop-filter: blur(5px) saturate(150%)
}

#recent-posts>.recent-post-item {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border-radius: 25px;
    border: var(--border-style)
}

#aside-content .card-widget {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border-radius: 18px;
    border: var(--border-style)
}

div#post,
div#page,
div#archive {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border: var(--border-style);
    border-radius: 20px
}

#page-header.nav-fixed #nav {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: var(--backdrop-filter)
}

[data-theme="dark"] #page-header.nav-fixed #nav {
    background: rgba(0, 0, 0, 0.7) !important
}

[data-theme="dark"] #recent-posts>.recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
    background: var(--trans-dark)
}

[data-theme="dark"] #footer::before {
    background: transparent !important
}

[data-theme="dark"] #page-header::before {
    background: transparent !important
}

.read-mode #aside-content .card-widget {
    background: rgba(158, 204, 171, 0.5) !important
}

.read-mode div#post {
    background: rgba(158, 204, 171, 0.5) !important
}

[data-theme="dark"] .read-mode #aside-content .card-widget {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff
}

[data-theme="dark"] .read-mode div#post {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff
}

@import "//at.alicdn.com/t/c/font_3869083_y7e724gleli.css";

.iconfont {
    font-family: "iconfont" !important;
    font-size: 3em;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

svg.icon {
    width: 1.28em;
    height: 1.28em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
    -webkit-animation: ccc 4s linear infinite;
    animation: ccc 4s linear infinite
}

@-webkit-keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

@keyframes ccc {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-1turn);
        transform: rotate(-1turn)
    }
}

#content-inner.layout h1::before {
    color: #ef50a8;
    margin-left: -1.55rem;
    font-size: 1.3rem;
    margin-top: -0.23rem
}

#content-inner.layout h2::before {
    color: #fb7061;
    margin-left: -1.35rem;
    font-size: 1.1rem;
    margin-top: -0.12rem
}

#content-inner.layout h3::before {
    color: #ffbf00;
    margin-left: -1.22rem;
    font-size: 0.95rem;
    margin-top: -0.09rem
}

#content-inner.layout h4::before {
    color: #a9e000;
    margin-left: -1.05rem;
    font-size: 0.8rem;
    margin-top: -0.09rem
}

#content-inner.layout h5::before {
    color: #57c850;
    margin-left: -0.9rem;
    font-size: 0.7rem;
    margin-top: 0rem
}

#content-inner.layout h6::before {
    color: #5ec1e0;
    margin-left: -0.9rem;
    font-size: 0.66rem;
    margin-top: 0rem
}

#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
    color: var(--theme-color)
}

#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
    color: var(--theme-color);
    -webkit-animation: ccc 6s linear infinite;
    animation: ccc 6s linear infinite
}

#owo-big {
    position: fixed;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px #aaa solid;
    border-radius: 10px;
    z-index: 9999;
    display: none;
    transform: translate(0, -105%);
    overflow: hidden;
    animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11)
}

[data-theme=dark] #owo-big {
    background-color: #4a4a4a
}

#owo-big img {
    width: 100%
}

@keyframes owoIn {
    0% {
        transform: translate(0, -95%);
        opacity: 0
    }

    100% {
        transform: translate(0, -105%);
        opacity: 1
    }
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
    content: '输入你的名字🐧'
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
    content: '输入QQ邮箱会自动获取头像📧'
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
    content: '可以通过昵称访问您的网站🔗'
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
    display: block
}

.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
    display: none;
    position: absolute;
    top: -60px;
    white-space: nowrap;
    border-radius: 10px;
    left: 50%;
    transform: translate(-50%);
    padding: 14px 18px;
    background: #444;
    color: #fff
}

.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
    display: none;
    content: '';
    position: absolute;
    border: 12px solid transparent;
    border-top-color: #444;
    left: 50%;
    transform: translate(-50%, -48px)
}

[data-theme="light"] #aside-content>.card-widget.card-info {
    background-image: url(/img/dj.png);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%
}

[data-theme="dark"] #aside-content>.card-widget.card-info {
    background-image: url(/img/night.png);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%
}

#welcome-info {
    background: linear-gradient(45deg, #b9f4f3, #e3fbf9);
    border-radius: 18px;
    padding: 8px
}

[data-theme="dark"] #welcome-info {
    background: #212121
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('/font/b.woff2') format('opentype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'MyCodeFont';
    src: url('/font/neko.woff2') format('truetype');
    font-weight: normal;
    font-style: normal
}

body {
    font-family: 'MyCustomFont', "Georgia", "Arial", sans-serif;
    font-size: 16px
}

code,
pre {
    font-family: 'MyCodeFont', "Fira Code", "Courier", monospace;
    font-size: 16px
}

#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: rgb(255 255 255 / 80%) !important;
    text-align: left;
    flex-wrap: wrap
}

.ft-item-1,
.ft-item-2 {
    display: flex;
    height: 100%;
    padding: 10px 14px
}

.ft-item-1 {
    flex-direction: column;
    flex: 2
}

.ft-item-2 {
    flex: 1;
    flex-direction: column
}

.t-top {
    display: flex
}

.t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px
}

.t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px
}

.btn-xz-box {
    margin-top: 10px
}

.btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
    cursor: pointer !important
}

.btn-xz:hover {
    text-decoration: none !important
}

.btn-xz-box:hover .btn-xz {
    background-color: #6f42c1
}

.t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1
}

.ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important
}

.ft-links li a {
    display: inline-block !important;
    width: 50%;
    cursor: pointer !important
}

.ft-links li a:hover {
    text-decoration: none !important;
    color: #6f42c1 !important
}

.ft-item-2 .ft-img-group {
    width: 100%
}

.ft-t {
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600
}

.t-l-t {
    padding-left: 14px
}

.ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px
}

.ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer !important
}

.ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px
}

@media screen and (max-width:768px) {
    .ft-item-1 {
        flex-basis: 100% !important
    }

    .ft-item-2 {
        flex-basis: 100% !important
    }

    .t-top .t-t-l .bg-ad {
        width: 100%
    }
}

@media screen and (max-width:576px) {
    .t-top {
        flex-wrap: wrap
    }

    .t-top .t-t-l {
        flex-basis: 100% !important
    }

    .t-top .t-t-r {
        margin-top: 16px;
        flex-basis: 100% !important
    }
}

#footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

#footer-wrap .copyright,
#footer-wrap .framework-info,
#footer-wrap .footer_custom_text,
#footer-wrap #ghbdages {
    margin: 0 auto
}

#ghbdages {
    display: block
}

.github-badge {
    display: inline-block
}

#workboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 10px 0
}

#workboard .boardsign,
#workboard div {
    display: inline-block
}

.ft-links a {
    border-radius: 12px
}

.ft-img-group .img-group-item a {
    border-radius: 14px
}

.btn-xz-box .btn-xz {
    border-radius: 16px
}

.ft-img-group .img-group-item img {
    border-radius: 16px
}

.site-card {
    width: calc(100% / 8 - 16px) !important;
    border-radius: 18px !important
}

.site-card .img {
    height: 145px !important;
    border-radius: 18px !important
}

@media screen and (max-width:1200px) {
    .site-card {
        width: calc(100% / 4 - 16px) !important
    }
}

@media screen and (max-width:900px) {
    .site-card {
        width: calc(100% / 3 - 16px) !important
    }
}

@media screen and (max-width:600px) {
    .site-card {
        width: calc(100% / 2 - 16px) !important
    }
}

.layout {
    max-width: 1250px
}

.aside-content {
    max-width: 318px;
    min-width: 300px
}

@media screen and (max-width:900px) {
    .aside-content {
        max-width: none !important;
        padding: 0 5px 0 5px
    }
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 4px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 7rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden
}

.pace-inactive .pace-progress {
    opacity: 0;
    transition: .3s ease-in
}

.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #43cea2, #3866ca);
    animation: gradient 2s ease infinite;
    background-size: 200%
}

.pace.pace-inactive {
    opacity: 0;
    transition: .3s;
    top: -8px
}

:root {
  --blogessay-theme-op: #4259ef23;
  --blogessay-gray-op: #9999992b;
  --blogessay-theme-top: var(--blogessay-theme);
  --blogessay-white: #fff;
  --blogessay-white-op: rgba(255, 255, 255, 0.2);
  --blogessay-gray: #999999;
  --blogessay-main: var(--blogessay-theme);
  --blogessay-main-op: var(--blogessay-theme-op);
  --blogessay-shadow-border: 0 8px 16px -4px #2c2d300c;
  --blogessay-style-border: 1px solid var(--blogessay-card-border);
  --blogessay-style-border-hover: 1px solid var(--blogessay-main);
  --blogessay-style-border-always: 1px solid var(--blogessay-card-border);
  --blogessay-style-border-avatar: 4px solid var(--blogessay-background);
}

[data-theme="light"] {
  --blogessay-theme: #3b70fc;
  --blogessay-theme-deep: #1856fb;
  --blogessay-theme-op: #4259ef23;
  --blogessay-fontcolor: #363636;
  --blogessay-background: #f7f9feCC;
  --blogessay-secondbg: #f1f3f8;
  --blogessay-card-bg: #ffffff;
  --blogessay-card-border: #e3e8f7;
}

[data-theme="dark"] {
  --blogessay-theme: #0084ff;
  --blogessay-theme-deep: #0076e5;
  --blogessay-theme-op: #0084ff23;
  --blogessay-fontcolor: #f7f7fa;
  --blogessay-background: #18171d00;
  --blogessay-secondbg: #30343f;
  --blogessay-card-bg: #000000;
  --blogessay-card-border: #42444a;
}

.icon-home:before,
.icon-huabankaobei:before,
.icon-milk:before,
.icon-subway__easyiconnet:before {
    content: none !important;
}

.fa-chevron-down {
    display: none !important;
}

[data-page-type="link"] code,
[data-page-type="link"] pre {
  font-family: "Fira Code", "Consolas", "Monaco", "Andale Mono", monospace !important;
  font-size: 14px !important;
  background: #f6f8fa !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 6px !important;
}

[data-theme="dark"][data-page-type="link"] code,
[data-theme="dark"][data-page-type="link"] pre {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #f8f8f2 !important;
}

.type-link .code-block,
.type-link pre[class*="language-"] {
  background: #f6f8fa !important;
  padding: 1em !important;
  margin: 1em 0 !important;
  overflow: auto !important;
}

#twikoo .tk-comments .tk-submit .tk-avatar.tk-has-avatar {
    display: none;
}

#twikoo .tk-comments .tk-submit .tk-row.actions{
    margin-bottom: 0;
    margin-left: 0;
}

.tk-main .tk-submit .tk-col .tk-meta-input,
#twikoo .tk-comments .tk-submit .tk-col .tk-meta-input{
    margin-bottom: 16px;
}

.tk-row.actions button.el-button {
    height: 32px;
}

.tk-main .tk-content img {
  max-width: 100%;
  height: auto;
}

.tk-meta-input input {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.tk-meta-input div {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.tk-input.el-textarea textarea {
    border-radius: 12px;
    min-height: 150px !important;
    height: auto;
}

@media screen and (max-width:420px) {
    .tk-main .tk-submit .tk-row.actions button.el-button.tk-preview.el-button--default.el-button--small{
        display: none;
    }
}

:root {
  --liushen-radius: 12px;
  --liushen-card-border-width: 1px;
}

[data-theme=light] {
  --liushen-border-color: #e3e8f7;
  --liushen-card-bg: #fff;
  --liushen-card-border: #e3e8f7;
  --style-border-always: 1px solid var(--liushen-card-border);
  --liushen-blue: #425AEF;
}

[data-theme=dark] {
  --liushen-border-color: #42444a;
  --liushen-card-bg: #2c2c2c;
  --liushen-card-border: #42444a;
  --style-border-always: 1px solid var(--liushen-card-border);
  --liushen-blue: #0084FF;
}

.twikoo .tk-comments-container>.tk-comment,
.twikoo .tk-comments .tk-submit {
  padding: 20px;
  margin-top: 0px;
  margin-bottom: 20px;
  border-radius: var(--liushen-radius);
  background: var(--liushen-card-bg);
  transition: .3s;
}

[data-theme=light] 
.twikoo .tk-comments-container>.tk-comment,
.twikoo .tk-comments .tk-submit {
  box-shadow: var(--card-box-shadow);
}

[data-theme=light] 
.twikoo .tk-comments-container>.tk-comment:hover,
.twikoo .tk-comments .tk-submit:hover {
  box-shadow: var(--card-hover-box-shadow);
}

[data-theme=dark] 
.twikoo .tk-comments-container>.tk-comment,
.twikoo .tk-comments .tk-submit {
  border-style: solid;
  border-width: var(--liushen-card-border-width);
  border-color: var(--liushen-card-border);
}

.twikoo .tk-extra {
  border-radius: var(--liushen-radius);
  background: var(--liushen-card-bg);
  padding: 0.4rem;
  margin-bottom: 1rem;
  transition: .3s;
}

[data-theme=light] .twikoo .tk-extra {
  box-shadow: var(--card-box-shadow);
}

[data-theme=light] .twikoo .tk-extra:hover {
  box-shadow: var(--card-hover-box-shadow);
}

[data-theme=dark] .twikoo .tk-extra {
  border-style: solid;
  border-width: var(--liushen-card-border-width);
  border-color: var(--liushen-card-border);
}

.twikoo .tk-expand {
  border-radius: var(--liushen-radius);
}

[data-theme=light] .twikoo .tk-expand {
  box-shadow: var(--card-box-shadow);
}

[data-theme=light] .twikoo .tk-expand:hover {
  box-shadow: var(--card-hover-box-shadow);
  background-color: var(--btn-bg);
}

[data-theme=dark] .twikoo .tk-expand:hover {
  background-color: var(--liushen-blue);
}

[data-theme=dark] .twikoo .tk-expand {
  border-style: solid;
  border-width: var(--liushen-card-border-width);
  border-color: var(--liushen-card-border);
}

@media screen and (max-width:570px) {
    .tk-main .tk-extras {
        display: none;
    }
}

#menus {
  display: flex;
  align-items: center;
  width: 100%;
}

#search-button {
  margin-left: auto;
}

.back-home-button i.anzhiyufont.anzhiyu-icon-grip-vertical {
  display: none;
}

.back-home-button {
  position: relative;
  padding-left: 28px;
  padding-right: 8px;
  padding-top: 1px;
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  min-height: 32px;
}

.back-home-button::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 25px;
  background-image: url('/img/lemon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
}

#blog_name {
  display: flex;
  align-items: center;
}

#blog-info {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.nav-site-title {
  text-decoration: none;
  color: inherit;
}

.site-name {
  font-size: 1.2em;
  font-weight: bold;
}

#nav-group {
    position: relative;
    left: -28px;
}

.back-home-button {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.back-home-button:hover {
  background-color: rgba(0, 0, 0, 0.171);
  transform: translateY(-1px);
}

.back-home-button:active {
  background-color: rgba(0, 0, 0, 0.201);
  transform: translateY(0);
}

.OwO-items {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1001 !important;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto
}