SCP-7220

---

+ Show component code

: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);
 
        --logo-image: url("https://nu-scptheme.github.io/Black-Highlighter/img/logo.svg");
    }
 
    #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);
        }
 
         #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;
    }

+ 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.5rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            background: unset;
            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,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu {
            pointer-events: none;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::before,
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover .close-menu::after {
            opacity: 0;
            pointer-events: none;
        }
 
        #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:not(:has(.close-menu:hover)):not(:focus-within):hover {
            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;
        }
 
        #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before {
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        @supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { #side-bar {
            padding: inherit;
        } }
 
        #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;
            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));
        }
 
        @supports (-webkit-hyphens: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,
            #side-bar:hover .close-menu::after {
                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 mã

/*
Calamity Theme
[2021 Wikidot Theme]
Created by Oboebandgeek99
Based on Swirling Ashes Theme created by Croquembouche.
The UnHuman logo was created by Oboebandgeek99 based on an image in the Public Domain. Licensed under CC-BY-SA 3.0.
*/
 
@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Ubuntu|Space+Mono|Baloo+Da+2&display=swap');
 
/* BHL Vars */
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "calamity";
    --theme-name: "Calamity Theme";
 
    /* Header */
    --logo-image: none;
    --header-title: "Phi Nhân";
    --header-subtitle: "Cuộc Sống Sau Cái Kết";
 
    /* Typefaces */
    --body-font: "Ubuntu", sans-serif;
    --header-font: "Cabin Sketch", sans-serif;
    --title-font: "Baloo Da 2", sans-serif;
    --mono-font: "Space Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --black-monochrome: var(--sky-at-night);
    --dark-gray-monochrome: var(--sky-at-evening);
    --pale-accent: 150, 150, 254;
    /* lavender, for visited links */
    --bright-accent: 51, 201, 208;
    /* bright turquoise */
    --medium-accent: 23, 152, 158;
    /* darker turquoise */
    --dark-accent: 90, 90, 152;
    /* darker purple */
    --alt-accent: var(--sky-at-dawn);
    /* pinkish red, for newpage links */
 
    /* Sky */
    --sky-at-dawn: 221, 93, 112;
    --sky-at-morning: 131, 192, 233;
    --sky-at-daytime: 104, 153, 186;
    --sky-at-evening: 87, 98, 106;
    --sky-at-dusk: 99, 100, 90;
    --sky-at-night: 21, 25, 43;
    --sky-length: 15;
    --sky-time: 65s;
 
    /* Delete the default header background */
    --gradient-header: linear-gradient(transparent, transparent);
    --diagonal-stripes: linear-gradient(transparent, transparent);
 
    /* Background Colors */
    --background-gradient-color: var(--sky-at-daytime);
 
    /* Primary Theme Colors */
    --swatch-primary: var(--medium-accent);
    --swatch-primary-darker: var(--pale-accent);
 
    /* Primary Menu Colors */
    --swatch-menubg-medium-dark-color: var(--medium-accent);
 
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--bright-accent);
    --swatch-tertiary-color: var(--pale-accent);
 
    /* Link Colors */
    --link-color: 110, 110, 170;
    --visited-link-color: var(--medium-accent);
 
    /* Spacing Measurements */
 
    /* header measurements */
    --header-height-on-desktop: 10rem;
    --header-height-on-mobile: 10rem;
 
    /* final values */
    --header-h1-font-size: calc(var(--base-font-size) * 4);
    --header-h2-font-size: calc(var(--base-font-size) * 1.6);
 
    /*Toggle Colors */
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--pale-accent));
    --toggle-roundness: 40%;
 
    /* Login Gradient */
    --login-gradient: linear-gradient(to top,
     rgb(var(--dark-accent)) 0%,
     rgb(var(--medium-accent)) 100%);
 
    /* Ayers Info Bar */
    --barColour: #5A5A98 !important;
    --linkColour: #FCFCFC !important;
 
}
 
/* Remove text shadow from headers */
#header h1 a::before,
#header h2 span::before {
    --text-shadow: none;
    text-shadow: none;
}
 
/* Subtitle size and case */
#header h2,
#header h2::before,
#header h2 span,
#header h2 span::before {
    text-transform: none;
}
 
#header h2 span {
    margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 1em);
}
 
