/* Aero Glass Theme */
/* 2022 Wikidot Theme */
/* By Mercuresphere */
/* Based on Basalt Theme by Liryn & Placeholder McD  */
/* CC BY-SA 3.0 */

:root {
    --white-monochrome: 230, 230, 230;
    --black-monochrome: 0, 0, 0;
    --pale-gray-monochrome: 214, 245, 255;
    --very-light-gray-monochrome: 220, 222, 230;
    --gray-monochrome: 38, 34, 66;
    --dark-gray-monochrome: 29, 26, 56;
    --pale-accent: 255, 75, 255;
    --bright-accent: 203, 219, 250;
    --medium-accent: 41, 127, 128;
    --dark-accent: var(--dark-gray-monochrome);
    --newpage-color: 238,212,255;

    --logo: url(https://evernight-aquarium.wdfiles.com/local--files/files/basalt_logotype_darkmode.png);

    --background-image: url(https://evernight-aquarium.wdfiles.com/local--files/files/moirecity.jpg);

    --main-aero-glass-filter: blur(7px);

    --title: " SCP基金会";
    --subtitle: " 控制 • 收容 • 保护";
}

/* body */

body {
    background-color: rgb(var(--dark-gray-monochrome));
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: normal;
    background-attachment: fixed;
    background-size: cover;
    font-family: sans-serif;
}

#content-wrap {
    margin: 2em auto 2em;
}

@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
  (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
  (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
#content-wrap {
    max-width: 52rem;
}
}

#footer,
#license-area {
    display: none !important;
}

/* 主磨砂框 */

#main-content::before {
    content: " ";
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 10px;
    position: absolute;
    width: 106%;
    height: calc(100% + 2rem);
    background: rgba(var(--gray-monochrome), 0.25);
    -webkit-backdrop-filter: var(--main-aero-glass-filter);
    backdrop-filter: var(--main-aero-glass-filter);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    display: block;
    z-index: -6;
    left: calc(-3% - 1px);
    box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8);
    top: -1rem;
}

@media only screen and (min-width: 768px) {
    #main-content::before {
        width: calc(100vw - 20px);
        height: 100%;
        top: 1rem;
        left: calc((100vw - 20px - 100%) / (-2) - 1px);
    }
}

@media only screen and (min-width: 975px) {
    #main-content::before {
        width: 110%;
        left: calc(-5% - 1px);
        top: 1rem;
    }
}

@media only screen and (max-width: 768px) {
    #main-content::before {
        border: 1px solid rgba(var(--white-monochrome), 0.5);
        border-radius: 6px;
    }
}

/* 顶栏 */

#extra-div-1 {
    background: linear-gradient(180deg, rgba(var(--dark-gray-monochrome), 0.5) 0%, rgba(var(--gray-monochrome), 0.5) 100%);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 1px rgb(var(--white-monochrome)), inset 0px 1px rgb(var(--white-monochrome)), 0px 0px 8px 2px rgba(var(--black-monochrome), 0.8);
}

#extra-div-1 {
    top: 1px;
}

.logo {
    top: 6px;
}

#side-bar::before {
    word-spacing: -2px;
}

.hovertip,
#account-options {
    background: rgba(var(--very-light-gray-monochrome), 0.25) !important;
    border: 1px solid rgb(var(--white-monochrome)) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    border-radius: 8px !important;
    color: rgb(var(--white-monochrome));
}

#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: rgba(var(--very-light-gray-monochrome), 0.25);
}

#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    background-color: transparent;
}

#top-bar li:hover ul,
#top-bar li.sfhover ul {
    background-color: transparent;
    border: 1px solid rgb(var(--white-monochrome)) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    border-radius: 8px !important;
}

#top-bar ul li.sfhover ul li:first-of-type a,
#top-bar ul li:hover ul li:first-of-type a {
    border-top: 0;
}

#top-bar ul li>a:hover {
    transform: none;
}

