/* Cobalt 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;
    --pale-gray-monochrome: 214, 245, 255;
    --very-light-gray-monochrome: 220, 222, 230;
    --light-gray-monochrome: 70, 130, 183;
    --gray-monochrome: 0, 35, 100;
    --dark-gray-monochrome: 10, 30, 55;
    --pale-accent: 136, 198, 201;
    --bright-accent: 140, 234, 222;
    --medium-accent: 41, 127, 128;
    --dark-accent: var(--dark-gray-monochrome);
    --newpage-color: 150, 235, 150;

    --logo: url(https://fastly.jsdelivr.net/gh/Crimone/crimson-anemone@main/files/evernight-white-6.svg);

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

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

    --title: " PARADIGM SHIFT";
    --subtitle: " TO EVERYWHERE AND TO NOWHERE";
}

/* body */

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

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

#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);
    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);
    box-shadow: 0px 1px rgb(var(--white-monochrome)), inset 0px 1px rgb(var(--white-monochrome)), 0px 0px 8px 2px rgba(0, 0, 0, 0.8);
}

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

#extra-div-1::before, #extra-div-2::before, #side-bar::before {
    font-family:  'Fira Code', monospace;
}

#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);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8) !important;
    border-radius: 8px !important;
}

#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);
    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;
}

.logo {
    transform-origin: 50% 33.333%;
}

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

#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 {
    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);
    box-shadow: 0px 0px 8px 2px rgba(var(--dark-gray-monochrome), 0.8);
}

.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;
}

.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);
    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(0, 0, 0, 0.5);
    border-image: url("https://evernight-aquarium.wdfiles.com/local--files/theme%3Acobalt-aero-glass/wl_border.png") 600 round;
    border-image-width: 6;
}

/* 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 rgb(0 0 0 / 70%);
}

.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 rgb(0 0 0 / 70%);
}

.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 rgb(0 0 0 / 70%);
    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));
}

/* 侧栏 */

#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(10, 10, 10, 1) 0%, rgb(var(--gray-monochrome)) 100%);
    border: solid 2px rgb(var(--gray-monochrome));
}

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

#side-bar .side-block.media {
    background-color: rgb(5 5 5) !important;
    border-bottom: solid 2px rgb(10, 10, 10);
    border-top: solid 2px rgb(10 10 10);
}

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

#side-bar {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 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: #F5F5F5 !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: #F5F5F5 !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 {
    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;
}

.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);
    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);
    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);
    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;
}

/* 按钮 */

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 {
    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);
    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);
}

/* 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(--light-gray-monochrome));
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--medium-accent));
}

::-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: hue-rotate(177deg) saturate(0.4) brightness(4);
}

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

#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: url(https://tva1.sinaimg.cn/large/006Vtzrtly1h5mksft9x8j33j81c34qq.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: auto 100%;
        background-position: center top;
        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: url(https://tva1.sinaimg.cn/large/006Vtzrtly1h5mksft9x8j33j81c34qq.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: auto 100%;
        background-position: center top;
        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;
        }
    }
}

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