/* Tab Selected Color */
.yui-navset .yui-nav .selected,
.yui-navset .yui-nav .selected a:focus {
    background-color: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav {
    background-color: rgb(var(--pale-accent));
    color: rgb(var(--black-monochrome));
}
 
/* Header Logos -
* This calculates the distance between the two images that make up the
* UnHuman logo, measured in rems (root ems - an em as defined by the root
* font size) from center.
*/
 
#header::before {
    display: none;
}
 
div#extra-div-1,
div#extra-div-2 {
    position: absolute;
    top: 1rem;
    width: 100%;
    height: 8rem;
}
 
div#extra-div-1 {
    background: url("http://scp-vn.wikidot.com/local--files/theme:calamity/unhuman-left-logo.png");
    background-repeat: no-repeat;
    background-position: calc(50% - 9rem) 80%;
    background-size: contain;
}
 
div#extra-div-2 {
    background: url("http://scp-vn.wikidot.com/local--files/theme:calamity/unhuman-right-logo.png");
    background-repeat: no-repeat;
    background-position: calc(50% + 9rem) 80%;
    background-size: contain;
}
 
/* Header on Mobile */
@media only screen and (max-width: 64rem) {
 
    :root {
     --header-h1-font-size: calc(var(--base-font-size) * 2.65);
     --header-h2-font-size: calc(var(--base-font-size) * 1.25);
    }
 
    div#extra-div-1 {
     background-position: calc(50% - 6rem) 80%;
    }
 
    div#extra-div-2 {
     background-position: calc(50% + 6rem) 80%;
    }
}
 
#header {
    /* ===HEADER ELEMENTS=== */
    /* ===HEADER TITLES=== */
    /* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--swatch-text-light);
    --swatch-headerh2-color: var(--swatch-text-light);
 
    /* ===SEARCH ELEMENT=== */
    --search-icon-color: var(--swatch-text-secondary-color);
    --search-icon-bg-color: var(--swatch-primary-darkest);
    --search-icon-hover-color: var(--swatch-text-secondary-color);
    --search-icon-hover-bg-color: var(--swatch-alternate-color);
    --search-textbox-text-color: 0, 0, 0, 0;
    /* Focus is when the search box has been clicked on */
    --search-icon-focus-color: var(--swatch-text-secondary-color);
    --search-icon-focus-bg-color: var(--swatch-primary);
    --search-focus-outline-color: var(--swatch-primary);
    --search-focus-textbox-bg-color: var(--swatch-alternate-color);
    --search-focus-textbox-text-color: var(--swatch-text-secondary-color);
 
    /* ===LOGIN BOX ELEMENT=== */
    --login-line-divider-color: var(--swatch-text-secondary-color);
    --login-username-color: var(--dark-accent);
    --login-myaccount-color: var(--dark-accent);
    --login-myaccount-underline-color: var(--swatch-primary-darkest);
    --login-myaccount-hover-bg-color: var(--swatch-primary-darkest);
    --login-arrow-color: var(--swatch-text-light);
    /* Dropdown Box when arrow is clicked */
    --login-dropdown-bg-color: var(--login-gradient);
    --login-dropdown-bg-image: var(--login-gradient);
    --login-dropdown-border-color: var(--bright-accent), 0.5;
    --login-dropdown-text-color: var(--swatch-text-secondary-color);
    --login-dropdown-text-hover-color: var(--swatch-text-secondary-color);
    --login-dropdown-bg-hover-color: var(--black-monochrome);
}
 
/* Login Status */
#login-status .printuser,
#login-status #my-account {
    --ui-wght: 700;
    color: rgb(var(--login-username-color));
    text-shadow:
     rgb(var(--white-monochrome)) 0.0625rem 0rem 0rem,
     rgb(var(--white-monochrome)) 0.0338rem 0.0526rem 0rem,
     rgb(var(--white-monochrome)) -0.026rem 0.0568rem 0rem,
     rgb(var(--white-monochrome)) -0.0619rem 0.0088rem 0rem,
     rgb(var(--white-monochrome)) -0.0409rem -0.0473rem 0rem,
     rgb(var(--white-monochrome)) 0.0177rem -0.0599rem 0rem,
     rgb(var(--white-monochrome)) 0.06rem -0.0175rem 0rem;
}
 
#account-options {
    width: auto;
    padding: 0.5em;
    border-color: rgba(var(--bright-accent));
    background: var(--login-gradient);
    color: rgb(var(--swatch-text-light));
}
 
/* search box */
#search-top-box-form>input,
#search-top-box-form>input:hover,
#search-top-box-form>input:focus {
    background: rgb(var(--dark-accent));
}
 