/* 搜索框和页眉标题 */

#search-top-box-form>input[type=submit],
#search-top-box-form>input[type=submit]:hover,
#search-top-box-form>input[type=submit]:focus,
#search-top-box-form>input[type=submit]:target {
    margin-top: 0;
}

div#search-top-box {
    top: 14px;
}

#extra-div-1::before {
    top: 0.7rem;
}

#extra-div-2::before {
    top: 2.8rem;
}

@media (max-width: 1020px) {
    #extra-div-1::before {
        top: 0.3rem;
        font-size: calc(0.85 * 27.45px);
    }
}

@media (max-width: 1020px) {
    #extra-div-2::before {
        top: 2rem;
        font-size: calc(0.85 * 1.22em);
    }
}

/* 页面元素边框调整 */

blockquote,
div.blockquote, .page-source, #toc {
    background: rgba(var(--very-light-gray-monochrome), 0.25);
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
}

.page-source {
    width: unset;
}

.scp-image-block img,
.scp-image-block .scp-image-caption {
    outline: solid 1px rgb(var(--white-monochrome));
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.7);
    background: rgba(var(--very-light-gray-monochrome), 0.5);
    margin-top: 10px;
}

.scp-image-block img {
    background: transparent;
}

.scp-image-block span.printuser.avatarhover img {
    outline: none;
    box-shadow: none;
}

.modalbox {
    background: rgba(var(--very-light-gray-monochrome), 0.25) !important;
    border: 1px solid rgb(var(--white-monochrome)) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    border-radius: 10px !important;
}

/* hr和fancyborder */

hr {
    height: 1px;
    border: 0;
    background-color: rgb(var(--white-monochrome));
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
    background-image: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 1em 0;
}

div#u-credit-view hr {
    margin: 1em 2em;
}

@media (max-width: 767px) {

    #page-content>hr,
    #page-content>.list-pages-box>.list-pages-item>hr {
        margin: 1em 0;
    }
}

.fancyhr hr {
    filter: saturate(0);
    border-top: 2vw solid transparent;
    height: 0;
    box-sizing: border-box;
    border-image-source: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_hr.png");
    border-image-repeat: round round;
    background: rgba(var(--bright-accent), 0) none;
    border-image-slice: 80 500 80 500 fill;
    border-image-width: 10em 80em 10em 80em;
    box-shadow: none;
}

.fancyborder {
    border: 2vw solid rgba(var(--black-monochrome), 0.5);
    border-image: url(https://evernight-aquarium.wdfiles.com/local--files/theme%3Aaero-glass/wl_border.png) 600 round;
    border-image-width: 6;
    box-sizing: border-box;
    padding: 2vw;
}

/* yui-tabs */

.yui-navset .yui-content {
    background: transparent;
    box-shadow: none;
    border-bottom: dotted 4px rgb(var(--white-monochrome));
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border: 1px solid rgb(var(--white-monochrome));
    box-shadow: 0px 0px 8px 4px rgba(var(--black-monochrome), 0.7);
}

.yui-navset .yui-content {
    background: transparent;
    box-shadow: none;
    border-bottom: dotted 4px rgb(var(--white-monochrome));
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    border: 1px solid rgb(var(--white-monochrome));
    box-shadow: 0px 0px 8px 4px rgba(var(--black-monochrome), 0.7);
}

.yui-navset .yui-nav .selected,
.yui-navset .yui-navset-top .yui-nav .selected,
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:active,
.yui-navset .yui-nav a:focus {
    background: rgba(var(--very-light-gray-monochrome), 0.5);
}

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: rgba(var(--pale-gray-monochrome), 0.25);
    border-radius: 10px;
}

.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    background: none;
    border-radius: 10px;
}

.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
    background-color: rgba(var(--very-light-gray-monochrome), 0.5);
}

.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.7);
    border-radius: 10px;
}

.yui-navset .yui-nav .selected a {
    width: 100%;
    color: rgb(var(--dark-gray-monochrome));
}

