WhiteStyle Theme

クレジット

タイトル: WhiteStyle Theme
著者: ©︎teruteru_5, RuRItech does not match any existing user name
作成年: 2022

テーマ名: WhiteStyle Theme
作成者: teruteru_5, RuRItech does not match any existing user name

このテーマを使用するには、次のコードをページに貼り付けてください。

[[include :pseudo-scp-jp:ruristyle]]

このテーマは、RuRItech does not match any existing user name及びteruteru_5が自分の記事に使用するために作成したものであり、以下のコンポーネント及び既存CSSテーマから引用されたコードが含まれています:

• Collapsible Sidebar
• Fade In
• Basalt Theme (table構文の挙動、ロゴマーク等)

ご利用は自己責任でお願いします。

+ 画像ライセンス

ファイルページ: 無題のファイル(55)

ソース: http://scp-jp-storage.wikidot.com/file:7178014-55-ztdp
ライセンス: CC BY-SA 3.0

タイトル: ヘッダー1号
著作権者: RuRItech does not match any existing user name
公開年: 2022
補足:

ファイルページ: 無題のファイル(56)

ソース: https://commons.wikimedia.org/wiki/File:Misty_forest_@_Periyar_Tiger_Reserve_-_panoramio.jpg
ライセンス: CC BY-SA 3.0

タイトル: basalt_logotype_black.png
著作権者: Jaseem Hamza
公開年: 不明
補足:

使用例

分割線は5個のハイフン（-----）で作ることができ、何かの中でない限り（例えば引用ブロック）ページ全体に展開されます。この文章を区切る線が分割線です。

---

見出しは行の先頭に1から6個のプラス（+）を置くことで作れます。

+ 見出し

1番目の見出し

2番目の見出し

3番目の見出し

4番目の見出し

5番目の見出し

6番目の見出し

Tabulator

これはタブです。

Tabulation

おや見てください、ここにも文章が。

奇妙なり。

Long Tab

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

長いタブです。たくさん文章が詰まっています。

この空のタブには何故か非常に長い名前が付いています。何故でしょうか？とても奇妙ですね。

空のタブ

空のタブ

空のタブ

空のタブ

空のタブ

これは引用ブロックです。各行の先頭に大なり記号と半角スペース（> ）を置くことで作れます。
追加の文章

---

分割線

入れ子になった引用ブロック

これは	テーブルです
もう既に	作り方は
知っていますね

@import url("http://scp-jp.wikidot.com/component:fade-in/code/1");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
 
/* WhiteStyle Theme
by RuRItech & teruteru_5, 2022 */
 
.anom-bar-container{
    filter: sepia(80%) hue-rotate(180deg) saturate(60%);
}
.anom-bar-container *{
    font-family: 'Noto Sans JP', sans-serif !important;
}
blockquote,
div.blockquote {
    border: 2px double #444444 !important;
    background: #DDDDDD !important;
}
 
@media screen and (max-width:768px) {
    #side-bar {
        background: #FFFFFF;
    }
 
    .side-block {
        border-radius: 0px !important;
        background: rgba(255, 255, 255, .6);
    }
}
 
a {
    color: #2d2c81;
}
 
a.newpage {
    color: #4dAcA1;
}
 
.menu-item img {
    filter: grayscale(100%);
}
 
@media screen and (min-width:768px) {
    #top-bar>.top-bar {
        display: flex;
    }
 
    #top-bar>.top-bar>ul {
        display: flex;
        width: 80%;
        margin: 0 auto;
    }
 
    #top-bar>.top-bar>ul>li {
        flex: 1;
    }
}
 
.hovertip {
    background: #000000 !important;
    color: #FFFFFF;
    font-family: 'Noto Sans JP', sans-serif !important;
    border: none !important;
}
 
h1 {
    color: #000000;
    font-weight: 700;
}
 
::selection {
    color: #FFFFFF;
    background-color: #455765;
}
 
div#side-bar div.side-block {
    border: 2px solid #455765 !important;
}
 
div#side-bar div.side-block div.heading,
div#side-bar div.collapsible-block-unfolded-link,
div#side-bar div.collapsible-block-unfolded-link div.collapsible-block-link {
    color: #2e2930;
    border-color: #2e2930;
}
 
a.collapsible-block-link {
    font-weight: 700 !important
}
 
div#side-bar * {
    font-family: 'Noto Sans JP', sans-serif !important;
}
 
div.yui-navset div.yui-content {
    background: #c8c2c6;
}
 
