░▒▓ T H E M E T R A N G Đ I Ể M ▓▒░

Màu Sắc Chủ Đề

Bossanova--gray-monochrome(92, 42, 95)

Golden Fizz--bright-accent(250, 245, 45)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Cerise--newpage-color(204, 5, 166)

Fuchsia--light-gray-monochrome(150, 62, 184)

Sapphire--dark-gray-monochrome(39, 6, 75)

Blackcurrant--black-monochrome(14, 12, 45)

Radical Red--medium-accent(255, 52, 131)

Disco--dark-accent(195, 42, 158)

Aqua--pale-gray-monochrome(1, 245, 252)

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

T R A N G Đ I Ể M

Sử dụng

Lưu ý: Đây là theme dựa trên Black Highlighter. Bạn sẽ cần import cả theme Black Highlighter để sử dụng theme này. Để tìm hiểu thêm bấm vào đây.

Trên bất kì wiki nào:

[[include :scp-vn:theme:black-highlighter-theme]]
[[include :scp-vn:theme:aesthetic-theme]]

Ví dụ

Một dòng kẻ ngang có thể được tạo với 5 dấu gạch ngang "-----" và giãn ra cả trang nếu nó không được đặt trong bất kì thứ gì (ví dụ một blockquote). Các đường chia phần của tài liệu là các dòng kẻ ngang.

---

Đề mục có thể được tạo bằng cách đặt giữa một và sáu dấu cộng "+" ở đầu dòng¹

+ Đề mục

Đề mục 1

Đề mục 2

Đề mục 3

Đề mục 4

Đề mục 5

Đề mục 6

Lập bảng

Đây là một tab.

Lập bảng

Nhìn này, nhiều nội dung hơn.

Thật kì lạ.

Tab Dài

Đây là một tab dài. Nó chứa rất nhiều nội dung.²

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Đây là một tab dài. Nó chứa rất nhiều nội dung.

Tab Trống

Tab Trống

Tab Trống

Tab Trống

Tab Trống

Tab Trống

Đây là một hộp, được tạo bằng cách đặt "> " đầu tiên ở từng dòng.³
Nhiều nội dung hơn

---

Đây là horizontal rule

Hộp lồng nhau

Đây là một	bảng
Bạn nên biết	cách làm
rồi chứ

Font chữ nội dung là Prenton.
The Header font is Flood Std.
Font chữ tiêu đề là Eurostile.
Font chữ đơn cách là Recursive.

Footnotes

1. Có footnote chứ?

2. Một footnote thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật, thật dài.

3. Cần thêm mấy footnote

---

+ Show component code