.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:active {
    color: rgb(var(--dark-gray-monochrome));
}

.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover {
    color: rgb(var(--dark-gray-monochrome));
}

/* 侧栏 */

#side-bar {
    background: linear-gradient(0deg, rgba(var(--dark-gray-monochrome), 0.85) 87%, rgba(var(--dark-gray-monochrome)) 100%);
    direction: rtl;
}

#side-bar .side-block {
    direction: ltr;
    background: linear-gradient(180deg, rgba(var(--black-monochrome), 0.98) 0%, rgb(var(--gray-monochrome)) 100%);
    border: solid 2px rgb(var(--gray-monochrome));
}

#side-bar .side-block.resources {
    background: linear-gradient(180deg, rgba(var(--black-monochrome), 0.98) 0%, rgb(var(--gray-monochrome)) 100%) !important;
    border: solid 2px rgb(var(--gray-monochrome));
}

#side-bar .side-block.media {
    background-color: rgba(var(--black-monochrome), 0.99) !important;
    border-bottom: solid 2px rgba(var(--black-monochrome), 0.98);
    border-top: solid 2px rgba(var(--black-monochrome), 0.98);
}

@media (max-width: 767px) {
    #side-bar:target {
        border: none;
        box-shadow: 3px 0 1px -2px rgba(var(--black-monochrome), 0.04), 1px 0 5px 0 rgba(var(--black-monochrome), 0.2), inset -1px 0px rgb(var(--white-monochrome));
    }
}

#side-bar {
    box-shadow: 0px 0px 5px rgba(var(--black-monochrome), 0.3), inset -1px 0px rgb(var(--white-monochrome));
}

/* 评分模块 */

#page-content .page-rate-widget-box {
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 5px;
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
    display: inline-flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 20px;
}

#page-content .rate-box-with-credit-button {
    border: none;
    background: transparent;
}

#page-content .page-rate-widget-box .rate-points {
    background-color: transparent !important;
    color: rgb(var(--white-monochrome)) !important;
    border: none;
}

.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown,
.page-rate-widget-box .cancel {
    background: transparent !important;
}

#page-content .rate-box-with-credit-button {
    box-shadow: none;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#action-area .page-rate-widget-box .rate-points {
    background-color: transparent !important;
    color: rgb(var(--white-monochrome)) !important;
    border: none;
}

#action-area .page-rate-widget-box {
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 5px;
}

.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover,
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: transparent;
    color: rgb(var(--bright-accent));
}

.rate-box-with-credit-button .creditButton, .creditButtonStandalone {
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 20px;
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 5px;
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
    display: inline-flex !important;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-left: 6px;
}

.creditButtonStandalone p a, .creditButtonStandalone p a:hover {
    background: none !important;
    box-shadow: none !important;
    text-decoration: none;
}

.creditButtonStandalone p a {
    color: rgb(var(--white-monochrome)) !important;
}

.creditButtonStandalone p a:hover {
    color: rgb(var(--pale-accent));
}

.creditButton p a {
    margin-left: 0 !important;
}

.creditRate .rateBox p {
    padding-top: 1px !important;
}

.rate-box-with-credit-button .page-rate-widget-box .cancel {
    padding-right: 4px;
}

/* 脚注 */

.footnotes-footer {
    border-left: solid 3px rgb(var(--white-monochrome));
}

.footnotes-footer a {
    color: rgb(var(--white-monochrome));
}

/* 反选背景 */

::-moz-selection {
    color: inherit;
    background: rgba(var(--bright-accent), .25);
    text-shadow: none
}

::selection {
    color: inherit;
    background: rgba(var(--bright-accent), .25);
    text-shadow: none
}

/* 连接 */

a {
    color: rgb(var(--bright-accent));
}

a:visited {
    color: rgb(var(--bright-accent));
}

a,
a.newpage {
    background: transparent;
}