div.yui-navset ul.yui-nav a,
div.yui-navset div.yui-navset-top ul.yui-nav a {
    background: #dcd6d9;
    color: #485859;
    border: solid #a3a3a3;
}
 
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav a:focus {
    background: #6c848d;
    color: #485859;
}
 
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:focus,
div.yui-navset ul.yui-nav .selected a:hover {
    background: #393f4c;
    color: #e7e7eb;
    border: solid #243356;
}
 
div.page-rate-widget-box {
    border-radius: 0px !important;
}
 
div.page-rate-widget-box,
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel {
    background-color: #455765 !important;
    border: solid #455765 1px !important;
}
 
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    border: solid #455765 !important;
    border-width: 1px 0 !important;
}
 
div.page-rate-widget-box span.rate-points,
div.page-rate-widget-box span.cancel a,
div.page-rate-widget-box span.cancel a:hover {
    color: #d3cfd9;
}
 
div.page-rate-widget-box span.rateup,
div.page-rate-widget-box span.ratedown {
    background-color: #455765 !important;
}
 
div.page-rate-widget-box span.rateup a,
div.page-rate-widget-box span.ratedown a {
    color: #d3cfd9 !important;
}
 
div.page-rate-widget-box span.cancel a:hover,
div.page-rate-widget-box span.rateup a:hover,
div.page-rate-widget-box span.ratedown a:hover {
    background: transparent !important;
    color: transparent !important;
}
 
.creditbutton {
    background-color: #455765 !important;
    color: #d3cfd9 !important;
}
 
#page-title {
    color: #000000;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
 
#login-status * {
    color: #4d4c61 !important;
}
 
#search-top-box-input {
    background-color: #000000 !important;
    color: #FFF !important;
    border-radius: 0px;
}
 
#search-top-box-form .btn {
    background: #000000 !important;
    color: #FFF !important;
    border-radius: 0px !important;
    border: none !important;
}
 
#top-bar ul li a {
    font-weight: 700;
}
 
#top-bar ul li a::before {
    content: "[";
}
 
#top-bar ul li.sfhover a {
    color: #4d4c61 !important;
}
 
#top-bar ul li a::after {
    content: "]";
}
 
.top-bar * {
    font-family: 'Noto Sans JP', sans-serif !important;
}
 
div#header h1 a span {
    font-size: 0px;
}
 
div#header h1 a:before {
    content: "SCP Foundation";
    color: #000000;
    text-shadow: transparent 0px 0px;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
 
div#header h2 span {
    font-size: 0px;
    padding: 4px;
}
 
div#header h2:after {
    content: "Secure Contain Protect";
    font-weight: bold;
    color: #000000;
    text-shadow: transparent 0px 0px;
    padding: 19px 0;
    white-space: pre;
    font-weight: 700;
    font-family: 'Noto Sans JP', sans-serif;
}
 
div#container-wrap {
    background: url(http://scp-jp-storage.wikidot.com/local--files/file:7178014-55-ztdp/unknown-3.png) top left repeat-x;
}
 
div#header {
    background: url(http://scp-jp-storage.wikidot.com/local--files/file:7178014-56-39ro/1652613263733.png) 10px 40px no-repeat;
    background-position: 0.5em 3.3em;
    background-size: 100px 100px;
}
 
#page-content .wiki-content-table tr td {
    border: 1px #000 solid;
}
 
#page-content .wiki-content-table tr td {
    border: 1px #000 solid;
}
 
#page-content .table1 tr th {
    background-color: #D7EFE7 !important;
}
 
#page-content .table1 .st {
    color: #D7EFE7;
}
 
#page-content .table2 tr th {
    background-color: #D8ECF4;
}
 
#page-content .table2 .st {
    color: #D8ECF4;
}
 
#page-content .table3 tr th {
    background-color: #FDF6D7;
}
 
#page-content .table3 .st {
    color: #FDF6D7;
}
 
#page-content .table4 tr th {
    background-color: #FFDABF;
}
 
#page-content .table4 .st {
    color: #FFDABF;
}
 
.blockquote {
    display: block;
    color: #524348;
    background-color: #c8c2be;
    border: dashed 1px #544a47;
    padding: 0 1em;
    float: center;
    margin: 1em 40px;
}
 
.modal {
    padding: 15px;
    box-shadow: rgb(192, 198, 201 / 30%) 0px 0px 3px;
    width: auto;
    margin: auto;
    background: #c0c6c9;
    border: 2px solid #5D5D5D;
}
.danger-diamond .newpage{
    color:transparent !important;
}
 
.smallmodal {
    padding: 15px;
    box-shadow: rgb(192, 198, 201 / 30%) 0px 0px 3px;
    width: 75%;
    margin: auto;
    background: #c0c6c9;
    border: 2px solid #5D5D5D;
}
 