@supports(display: grid) {
    :root {
     --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
     --body-width-on-desktop: 45.75rem;
    }
    @media only screen and (min-width: 769px) {
     #side-bar .close-menu {
     display: block;
     position: fixed;
     top: 0.25rem;
     left: 0.5rem;
     width: 3rem;
     opacity: 1;
     pointer-events: all;
     z-index: -1;
     }
 
     #side-bar .close-menu img {
     color: transparent;
     }
 
     #side-bar .close-menu::before,
     #side-bar .close-menu::after {
     content: "";
     box-sizing: border-box;
     position: fixed;
     display: block;
     top: 0.5rem;
     left: 0.5rem;
     width: 3rem;
     height: 3rem;
     padding: 0;
     margin: 0;
     text-align: center;
     pointer-events: all;
     cursor: pointer;
     transition:
     opacity var(--sidebar-transition-timing);
     }
 
     #side-bar .close-menu::before {
     --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");
     z-index: -1;
     background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
     -webkit-mask: var(--mask);
     mask: var(--mask);
     -webkit-mask-repeat: no-repeat;
     mask-repeat: no-repeat;
     -webkit-mask-position: 50% 50%;
     mask-position: 50% 50%;
     -webkit-mask-size: 60%;
     mask-size: 60%;
     }
 
     #side-bar .close-menu::after {
     z-index: -2;
     background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
     border-radius: var(--toggle-roundness, 50%);
     border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
     }
 
     #side-bar:focus-within .close-menu::before,
     #side-bar:focus-within .close-menu::after {
     opacity: 0;
     }
 
     #side-bar {
     display: block;
     position: fixed;
     top: 0;
     left: calc(var(--sidebar-width-on-desktop)*-1);
     z-index: 10;
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
     margin-top: 0;
     }
 
     #side-bar:focus-within {
     left: 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;
     }
 
     #main-content::before {
     content: "";
     display: block;
     position: fixed;
     top: 0;
     right: 0;
     z-index: -1;
     opacity: 0;
     transition:
     opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     margin-left: var(--sidebar-width-on-desktop);
     background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
     padding-right: 0;
     width: 100%;
     height: 100vh;
     pointer-events: none;
     z-index: 99;
     }
 
     #side-bar:focus-within~#main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
 
     #content-wrap {
     display: flex;
     flex-direction: row;
     width: calc(100vw - (100vw - 100%));
     min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
     flex-grow: 2;
     height: auto;
     position: relative;
     margin: 0 auto;
     max-width: inherit;
     }
 
     #main-content {
     width: 100%;
     position: initial;
     max-height: 100%;
     padding: 2rem 1rem;
     width: var(--body-width-on-desktop, 45.75rem);
     max-width: var(--body-width-on-desktop, 45.75rem);
     margin: 0 auto;
     }
 
     #page-content {
     max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
     }
 
     @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) {
     @supports (-webkit-appearance:none) {
     #side-bar {
     transition:
     left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
     background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     padding-right: 0;
     background-color: rgb(0, 0, 0, 0);
     pointer-events: all;
     overflow-x: visible;
     overflow-y: visible;
     z-index: 999;
     }
 
     #side-bar::-webkit-scrollbar {
     opacity: 0;
     -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
     }
 
     #side-bar .close-menu::before {
     z-index: 999;
     }
 
     #side-bar .close-menu::after {
     z-index: 998;
     }
 
     #side-bar:hover .close-menu::before {
     opacity: 0;
     }
 
     #side-bar:hover {
     left: 0;
     background-color: rgba(var(--swatch-menubg-color), 1);
     padding-right: 0;
     }
 
     #side-bar:hover::-webkit-scrollbar {
     opacity: 1;
     }
 
     #side-bar:hover~#main-content::before {
     width: calc(100% - var(--sidebar-width-on-desktop));
     opacity: 1;
     pointer-events: all;
     }
     }
     }
    }
}

---

+ Hiện code