a.newpage {
    color: rgb(var(--newpage-color));
}

a:active,
a:hover {
    background-color: initial;
    color: rgb(var(--pale-accent));
}

#main-content .page-tags a {
    background: rgba(var(--very-light-gray-monochrome), 0.25);
    border: 1px solid rgb(var(--white-monochrome));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
}

#main-content a.collapsible-block-link {
    background: rgba(var(--very-light-gray-monochrome), 0.25);
    border: 1px solid rgb(var(--white-monochrome));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
    border-radius: 5px;
}

/* 对话框 */

#owindow-1.owindow {
    background: rgba(var(--very-light-gray-monochrome), 0.15) !important;
    border: 1px solid rgb(var(--white-monochrome)) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    border-radius: 10px !important;
}

#owindow-1>div.title.modal-header {
    background: transparent;
}

#owindow-1>div.content.modal-body>div {
    border-top: dotted 2px rgb(var(--white-monochrome));
}

.owindow .button-bar {
    margin: 7px;
}

#owindow-1>div.content.modal-body>table {
    border-right: none;
}

.owindow .title {
    background-color: transparent;
}

/* 按钮 */

a.btn.btn-danger,
a.btn.btn-primary,
.btn-small,
#owindow-1>div.button-bar.modal-footer>a,
#edit-cancel-button,
#edit-diff-button,
#edit-preview-button,
#edit-save-draft-button,
#edit-save-continue-button,
#edit-save-button,
#owindow-1>div.content.modal-body>div>a.btn.btn-default,
#action-area>p:nth-child(5)>a {
    color: rgb(var(--white-monochrome));
    background: rgba(var(--very-light-gray-monochrome), 0.25) !important;
    border: 1px solid rgb(var(--white-monochrome)) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 4px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    border-radius: 5px !important;
}

a.collapsible-block-link:hover,
a.btn.btn-danger:hover,
a.btn.btn-primary:hover,
.btn-small:hover,
#owindow-1>div.button-bar.modal-footer>a:hover,
#edit-cancel-button:hover,
#edit-diff-button:hover,
#edit-preview-button:hover,
#edit-save-draft-button:hover,
#edit-save-continue-button:hover,
#edit-save-button:hover,
#owindow-1>div.content.modal-body>div>a.btn.btn-default:hover,
#action-area>p:nth-child(5)>a:hover {
    color: rgb(var(--pale-accent));
}

a.btn.btn-danger:not(.btn-small.btn-sm) {
    margin-bottom: 4px !important;
}

#owindow-1>div.content.modal-body td.active>b {
    font-family: 'Work Sans', sans-serif;
    color: rgb(200 200 200);
}

.footer-wikiwalk-nav a {
    background: transparent;
}

.footer-wikiwalk-nav p {
    background: rgba(var(--very-light-gray-monochrome), 0.25);
    border: 1px solid rgb(var(--white-monochrome));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 4px 2px rgba(var(--dark-gray-monochrome), 0.8);
    border-radius: 7px;
}

/* tags */

#main-content .page-tags a {
    font-family: sans-serif;
}

#main-content .page-tags a:before {
    font-family: 'Work Sans', sans-serif;
}

/* 滚动条 */

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--white-monochrome),0.45);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--white-monochrome),0.9);
}

::-webkit-scrollbar-track {
    background: rgba(var(--gray-monochrome), 0.85);
}

/* breadcrumbs */

#breadcrumbs {
    color: rgba(var(--white-monochrome), 0.9);
}

/* table */

#page-content .wiki-content-table tr th {
    background-color: rgba(var(--very-light-gray-monochrome), 0.6);
    border-color: rgb(var(--white-monochrome));
    color: rgb(var(--dark-gray-monochrome));
}

#page-content .wiki-content-table tr td {
    border: 1px solid rgb(var(--white-monochrome)) !important;
}

/* 颜色调整 */

.close-credits {
    filter: grayscale(1) brightness(0) invert(1);
}