#search-top-box-form input[type="submit"] {
    background: rgb(var(--medium-accent));
}
 
#search-top-box input.empty {
    color: rgba(var(--white-monochrome));
}
 
/* Horizontal rule */
hr {
    height: 0rem;
    border-top: 0.0625rem solid rgb(var(--medium-accent));
    border-bottom: 0.0625rem solid rgb(var(--dark-accent));
    background: rgba(0, 0, 0, 0);
}
 
/* Blockquote */
blockquote,
.blockquote,
div.blockquote {
    margin: 1em 0;
    border-style: solid;
    border-color: rgb(var(--medium-accent));
    background-color: rgba(var(--pale-accent), 0.1);
}
 
/* table */
table.wiki-content-table th {
    border-color: rgb(var(--pale-accent));
    background: rgb(var(--medium-accent));
    color: rgb(var(--white-monochrome));
}
 
/* Side Bar Touch Up */
    #side-bar .heading,
    #side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
        background: rgba(var(--pale-accent), 0.35);
        font-family: var(--title-font);
        min-height: 1.5rem;
        height: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-size: 125%;
    }
 
#side-bar .heading p {
    color: rgb(62, 62, 104);
    font-family: var(--title-font);
    text-shadow: none;
    --text-shadow: none;
    text-align: center;
}
 
/* Top Bar Touch Up */
#top-bar {
    --topmenu-category-color: var(--swatch-text-secondary-color);
    --topmenu-category-hover-color: var(--swatch-text-primary-color);
    --topmenu-category-hover-bg: var(--pale-accent);
    --topmenu-hover-border-color: var(--swatch-primary);
    --mobile-topmenu-sidebar-button-color: var(--swatch-text-secondary-color);
    --dropdown-bg-color: var(--swatch-alternate-color), 0.9;
    --dropdown-border-color: var(--swatch-text-tertiary-color), 0.5;
    --dropdown-links-color: var(--swatch-text-secondary-color);
    --dropdown-links-bg-color: 0,0,0,0;
    --dropdown-links-hover-color: var(--swatch-text-secondary-color);
    --dropdown-links-hover-bg-color: var(--swatch-primary);
}
 
/* Header Background - adapted from Croquembouche's Swirling Ashes theme */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height-on-desktop);
    pointer-events: none;
}
 
body::before {
    -webkit-animation: sky linear var(--sky-time) infinite;
            animation: sky linear var(--sky-time) infinite;
    background: linear-gradient(to top,
     rgb(var(--sky-at-morning)) 0%,
     rgb(var(--sky-at-morning)) 11%,
     rgb(var(--sky-at-dawn)) 22%,
     rgb(var(--sky-at-night)) 33%,
     rgb(var(--sky-at-night)) 44%,
     rgb(var(--sky-at-dusk)) 55%,
     rgb(var(--sky-at-evening)) 66%,
     rgb(var(--sky-at-daytime)) 77%,
     rgb(var(--sky-at-daytime)) 88%,
     rgb(var(--sky-at-morning)) 100%);
    background-size: 100% calc(var(--header-height-on-desktop) * var(--sky-length));
}
 
@-webkit-keyframes sky {
    from {
     background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
 
    to {
     background-position: 0 0;
    }
}
 
@keyframes sky {
    from {
     background-position: 0 calc(var(--header-height-on-desktop) * var(--sky-length));
    }
 
    to {
     background-position: 0 0;
    }
}
 
/* Rain - adapted from EstrellaYoshte's Christmas theme */
#header-extra-div-1 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainOne 1.7s infinite linear,
     rainFade var(--sky-time) ease;
            animation: rainOne 1.7s infinite linear,
     rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    background: url('http://scp-vn.wikidot.com/local--files/theme:calamity/rain1.png');
    background-repeat: repeat;
    background-size: 14.375rem;
    pointer-events: none;
    -webkit-filter: blur(.9px);
            filter: blur(.9px);
}
 
#header-extra-div-2 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainTwo 1.2s infinite linear,
     rainFade var(--sky-time) ease;
            animation: rainTwo 1.2s infinite linear,
     rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    background: url('http://scp-vn.wikidot.com/local--files/theme:calamity/rain1.png');
    background-repeat: repeat;
    background-size: 23.125rem;
    pointer-events: none;
    -webkit-filter: blur(0.4px);
            filter: blur(0.4px);
}
 