@supports(display: grid) {
    :root {
        /* header measurements */
        --header-height-on-desktop: 10rem;
        --header-height-on-mobile: 10rem;
        --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
        --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
    }
 
    #header {
        --search-textbox-text-color: var(--swatch-secondary-color);
        background: none;
    }
 
    #header::before {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0.75rem;
        background-image: var(--logo-image);
        background-repeat: no-repeat;
        background-position: center 0;
        background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
        opacity: 0.8;
        pointer-events: none;
    }
 
    #header h1,
    #header h2 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: var(--header-height-on-desktop);
        display: flex;
        align-items: center;
        justify-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    #header h1 a,
    #header h1 a::before,
    #header h2 span,
    #header h2 span::before {
        margin: 0;
        padding: 0;
        z-index: 0;
        display: block;
        text-align: center;
    }
 
    #header h1 {
        z-index: 1;
    }
 
    #header h1 a::before,
    #header h1 a::after {
        content: var(--header-title);
    }
 
    #header h1 a::before  {
        color: rgb(var(--swatch-text-tertiary-color));
        z-index: -1;
        -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark));
    }
 
    #header h1 a::after {
        color: rgb(var(--swatch-headerh1-color));
        z-index: 1;
    }
 
    #header h2 {
        z-index: 0;
        text-transform: uppercase;
        pointer-events: none;
    }
 
    #header h2 span {
        margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em);
    }
 
    #header h2 span::before,
    #header h2 span::after {
        --wght: 600;
        content: var(--header-subtitle);
        position: absolute;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        text-align: center;
    }
 
    #header h2 span::before {
        -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark));
    }
 
    #header h2 span::after {
        color: rgb(var(--swatch-headerh2-color));
        z-index: 1;
    }
 
    #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
        color: rgba(0, 0, 0, 0);
    }
 
    @media (min-width: 36rem) {
 
        #login-status {
            flex-grow: 1;
            left: 3%;
            right: initial;
        }
 
     #login-status::before {
     --mask-image: none;
     background-color: transparent;
     }
 
        #login-status:not(:focus-within) {
            color: rgb(var(--login-line-divider-color));
            -webkit-user-select: initial;
            -moz-user-select: initial;
            -ms-user-select: initial;
            user-select: initial;
        }
 
        #login-status #account-topbutton,
        #login-status:not(:focus-within) #account-topbutton {
            --clip-path:
                    polygon( 0 0, 100% 0, 100% 100%, 0 100% );
            background-color: rgba(var(--login-arrow-color), 0);
 
        }
 
        #login-status #account-topbutton::before{
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--login-arrow-color), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton::before,
        #login-status:not(:focus-within) #account-topbutton:hover::before {
            --clip-path:
                    polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% );
            --mask-image: initial;
        }
 
        #login-status:not(:focus-within) #account-topbutton::after {
            display: none;
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            pointer-events: all;
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {
            opacity: 1;
        }
 
        #login-status #my-account {
            --wght: 300;
        }
 
        #account-options {
            background: var(--gradient-header);
        }
 
        #search-top-box {
            top: 1.5em;
            right: 3%;
            background: rgba(var(--search-focus-textbox-bg-color), 0.4);
            box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4);
        }
 
     #search-top-box:focus-within ~ #login-status {
     opacity: 1;
     }
 
        #search-top-box::after {
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
            transition:
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
        }
 
        #search-top-box:not(:focus-within)::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0% 100%
                    );
            background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
            -webkit-clip-path: var(--clip-path);
            clip-path: var(--clip-path);
        }
 
        #search-top-box:not(:focus-within):hover::after {
            --clip-path:
                    polygon(
                        0 0,
                        100% 0,
                        100% 100%,
                        0 100%
                    );
            background-color: rgb(var(--search-icon-hover-bg-color));
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) {
            max-width: var(--search-width);
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
            max-width: var(--search-width);
            padding: 0 var(--search-height) 0 1em;
            outline-width: 0;
            background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
            color: rgba(var(--search-textbox-text-color), 0.4);
            cursor: pointer;
        }
 
        #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
        #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] {
            pointer-events: all;
            border: none;
        }
 
    }
 
    #page-title::after,
    .meta-title::after,
    #page-title::before,
    .meta-title::before {
        content: "";
        flex-grow: 1;
        height: 0.0625rem;
        background: rgb(var(--swatch-primary));
    }
 
    #page-title::before,
    .meta-title::before {
        margin: auto 1.25rem auto auto;
    }
}

+ Hiện mã nguồn

@import url("https://use.typekit.net/afb2wxe.css");
 