/* 调整有问题的大小写转换 */

#owindow-1 td::first-letter {
    text-transform: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: none;
}

/* ===内置解决saving pages问题的模块=== */
body[class="wait"] #odialog-shader-iframe,
body[class="wait"] #odialog-shader {
    display: none !important;
}

#odialog-container {
    position: fixed !important;
}

body[class="wait"] #odialog-container {
    z-index: -1;
}

body[class="wait"] #odialog-container #owindow-1 {
    display: none !important;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info {
    background-color: rgb(var(--dark-accent));
    border: 1px solid rgb(var(--bright-accent));
}

div#lock-info {
    font-size: 0 !important;
    margin: .8rem 0 .8rem 1rem !important;
    padding: 0.4rem .8rem !important;
}

div#lock-info::before {
    content: '您握有一个独占的15 分钟锁定，这将会阻止其他人编辑您正在作业的页面。\A这个锁定将在闲置 ';
    display: inline;
    font-size: .82rem;
    white-space: pre-wrap;
}

div#lock-info>strong {
    font-size: .82rem;
}

div#lock-info>br {
    display: none;
}

div#lock-info::after {
    content: ' 秒后失效。';
    display: inline;
    font-size: .82rem;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::before {
    content: '保存页面中……\A若此提示已经显示了很长时间，建议将编辑框中的内容复制到剪切板然后刷新本页重新编辑。';
    display: inline;
    font-size: .82rem;
    color: rgb(var(--bright-accent));
    white-space: pre-wrap;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size: 0;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info>strong {
    font-size: 0;
}

body[class="wait"] a[name="page-top"][target]+div #main-content #action-area div#lock-info::after {
    font-size: 0;
}

/* ===修复ios设备上的显示效果=== */
@supports (-webkit-touch-callout: none) {
    .fancyhr hr {
        filter: saturate(0);
        border-image-source: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_hr.png");
        border-image-repeat: repeat;
        border-image-slice: 80 500 80 500 fill;
        border-image-width: 10em 80em 10em 80em;
    }
}

/* ===修复火狐浏览器上的显示效果=== */

@-moz-document url-prefix() {
    #main-content::before {
        content: " ";
        border: 1px solid rgb(var(--white-monochrome));
        border-radius: 10px;
        position: absolute;
        width: 106%;
        height: calc(100% + 2rem);
        background: var(--background-image);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        display: block;
        filter: var(--main-aero-glass-filter);
        z-index: -6;
        left: calc(-3% - 1px);
        box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8);
        top: -1rem;
    }

    #main-content::after {
        content: " ";
        border: 1px solid rgb(var(--white-monochrome));
        border-radius: 10px;
        position: absolute;
        width: 106%;
        height: calc(100% + 2rem);
        background: rgba(var(--gray-monochrome), 0.25);
        display: block;
        z-index: -6;
        left: calc(-3% - 1px);
        box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8);
        top: -1rem;
    }

    @media only screen and (min-width: 768px) {
        #main-content::before {
            width: calc(100vw - 20px);
            height: 100%;
            top: 1rem;
            left: calc((100vw - 20px - 100%) / (-2) - 1px);
        }

        #main-content::after {
            width: calc(100vw - 20px);
            height: 100%;
            top: 1rem;
            left: calc((100vw - 20px - 100%) / (-2) - 1px);
        }
    }

    @media only screen and (min-width: 975px) {
        #main-content::before {
            width: 110%;
            left: calc(-5% - 1px);
            top: 1rem;
        }

        #main-content::after {
            width: 110%;
            left: calc(-5% - 1px);
            top: 1rem;
        }
    }

    @media only screen and (max-width: 768px) {
        #main-content::before {
            border: 1px solid rgba(var(--white-monochrome), 0.5);
            border-radius: 6px;
        }
    }
}

/* ===如果浏览器不支持backdrop-filter，则使用备选方案=== */

