░▒▓ 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: -ms-grid) or (display: grid)) {
:root {
    /* header measurements */
    --header-height-on-desktop: 10rem;
    --header-height-on-mobile: 10rem;
    --header-h1-font-size: -webkit-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
    --header-h1-font-size: -moz-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
    --header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
}
 
#header {
    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 -3.5rem;
    -webkit-background-size: auto 8rem;
    -moz-background-size: auto 8rem;
    -o-background-size: auto 8rem;
    background-size: auto 8rem;
    background-position: center top;
    opacity: 0.45;
    pointer-events: none;
}
 
#header h1,
#header h1 a,
#header h1 a::before {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    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;
    max-height: inherit;
    z-index: 0;
}
 
#header>h1>a>span {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    max-width: inherit;
}
 
#header h1 {
    height: -webkit-calc(100% - 2.25rem);
    height: -moz-calc(100% - 2.25rem);
    height: calc(100% - 2.25rem);
}
 
#header h1 a::before,
#header h1 a {
    text-align: center;
    line-height: 0.8;
}
 
#header h2,
#header h2 span,
#header h2 span::before {
    position: absolute;
    left: 0;
    top: 0.15em;
    margin-left: 0;
    padding: 0;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-height: inherit;
    z-index: 0;
    text-transform: uppercase;
    pointer-events: none;
}
 
#login-status {
    min-height: -webkit-calc(var(--base-font-size) * 1.5);
    min-height: -moz-calc(var(--base-font-size) * 1.5);
    min-height: calc(var(--base-font-size) * 1.5);
    -webkit-border-radius: .0625rem;
    -moz-border-radius: .0625rem;
    border-radius: .0625rem;
    -webkit-border-radius: var(--border-radius-width);
    -moz-border-radius: var(--border-radius-width);
    border-radius: var(--border-radius-width);
    color: rgb(var(--pale-gray-monochrome));
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    left: 3%;
    right: initial;
}
 
#login-status .printuser {
    --wght: 900;
    position: relative;
    top: 0;
    left: 0;
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0.25rem;
    margin: 0;
    font-weight: 900;
}
 
#login-status #my-account {
    --wght: 300;
    color: rgb(var(--pale-gray-monochrome));
    font-weight: 300;
}
 
#login-status #account-topbutton {
    border: initial;
    padding: 0.5em 0.5em 0.5em 0.25em;
    position: relative;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 1em;
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: var(--gradient-header);
    color: rgb(var(--swatch-text-light));
}
 
#account-options ul li a {
    color: rgb(var(--swatch-text-light));
}
 
#account-options li a:hover {
    color: rgb(var(--swatch-text-light));
    text-decoration: underline;
}
 
@media only screen and (min-width: 769px) {
    #search-top-box {
        right: 3%;
        top: 0.5rem;
    }
 
    #search-top-box-form>input,
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
        background: rgb(var(--black-monochrome));
    }   
 
    #search-top-box-form>input {        
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
    }
 
    #search-top-box-form>input:hover,
    #search-top-box-form>input:focus {
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
    }
 
    #search-top-box-form input[type="submit"],
    #search-top-box-form input[type="submit"]:focus,
    #search-top-box-form input[type="submit"]:hover {  
        border: none;
        border-left: 0.0625rem solid rgb(var(--swatch-primary-darkest));
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-dark-color));
    }
 
    #search-top-box-form input[type="submit"] {
        background: rgb(var(--swatch-primary-darkest));
        color: rgb(var(--swatch-menutxt-light-color));
    }
 
    #search-top-box-form input[type="submit"]:focus,
    #search-top-box-form input[type="submit"]:hover {
        background: rgb(var(--swatch-primary));
        -webkit-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        -moz-box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
        box-shadow: 0 0 0 0.125rem rgb(var(--swatch-menubg-medium-dark-color));
    }
}
 
#page-title {
    text-align: center;
}
 
@media only screen and (max-width:768px) {
    :root {
        --header-h1-font-size: -webkit-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
        --header-h1-font-size: -moz-calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
        --header-h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 18.750rem) / (60 - 18.750)));
    }
 
    #header h1,
    #header h1 a,
    #header h1 a::before {
        top: 0.25rem;
    }
 
    #header h2,
    #header h2 a,
    #header h2 a::before {
        top: 0;
    }
 
    #header h2 span {
        margin-top: -webkit-calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 + .25rem);
    margin-top: -moz-calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 + .25rem);
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - .25rem);
    }
}

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