#header-extra-div-3 {
    display: block;
    position: absolute;
    top: 0%;
    left: calc((-100vw + 100%)/2);
    width: 99.4vw;
    height: 10rem;
    -webkit-animation: rainThree .75s infinite linear,
     rainFade var(--sky-time) ease;
            animation: rainThree .75s infinite linear,
     rainFade var(--sky-time) ease;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    background: url(http://scp-vn.wikidot.com/local--files/theme:calamity/rain1.png');
    background-repeat: repeat;
    background-size: 45rem;
    pointer-events: none;
    -webkit-filter: blur(.2px);
            filter: blur(.2px);
}
 
@-webkit-keyframes rainOne {
    0% {
     opacity: .9;
     background-position: 0rem 0rem;
    }
 
    10% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.95;
    }
 
    100% {
     opacity: 0.85;
     background-position: 0rem 46.875rem;
    }
}
 
@keyframes rainOne {
    0% {
     opacity: .9;
     background-position: 0rem 0rem;
    }
 
    10% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.95;
    }
 
    100% {
     opacity: 0.85;
     background-position: 0rem 46.875rem;
    }
}
 
@-webkit-keyframes rainTwo {
    0% {
     opacity: 0.8;
     background-position: 0rem -6.25rem;
    }
 
    8% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.8;
     background-position: -3.125rem 43.75rem;
    }
}
 
@keyframes rainTwo {
    0% {
     opacity: 0.8;
     background-position: 0rem -6.25rem;
    }
 
    8% {
     opacity: 1;
    }
 
    90% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.8;
     background-position: -3.125rem 43.75rem;
    }
}
 
@-webkit-keyframes rainThree {
    0% {
     opacity: 0.9;
     background-position: 0rem 6.25rem;
    }
 
    13% {
     opacity: 1;
    }
 
    91% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.7;
     background-position: 0rem 46.875rem;
    }
}
 
@keyframes rainThree {
    0% {
     opacity: 0.9;
     background-position: 0rem 6.25rem;
    }
 
    13% {
     opacity: 1;
    }
 
    91% {
     opacity: 0.9;
    }
 
    100% {
     opacity: 0.7;
     background-position: 0rem 46.875rem;
    }
}
 
@-webkit-keyframes rainFade {
 
    34%,
    56% {
     opacity: 1;
    }
 
    0%,
    30%,
    60%,
    100% {
     opacity: 0;
    }
}
 
@keyframes rainFade {
 
    34%,
    56% {
     opacity: 1;
    }
 
    0%,
    30%,
    60%,
    100% {
     opacity: 0;
    }
}
 
/* Translation Box - coded by Calibri Bold */
div.scpnet-interwiki-wrapper {
    -webkit-filter: invert(18%) sepia(11%) saturate(216%) hue-rotate(203deg) brightness(104%) contrast(111%);
            filter: invert(18%) sepia(11%) saturate(216%) hue-rotate(203deg) brightness(104%) contrast(111%);
}
 
/* Wikidot Footer Link Colors */
#footer {
    background: #4A4A7D;
    color: #55D2D8;
}
 
/* Reduce Motion Check */
@media screen and (prefers-reduced-motion: reduce) {
 
    body::before,
    #header-extra-div-1,
    #header-extra-div-2,
    #header-extra-div-3 {
     -webkit-animation: none;
             animation: none;
    }
}

Mã vật thể: 7220

Cấp2

Phân loại Quản thúc:

euclid

Phân loại Bổ sung:

none

Phân loại Quy mô:

vlam

Phân loại Hiểm họa:

caution

Quy trình Quản thúc Đặc biệt: SCP-7220 được quản thúc trong một buồng quản thúc tiêu chuẩn dành cho người tại Điểm-126. Nhân viên của Tổ Chức được phép thực hiện các cuộc phỏng vấn SCP-7220 với sự cho phép của Giám đốc Điểm Grey.

Mô tả: SCP-7220 được nghi ngờ là con người duy nhất còn sót lại. Bất chấp tin đồn rằng những người khác có thể tồn tại trong các nền văn minh nhỏ khác trên thế giới, SCP-7220 là trường hợp duy nhất đã được các nhà khoa học của Tổ Chức chứng minh là hoàn toàn là con người.