@supports (not ((backdrop-filter: blur(7px)) or (-webkit-backdrop-filter: blur(7px)))) {
    #main-content::before {
        content: " ";
        border: 1px solid rgb(var(--white-monochrome));
        border-radius: 10px;
        position: absolute;
        width: 106%;
        height: calc(100% + 2rem);
        background: var(--background-image);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        display: block;
        filter: var(--main-aero-glass-filter);
        z-index: -6;
        left: calc(-3% - 1px);
        box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8);
        top: -1rem;
    }

    #main-content::after {
        content: " ";
        border: 1px solid rgb(var(--white-monochrome));
        border-radius: 10px;
        position: absolute;
        width: 106%;
        height: calc(100% + 2rem);
        background: rgba(var(--gray-monochrome), 0.25);
        display: block;
        z-index: -6;
        left: calc(-3% - 1px);
        box-shadow: 0px 0px 8px 4px rgba(var(--dark-gray-monochrome), 0.8);
        top: -1rem;
    }

    @media only screen and (min-width: 768px) {
        #main-content::before {
            width: calc(100vw - 20px);
            height: 100%;
            top: 1rem;
            left: calc((100vw - 20px - 100%) / (-2) - 1px);
        }

        #main-content::after {
            width: calc(100vw - 20px);
            height: 100%;
            top: 1rem;
            left: calc((100vw - 20px - 100%) / (-2) - 1px);
        }
    }

    @media only screen and (min-width: 975px) {
        #main-content::before {
            width: 110%;
            left: calc(-5% - 1px);
            top: 1rem;
        }

        #main-content::after {
            width: 110%;
            left: calc(-5% - 1px);
            top: 1rem;
        }
    }

    @media only screen and (max-width: 768px) {
        #main-content::before {
            border: 1px solid rgba(var(--white-monochrome), 0.5);
            border-radius: 6px;
        }
    }
.hovertip,
#account-options {
    background: rgba(var(--dark-gray-monochrome), 0.85) !important;
}
}

/* ===修复兼容性问题=== */

.top-box:before , .header-diamond .diamond-pattern {
    mix-blend-mode: unset !important;
}

blockquote blockquote, div.blockquote div.blockquote, div.blockquote blockquote, blockquote div.blockquote, code, .keycap {
    color:rgb(var(--dark-gray-monochrome));
}

.dblock:hover {
    color:rgb(var(--white-monochrome));
}

div.yui-content > div[style*="none"] > div.achieve {
    display: none;
}

.au-preview {
    background: transparent;
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
    width: calc(100% - 1em) !important;
    transition: background 1s !important;
    margin: 0.5em 0;
    color: unset !important;
}

.au-preview:hover {
    background: rgba(var(--very-light-gray-monochrome), 0.25);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    transition: background 1s !important;
}

.infobox {
    background: transparent !important;
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    transition: background 1s !important;
    margin: 0.5em 0;
    color: unset !important;
}

.infobox:hover {
    background: rgba(var(--very-light-gray-monochrome), 0.25)!important;
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    transition: background 1s !important;
}

@media screen and (min-width: 992px) {
    .au-preview .span {
        display: none;
    }
}

@media screen and (min-width: 992px) {
    .infobox {
        position: relative !important;
        margin: 1em auto;
        right: 0 !important;
        bottom: 0 !important;
        height: 9em !important;
    }
}

body{
     --barColour: rgba(var(--very-light-gray-monochrome), 0.5);
}

#main-content div.info-container a.collapsible-block-link {
    background: rgba(var(--bright-accent));
}

#main-content div.info-container a.collapsible-block-link:hover, #main-content div.info-container a.collapsible-block-link:focus-within {
    background: rgba(var(--pale-accent));
}

.info-container .collapsible-block-unfolded {
    background: rgba(var(--very-light-gray-monochrome), 0.15);
    border: 1px solid rgb(var(--white-monochrome));
    border-radius: 0 0 6px 6px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
}

/* ----END---- */