#page-content .table5 tr th {
    background-color: #F5D8E0;
}
 
#page-content .table5 .st {
    color: #F5D8E0;
}
 
#page-content .table6 tr th {
    background-color: rgba(146, 0, 255, 0.2);
}
 
#page-content .table6 .st {
    color: rgb(146, 0, 255);
}
 
.tableb .wiki-content-table {
    border-collapse: separate;
    border-spacing: 5px;
    padding-left: -100px;
}
 
/* Copy from Collapsible sidebar
https://scp-wiki.wikidot.com/component:collapsible-sidebar */
@media only screen and (min-width: 769px) {
    #content-wrap {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
            -ms-flex-pack: center;
     width: -webkit-calc(100vw - (100vw - 100%));
     width: -moz-calc(100vw - (100vw - 100%));
     width: calc(100vw - (100vw - 100%));
     min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
     min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
        -moz-box-flex: 2;
         -ms-flex-positive: 2;
             flex-grow: 2;
     height: auto;
     position: initial;
     margin: 0 auto;
        max-width: inherit;
        margin-left: -11em;
     margin-left: -webkit-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
     margin-left: -moz-calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
     margin-left: calc(var(--sidebar-width-on-desktop, 15.5em) * -1 / 2 - 2rem);
    }
 
    #main-content {
     width: 100%;
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     width: 45.8rem;
         max-width: 45.8rem;
     margin: 0 auto;
    }
 
    #sidebar::-webkit-scrollbar {
     width: 0;
     -webkit-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition: width 300ms 50ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
 
    #sidebar:hover::-webkit-scrollbar,
    #sidebar:active::-webkit-scrollbar,
    #sidebar:focus-within::-webkit-scrollbar {
     width: 0.5rem;
     -webkit-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
 
    #side-bar {
        -webkit-transform: translateX(-14.6rem);
           -moz-transform: translateX(-14.6rem);
            -ms-transform: translateX(-14.6rem);
             -o-transform: translateX(-14.6rem);
                transform: translateX(-14.6rem);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 - 1rem));
     -webkit-transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear;
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     padding 300ms linear,
     margin 300ms linear,
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    width: var(--sidebar-width-on-desktop, 13.6rem) !important;
    min-width: var(--sidebar-width-on-desktop, 13.6rem) !important;
        grid-area: side-bar;
        -ms-grid-row: 1;
     -ms-grid-column: 1;
        padding-right: 2rem;
        background-color: transparent;
        background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 0);
     top: 1rem;
     max-height: 100vh;
     position: -webkit-sticky;
     position: sticky;
     left: 0.5rem;
        padding-left: 1rem;
        scrollbar-width: thin;
        -ms-scroll-chaining: none;
            overscroll-behavior: contain;
        scrollbar-color: rgba(170, 170, 170, 0) rgba(170, 170, 170, 0);
    }
 
    #side-bar::-webkit-scrollbar-track {
        width: 0;
        background-color: rgba(170, 170, 170, 0);
    }
 
    #side-bar::-webkit-scrollbar-thumb {
        width: 0;
        background-color: rgba(170, 170, 170, 0);
    }
 
    #side-bar:hover,
    #side-bar:active {
        background-color: white;
     background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1);
     padding-right: 0;
        margin-right: 2rem;
        -webkit-transform: translateX(-0.5rem);
           -moz-transform: translateX(-0.5rem);
            -ms-transform: translateX(-0.5rem);
             -o-transform: translateX(-0.5rem);
                transform: translateX(-0.5rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: rgba(170, 170, 170, 1) rgba(252, 252, 252, 1);
    }
 
    #side-bar:focus-within {
        background-color: white;
     background-color: rgba(var(--swatch-menubg-color, 255, 255, 255), 1);
     padding-right: 0;
        margin-right: 2rem;
        -webkit-transform: translateX(-0.5rem);
           -moz-transform: translateX(-0.5rem);
            -ms-transform: translateX(-0.5rem);
             -o-transform: translateX(-0.5rem);
                transform: translateX(-0.5rem);
     -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
        -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
         -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
          -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
             transform: translateX(calc(var(--sidebar-width-on-desktop, 1rem) - var(--sidebar-width-on-desktop, 0.5rem) - 2rem));
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: rgba(170, 170, 170, 1) rgba(252, 252, 252, 1);
    }
 
    #side-bar:hover::-webkit-scrollbar-track {
        width: 0.5rem;
        background-color: rgba(252, 252, 252, 1);
    }
 
    #side-bar:hover::-webkit-scrollbar-thumb {
        width: 0.375rem;
        background-color: rgba(170, 170, 170, 1);
    }
 
    #main-content::after {
     content: " ";
     position: fixed;
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
        -moz-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
        -moz-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     width: 1rem;
     height: 100%;
     max-height: 100%;
     top: 0;
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     left: 1rem;
     background: url("http://scp-wiki.wdfiles.com/local--files/component%3Acollapsible-sidebar/sidebar-tab.svg");
     background-repeat: no-repeat;
     background-position: center left 1rem;
     background-attachment: fixed;
     -webkit-background-size: 1rem 12.875rem;
        -moz-background-size: 1rem 12.875rem;
          -o-background-size: 1rem 12.875rem;
             background-size: 1rem 12.875rem;
     pointer-events: none;
    }
 
    #side-bar:hover + #main-content::after,
    #side-bar:active + #main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0;
     width: 0rem;
     font-size: 0em;
    }
 
    #side-bar:focus-within + #main-content::after {
        left: -17em;
        left: -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
        left: calc(var(--sidebar-width-on-desktop, 17em) * -1);
        background-position: center left -17em;
     background-position: center left -webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left -moz-calc(var(--sidebar-width-on-desktop, 17em) * -1);
     background-position: center left calc(var(--sidebar-width-on-desktop, 17em) * -1);
     -webkit-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     left 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     background-position 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0;
     width: 0rem;
     font-size: 0em;
    }
 
    #main-content::before {
        --not-ie: absolute;
        content: " ";
        background-color: black;
        background-color: rgb(var(--black-monochrome, 0, 0, 0));
        position: fixed;
        position: var(--not-ie);
        top: 0;
     top: var(--final-header-height-on-desktop, 0);
        left: 0;
        -webkit-transform: translateX(-12.6rem);
           -moz-transform: translateX(-12.6rem);
            -ms-transform: translateX(-12.6rem);
             -o-transform: translateX(-12.6rem);
                transform: translateX(-12.6rem);
        -webkit-transform: translateX(-webkit-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
           -moz-transform: translateX(-moz-calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
            -ms-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
             -o-transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
                transform: translateX(calc(var(--sidebar-width-on-desktop, 17em) * -1 + 1rem));
        width: 17em;
        width: var(--sidebar-width-on-desktop, 17em);
        height: -webkit-calc(100% - 3rem);
        height: -moz-calc(100% - 3rem);
        height: calc(100% - 3rem);
     height: -webkit-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     height: -moz-calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     height: calc(100% - var(--final-header-height-on-desktop, 0.688rem) - 2.313rem);
     -webkit-transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -o-transition:
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     -moz-transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     transition:
     transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     opacity 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -webkit-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -moz-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
     -o-transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
     opacity: 0.5;
     pointer-events: none;
        z-index: 9;
        margin-bottom: 0;
     margin-bottom: -webkit-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
     margin-bottom: -moz-calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
     margin-bottom: calc(var(--final-header-height-on-desktop, -2.313rem) * -1 - 2.313rem);
    }
 
    #side-bar:hover + #main-content::before,
    #side-bar:active + #main-content::before {
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     opacity: 0;
    }
 
    #side-bar:focus-within + #main-content::before {
     -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
         -ms-transform: translateX(0);
          -o-transform: translateX(0);
             transform: translateX(0);
     opacity: 0;
    }
 
    #side-bar .side-block {
     margin-top: 1rem;
     background-color: rgb(0,0,0,0);
     border-radius: 0;
     border-left-width: 0px;
     border-right-width: 0px;
    }
 
    @supports (-ms-ime-align: auto) {
     #side-bar {
            overflow-y: hidden;
            overflow-x: hidden;
            -webkit-transform: translateX(-90%) !important;
               -moz-transform: translateX(-90%) !important;
                -ms-transform: translateX(-90%) !important;
                 -o-transform: translateX(-90%) !important;
                    transform: translateX(-90%) !important;
     }
 
     #side-bar:hover,
     #side-bar:active {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
     margin-left: -0.5rem;
     }
 
     #side-bar:focus-within {
            overflow-y: auto;
            -webkit-transform: translateX(0) !important;
               -moz-transform: translateX(0) !important;
                -ms-transform: translateX(0) !important;
                 -o-transform: translateX(0) !important;
                    transform: translateX(0) !important;
     margin-left: -0.5rem;
     }
 
     #main-content::before {
            left: 1rem;
            -webkit-transform: translateX(-100%) !important;
               -moz-transform: translateX(-100%) !important;
                -ms-transform: translateX(-100%) !important;
                 -o-transform: translateX(-100%) !important;
                    transform: translateX(-100%) !important;
     }
    }
}