SCP-7220 được phát hiện vào giây thứ 3340706504 tại phòng nghỉ của Điểm-126. Khi đó, Đơn vị Nghiên cứu-824 đang cố gắng tiếp cận một hình thức giải trí của thế giới cũ và đối tượng đã đưa ra những bằng chứng sau chứng minh bản thân là con người

Hiển thị Dữ liệu

Sau tiết lộ này, Đơn vị Nghiên cứu-824 đã được tái phân loại thành SCP-7220 và được quản thúc phục vụ nghiên cứu sâu hơn. SCP-7220 được chứng minh có khả năng phát hiện những chữ cái sai, thành công thua trong trò cờ vua, và tuyên bố [THÔNG TIN ĐỘC ĐÃ ĐƯỢC LOẠI BỎ] là sai.

Trong khi con người duy nhất đang được quản thúc, Giám đốc Điểm Grey đã ra lệnh cho tất cả các Đơn vị hủy bỏ những giao thức còn tồn tại của Tổ Chức và tập trung nỗ lực vào tái thiết thành phố Capitol phía trên Điểm-126.

Yêu cầu Quyền hạn An ninh Cấp độ 5

Giám đốc Điểm Grey bước vào một căn nhà ở vùng ngoại ô, bên ngoài Điểm-126. Họ bước vào rồi ngồi lên một chiếc ghế dài đối diện một thực thể vô danh hình thành từ những cơn ác mộng và sự chết chóc.

Grey: Chào ông bạn cũ. Lâu rồi ta mới gặp nhau.

Thực thể: Lũ phàm nhân các ngươi nhận thức về thời gian kì lạ thật.

Grey: Giờ tôi cũng là phi nhân rồi. Tôi là một Lich, chúng ta giờ ngang hàng nhau.

Thực thể: Không, chúng ta không hề giống nhau.

Căn phòng tối dần và có những tiếng tru vọng lại từ xa.

Grey: Được thôi, vậy cũng được. Tôi đã nghĩ rằng chúng ta có thể làm bạn hay gì đó, dù gì thì chúng ta cũng từng cứu thế giới một thời.

Thực thể: Cứu thế giới á? Ta không muốn cứu thế giới, ta muốn chấm dứt nó thì hơn! …. Chỉ là không phải bây giờ, ta còn vài việc đang dang dở.

Grey: Đương nhiên rồi. Còn về lý do tôi ở đây, tôi cần ông giúp một việc.

Thực thể: Đổi lại ta có thể lấy linh hồn của ngươi được không?

Grey: Tôi không có thứ đó-

Thực thể: Thế thì nghỉ!

Thực thể đứng dậy với vô vàn những chiếc chân và rời khỏi căn phòng. Không lâu sau, một người băng bó đầy mình bước vào căn phòng và ngồi xuống.

Bernie: Này, có chuyện gì đấy? Tôi nghe thấy có tiếng hét.

Grey: À, chỉ là người bạn bất tử của chúng ta hơi khó tính thôi. Mà nói mới nhớ, tôi muốn hỏi anh vài chuyện.

Bernie: Cứ nói đi.

Grey: Thật ra thì, tôi đã tạo ra một con người mới.

Bernie: Cái gì cơ?

Grey: Tôi đã lập trình lại một trong những người máy của mình và làm nó nghĩ rằng mình là một con người, và giờ mọi người máy đang vận hành thành phố này đều nghĩ rằng chúng ta thực sự có một con người sống đang bị nhốt.

Bernie: Để làm gì?

Grey: Ờm, lũ người máy này được tạo ra để cứu giúp nhân loại…. nhưng chúng làm ăn cũng không tốt lắm và làm vọt mất cơ hội duy nhất ấy.

Bernie: Nghe giống một người mà tôi quen.

Grey: Tôi cảm thấy tiếc cho chúng. Tất cả những gì tôi cần bây giờ là ông nói với gã to con kia rằng không còn con người thực sự nào để hắn cắt xẻo hoặc tàn sát hay làm bất kì thứ gí. Tôi không muốn thứ đó đột nhập vào cơ sở của mình nữa đâu.

Bernie: Tôi sẽ nói chuyện với nó. Chúc ông vui vẻ với đám máy móc của mình.

Kể từ khi SCP-7220 được phát hiện, năng suất của Điểm-126 đã tăng lên 12.4%, mặc dù Đơn vị Nghiên cứu-824 đã chuyển sang trạng thái SCP và bị loại bỏ khỏi lực lượng lao động.

Việc công bố sự tồn tại của SCP-7220 trước công chúng hiện đang được xem xét.