@supports(display: grid) {
 
    :root {
     /* S-CSS-P Integration */
     /* If you're making a new CSS theme, please include the following three variables at minimum. */
     --theme-base: "black-highlighter";
     /* must be either "black-highlighter" or "sigma9" */
     --theme-id: "AESTHETIC-theme";
     /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
     --theme-name: "Theme TRANG ĐIỂM";
     /* set this to your theme's full name */
 
     /* Header */
     --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:aesthetic-theme/AESTHETIC_logo.svg");
     --header-title: "Tổ Chức SCP";
     --header-subtitle: "Quản Thúc, Lưu Trữ, Bảo Vệ";
 
     /* Typefaces */
     --body-font: prenton, serif;
     --header-font: flood-std, sans-serif;
     --title-font: eurostile-extended, sans-serif;
 
     /* Standard Colors */
     --white-monochrome: 217, 233, 251;
     --pale-gray-monochrome: 1, 245, 252;
     --light-pale-gray-monochrome: 170, 207, 251;
     --very-light-gray-monochrome: 26, 139, 235;
     --light-gray-monochrome: 150, 62, 184;
     --gray-monochrome: 92, 42, 95;
     --dark-gray-monochrome: 39, 6, 75;
     --black-monochrome: 14, 12, 45;
     --bright-accent: 250, 245, 45;
     --pale-accent: var(--pale-gray-monochrome);
     --medium-accent: 255, 52, 131;
     --dark-accent: 195, 42, 158;
     --newpage-color: 204, 5, 166;
 
     --swatch-text-general: var(--swatch-text-light);
     --swatch-menutxt-general-color: var(--swatch-menutxt-light-color);
 
     --ui-wght: 700;
     --ui-hvr-wght: 900;
 
     /* ===SECONDARY & TERTIARY COLORS=== */
     /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */
 
     /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
     --swatch-secondary-color: var(--swatch-menubg-dark-color);
     --swatch-tertiary-color: var(--swatch-menubg-light-color);
     --swatch-alternate-color: var(--swatch-primary);
 
     /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
     --swatch-text-secondary-color: var(--swatch-menutxt-dark-color);
     --swatch-text-tertiary-color: var(--swatch-menutxt-light-color);
 
     --swatch-headerh2-color: var(--dark-gray-monochrome);
 
     --swatch-topmenu-border-color: var(--pale-gray-monochrome);
     --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
 
     /* ===MENU BACKGROUND COLORS=== */
     --swatch-menubg-color: var(--black-monochrome);
 
     --swatch-border-color: var(--pale-gray-monochrome);
 
     --rating-module-text-color: var(--bright-accent);
     --rating-module-button-color: var(--bright-accent);
 
     --swatch-background: var(--black-monochrome, 14, 12, 45);
     --background-gradient-color: var(--dark-accent);
 
     --header-gradient-color-bottom: var(--light-gray-monochrome);
     --header-gradient-color-middle: var(--dark-accent);
     --header-gradient-color-top: var(--medium-accent);
 
     --gradient-header: linear-gradient(355deg,
     rgb(var(--header-gradient-color-bottom)) 0%,
     rgb(var(--header-gradient-color-middle)) 20%,
     rgb(var(--header-gradient-color-top)) 100%);
 
     --rating-module-text-color: var(--dark-gray-monochrome);
     --rating-module-button-color: var(--dark-gray-monochrome);
 
     /* ===HEADER TITLE FONT SIZES=== */
     --header-h1-font-size: calc(var(--base-font-size) * 3.5);
     --header-h2-font-size: calc(var(--base-font-size) * 0.8);
 
     --scrollbar-width: 0.5rem;
    }
 
    #header {
     /* ===HEADER ELEMENTS=== */
 
     /* ===SEARCH ELEMENT=== */
     --search-icon-color: var(--swatch-primary);
     --search-icon-bg-color: var(--black-monochrome);
     --search-icon-hover-color: var(--swatch-primary);
     --search-icon-hover-bg-color: var(--swatch-primary);
     --search-icon-focus-color: var(--black-monochrome);
     --search-icon-focus-bg-color: var(--medium-accent);
     --search-focus-outline-color: var(--medium-accent);
     --search-textbox-text-color: var(--swatch-text-tertiary-color);
     --search-focus-textbox-text-color: var(--swatch-text-secondary-color);
    }
 
    #top-bar {
     /* ===TOPBAR ELEMENTS=== */
 
     /* ===TOPBAR CATEGORIES=== */
     --topmenu-category-color: var(--bright-accent);
     --topmenu-category-hover-color: var(--bright-accent);
 
     --mobile-topmenu-sidebar-button-color: var(--bright-accent);
 
     /* ===DROPDOWN MENU=== */
     --dropdown-bg-color: var(--swatch-secondary-color), 0.8;
     --dropdown-links-color: var(--swatch-text-tertiary-color);
     --dropdown-links-hover-color: var(--swatch-text-secondary-color);
    }
 
    #side-bar {
     /* ===SIDE-BAR ELEMENTS=== */
 
     /* ===SIDE-BAR GENERAL=== */
     --sidebar-resources-bg-color: 0, 0, 0, 0;
     --sidebar-media-bg-color: 0, 0, 0, 0;
 
     /* ===SIDEBLOCK MENU=== */
     --sideblock-bg-color: 0, 0, 0, 0;
     /* Transparent */
 
     /* ===MENU-ITEMS=== */
     --sidebar-links-text: var(--swatch-primary);
     --sidebar-links-hover-bg-color: var(--medium-accent);
     --sidebar-links-hover-text-color: var(--swatch-text-secondary-color);
    }
 
    #license-area {
     --license-link-hover-color: var(--swatch-text-secondary-color);
    }
 
    ::-moz-selection {
     background: rgb(var(--pale-gray-monochrome));
     color: rgb(var(--black-monochrome));
    }
 
    ::selection {
     background: rgb(var(--pale-gray-monochrome));
     color: rgb(var(--black-monochrome));
    }
 
    html {
     background: white;
    }
 
    html,
    body {
     font-feature-settings: "onum"0;
     font-variant-numeric: tabular-nums;
    }
 
    #extra-div-1 {
     --outrun-lines: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 645' overflow='visible' xml:space='preserve'%3E%3Cg id='Outrun_Lines'%3E%3Crect width='100' height='60'/%3E%3Crect y='63' width='100' height='12'/%3E%3Crect y='78' width='100' height='13'/%3E%3Crect y='94' width='100' height='12'/%3E%3Crect y='109' width='100' height='13'/%3E%3Crect y='125' width='100' height='12'/%3E%3Crect y='141' width='100' height='12'/%3E%3Crect y='157' width='100' height='12'/%3E%3Crect y='172' width='100' height='12'/%3E%3Crect y='187' width='100' height='12'/%3E%3Crect y='203' width='100' height='12'/%3E%3Crect y='219.5' width='100' height='11'/%3E%3Crect y='234.5' width='100' height='11'/%3E%3Crect y='249.5' width='100' height='11'/%3E%3Crect y='265.5' width='100' height='11'/%3E%3Crect y='281' width='100' height='10'/%3E%3Crect y='297' width='100' height='10'/%3E%3Crect y='313' width='100' height='9'/%3E%3Crect y='328' width='100' height='9'/%3E%3Crect y='343.5' width='100' height='9'/%3E%3Crect y='359' width='100' height='8'/%3E%3Crect y='374' width='100' height='9'/%3E%3Crect y='391' width='100' height='8'/%3E%3Crect y='407' width='100' height='8'/%3E%3Crect y='422' width='100' height='8'/%3E%3Crect y='437' width='100' height='8'/%3E%3Crect y='453' width='100' height='8'/%3E%3Crect y='469' width='100' height='6'/%3E%3Crect y='485' width='100' height='6'/%3E%3Crect y='501' width='100' height='4'/%3E%3Crect y='517' width='100' height='4'/%3E%3Crect y='533' width='100' height='4'/%3E%3Crect y='549' width='100' height='3'/%3E%3Crect y='564' width='100' height='3'/%3E%3Crect y='579' width='100' height='3'/%3E%3Crect y='595' width='100' height='3'/%3E%3Crect y='611' width='100' height='2'/%3E%3Crect y='627' width='100' height='2'/%3E%3Crect y='643' width='100' height='2'/%3E%3C/g%3E%3C/svg%3E%0A");
     width: 100%;
     height: calc(100% - var(--final-header-height-on-desktop));
     position: absolute;
     top: var(--final-header-height-on-desktop);
     left: 0;
     background-image: var(--gradient-background);
     -webkit-mask-image: var(--outrun-lines);
             mask-image: var(--outrun-lines);
     -webkit-mask-size: 8%;
             mask-size: 8%;
     -webkit-mask-position: top;
             mask-position: top;
     -webkit-mask-repeat: repeat-x;
             mask-repeat: repeat-x;
     pointer-events: none;
     opacity: 0.5;
    }
 
    #extra-div-2,
    #extra-div-2 span {
     /* Mountains Mask hosted on external site due to CORS issue with wikidot hosted mask SVGs */
     --mountains-mask: url("https://elusionillusion.com/img/AESTHETIC_mtns_vs2.svg");
     display: block;
     width: 100%;
     top: 0;
     left: 0;
     position: absolute;
     pointer-events: none;
    }
 
    #extra-div-2 {
     height: var(--header-height-on-desktop);
     background-image:
     linear-gradient(35deg,
     rgb(var(--pale-gray-monochrome), 1) 0%,
     rgb(var(--pale-gray-monochrome), 0.3) 30%,
     rgb(var(--pale-gray-monochrome), 0.4) 50%,
     rgba(var(--pale-gray-monochrome), 0) 100%);
     -webkit-mask-image: var(--mountains-mask);
             mask-image: var(--mountains-mask);
     background-repeat: repeat;
     -webkit-mask-size: 400vmin;
             mask-size: 400vmin;
     -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
     -webkit-mask-position: bottom;
             mask-position: bottom;
    }
 
    #extra-div-2 span {
     height: 100%;
     background-image:
     linear-gradient(70deg,
     rgb(var(--bright-accent), 0.8) 0%,
     rgb(var(--medium-accent), 0.3) 50%,
     rgba(var(--bright-accent), 0.8) 100%);
     background-repeat: repeat;
     -webkit-animation: movebg 30s linear infinite normal;
             animation: movebg 30s linear infinite normal;
     will-change: background-size, background-position-x, background-position-y;
    }
 
    @-webkit-keyframes movebg {
     0% {
     background-size: 200vw;
     background-position-x: 100vw;
     background-position-y: -100vw;
     }
 
     50% {
     background-size: 400vw;
     background-position-x: 0;
     background-position-y: 100vw;
     }
 
     100% {
     background-size: 200vw;
     background-position-x: -100vw;
     background-position-y: 200vw;
     }
    }
 
    @keyframes movebg {
     0% {
     background-size: 200vw;
     background-position-x: 100vw;
     background-position-y: -100vw;
     }
 
     50% {
     background-size: 400vw;
     background-position-x: 0;
     background-position-y: 100vw;
     }
 
     100% {
     background-size: 200vw;
     background-position-x: -100vw;
     background-position-y: 200vw;
     }
    }
 
    #header::before {
     opacity: 1;
     -webkit-filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5));
             filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5));
    }
 
    #header h1 a {
     overflow-wrap: normal;
    }
 
    #header h1 a::before,
    #header h1 a::after {
     letter-spacing: 0.07em;
    }
 
    #header h1 a::before {
     -webkit-text-stroke: 0.325rem rgb(var(--dark-gray-monochrome));
    }
 
    #header h1 a::after {
     color: rgb(var(--bright-accent));
     background:
     linear-gradient(to top,
     rgb(var(--dark-gray-monochrome)) 0%,
     rgb(var(--dark-gray-monochrome)) 20%,
     rgb(var(--dark-accent)) 40%,
     rgb(var(--pale-gray-monochrome)) 70%);
     background-size: contain;
     overflow-wrap: normal;
     z-index: 1;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    }
 
    #header h2 span {
     width: 100%;
    }
 
    #header h2 span::before,
    #header h2 span::after {
     --wght: 500;
     top: calc(50% + (var(--header-h1-font-size) / 1.5));
     letter-spacing: 0.25em;
    }
 
    #header h2 span::before {
     -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-secondary-color));
    }
 
    /* Mobile Header Font Sizes */
    @media only screen and (max-width: 36rem) {
     :root {
     /* ===HEADER TITLE FONT SIZES=== */
     --header-h1-font-size: calc(var(--base-font-size) * 3);
     --header-h2-font-size: calc(var(--base-font-size) * 0.7);
     }
    }
 
    @media only screen and (max-width: 21.875rem) {
     :root {
     /* ===HEADER TITLE FONT SIZES=== */
     --header-h1-font-size: calc(var(--base-font-size) * 2);
     --header-h2-font-size: calc(var(--base-font-size) * 0.7);
     }
    }
 
    #top-bar {
     font-size: var(--base-font-size);
    }
 
    #top-bar div.top-bar>ul>li>ul>li>a {
     --wght: 600;
    }
 
    #side-bar,
    #side-bar:hover {
     background: linear-gradient(to bottom,
     rgb(var(--black-monochrome)) 0%,
     rgb(var(--dark-gray-monochrome)) 50%,
     rgb(var(--dark-accent)) 100%);
     background-size: 400vh;
     background-origin: border-box;
     background-position: top left;
    }
 
    #side-bar div.menu-item {
     --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, ));
     border-bottom: 0.0625rem solid rgb(var(--swatch-border-color));
     border-top: 0.0625rem solid rgb(var(--swatch-border-color));
     margin-top: -0.0625rem;
     text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }
 
    #side-bar div.menu-item> :not(:nth-child(2)):not(.collapsible-block) {
     border-left: 0.0625rem solid rgb(var(--swatch-border-color));
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item a:visited,
    #side-bar div.menu-item .text {
     --text-shadow: rgb(var(--black-monochrome));
     letter-spacing: 0.1em;
     word-spacing: 0.1em;
    }
 
    #side-bar div.menu-item a::before,
    #side-bar div.menu-item a:hover::before {
     background: var(--gradient-header);
     background-attachment: fixed;
     background-position: top;
     background-origin: border-box;
     background-size: 100vh;
    }
 
    #side-bar .heading {
     text-align: center;
     justify-content: center;
     align-items: center;
    }
 
    #side-bar .heading p,
    #side-bar .side-block>.collapsible-block .collapsible-block-link {
     --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, ));
     --ui-hvr-wght: 900;
     letter-spacing: 0.05rem;
     font-size: 1.25rem;
     position: relative;
     display: flex;
     justify-content: center;
     margin: 1rem 0 1rem 0.5rem;
     color: rgb(var(--pale-gray-monochrome));
     font-family: var(--header-font);
     text-transform: none;
    }
 
    #side-bar .side-block[style*="background-color:"] .heading {
     margin-top: .25rem;
    }
 
    #side-bar .heading p::after,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::after {
     bottom: -0.6rem;
    }
 
    #side-bar .heading p::before,
    #side-bar .side-block>.collapsible-block .collapsible-block-link::before {
     top: -0.6rem;
    }
 
    a[href*="/random:random-tale"],
    a[href*="/most-recently-edited"] {
     min-width: calc((var(--base-font-size) * (14 / 15)) * 6.5);
    }
 
    #main-content {
     z-index: 1;
     position: relative;
    }
 
    #main-content a:not([href*="javascript"]):not([href*="classification-"]),
    #main-content a:not([href*="javascript"]):not([href*="classification-"]):visited,
    #main-content div.collapsible-block a,
    #main-content div.collapsible-block a:visited {
     --wght: var(--ui-wght);
     background-color: rgb(var(--swatch-primary));
     align-items: center;
     justify-content: center;
     text-align: center;
     margin: 0 0.4em 0 0.2em;
     color: rgb(var(--swatch-background));
     box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
     -webkit-box-decoration-break: clone;
             box-decoration-break: clone;
    }
 
    #main-content a:not([href*="javascript"]):not([href*="classification-"]):hover,
    #main-content a:not([href*="javascript"]):not([href*="classification-"]):active,
    #main-content div.collapsible-block a:hover,
    #main-content div.collapsible-block a:active {
     --wght: var(--ui-hvr-wght);
     background-color: rgb(var(--swatch-primary-darker));
     color: rgb(var(--swatch-background));
     text-decoration: none;
     box-shadow:
     0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
     0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }
 
    #main-content a:not([href*="javascript"]):not([href*="classification-"]):focus-within,
    #main-content div.collapsible-block a:focus-within {
     --wght: var(--ui-hvr-wght);
     background-color: rgb(var(--swatch-primary-darker));
     color: rgb(var(--swatch-background));
     text-decoration: none;
     box-shadow:
     0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
     0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }
 
    #main-content a.footnoteref,
    #main-content a.footnoteref:visited {
     --wght: var(--ui-wght);
     background-color: rgb(var(--swatch-primary));
     width: 1em;
     height: 1.1em;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     margin: 0 0.4em 0 0.2em;
     color: rgb(var(--swatch-background));
     box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    }
 
    #main-content a.footnoteref:hover,
    #main-content a.footnoteref:active {
     --wght: var(--ui-hvr-wght);
     background-color: rgb(var(--swatch-primary-darker));
     color: rgb(var(--swatch-background));
     box-shadow:
     0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
     0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }
 
    a.footnoteref:focus-within {
     --wght: var(--ui-hvr-wght);
     background-color: rgb(var(--swatch-primary-darker));
     color: rgb(var(--swatch-background));
     box-shadow:
     0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
     0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
    }
 
    #page-title,
    .meta-title {
     color: rgb(var(--pale-gray-monochrome));
     border-color: rgba(0, 0, 0, 0);
    }
 
    #page-title::before,
    #page-title::after,
    .meta-title::before,
    .meta-title::after {
     background-image:
     linear-gradient(30deg,
     rgb(var(--bright-accent), 0.8) 0%,
     rgb(var(--dark-accent), 0.3) 50%,
     rgba(var(--bright-accent), 1) 100%);
     background-size: 100%;
     background-color: rgb(var(--bright-accent));
     height: 0.125rem;
    }
 
    blockquote,
    .blockquote {
     background-color: rgba(var(--gray-monochrome), 0.25);
     border: 0.0625rem solid rgb(var(--swatch-border-color));
    }
 
    blockquote:nth-of-type(odd) {
     border-color: rgb(var(--swatch-border-color));
    }
 
    blockquote:nth-of-type(even) {
     border-color: rgb(var(--swatch-primary));
    }
 
    table.wiki-content-table th {
     background: rgb(var(--swatch-primary-darker));
     color: rgb(var(--dark-gray-monochrome));
    }
 
    table.wiki-content-table,
    table.wiki-content-table th,
    table.wiki-content-table td {
     border: .0625rem solid rgba(var(--swatch-border-color), 1) !important;
     border-collapse: collapse;
    }
 
    .code {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
     border-color: rgb(var(--swatch-border-color));
    }
 
    .hl-main {
     -webkit-filter: invert(1) hue-rotate(180deg);
             filter: invert(1) hue-rotate(180deg);
    }
 
    .scp-image-block .scp-image-caption {
     background-color: rgba(var(--swatch-menubg-dark-color), 0.25);
    }
 
    .scp-image-block img {
     border: 0.0625rem solid rgba(var(--swatch-border-color));
    }
 
    a:visited {
     color: rgb(var(--swatch-primary-darker));
    }
 
    h1 {
     color: rgb(var(--swatch-primary)) !important;
    }
 
    hr {
     border-top: none;
     position: relative;
     height: 0.35rem;
     background: rgba(0, 0, 0, 0);
     display: flex;
    }
 
    hr::before {
     content: " ";
     position: absolute;
     top: 0.1125rem;
     left: 0;
     border-top: none;
     width: 100%;
     height: 0.125rem;
     background: linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%);
     background-position: center center;
     -webkit-filter: blur(0.04rem);
             filter: blur(0.04rem);
    }
 
    .page-rate-widget-box {
     background: linear-gradient(to top left, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important;
    }
 
    form#edit-page-form {
     background-color: rgba(var(--dark-accent), 0.25);
     border: 0.0625rem solid rgb(var(--light-gray-monochrome));
    }
 
    #side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) {
     -webkit-filter: invert(1);
             filter: invert(1);
    }
 
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before,
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before,
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after {
     background-color: rgb(var(--swatch-menubg-color));
    }
 
    #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before {
     mix-blend-mode: lighten;
    }
 
    @media only screen and (max-width: 56.25rem) {
 
     a[href*="/random:random-tale"],
     a[href*="/most-recently-edited"] {
     min-width: calc((var(--base-font-size) * (14 / 15)) * 4);
     }
 
     #side-bar .heading p,
     #side-bar .side-block>.collapsible-block .collapsible-block-link {
     font-size: 1em;
     }
    }
 
    @-webkit-keyframes fade-in {
     from {
     opacity: 0;
     box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
     }
 
     to {
     opacity: 1;
     box-shadow:
     0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
     0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
     }
    }
 
    @keyframes fade-in {
     from {
     opacity: 0;
     box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker));
     }
 
     to {
     opacity: 1;
     box-shadow:
     0.125em 0.125em 0 0 rgb(var(--swatch-primary)),
     0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome));
     }
    }
}