sanbox of hollfellswap

---

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

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
    @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;
        }
 
        #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.25rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            -webkit-transition:
                opacity var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%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(--swatch-menubg-color))) !important;
            -webkit-border-radius: var(--toggle-roundness, 50%);
            -moz-border-radius: var(--toggle-roundness, 50%);
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--swatch-border-color))) 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: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
            left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            -webkit-transition:
                left var(--sidebar-transition-timing);
            -o-transition:
                left var(--sidebar-transition-timing);
            -moz-transition:
                left var(--sidebar-transition-timing);
            transition:
                left var(--sidebar-transition-timing);
            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);
            -webkit-border-radius: 0;
            -moz-border-radius: 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;
            -webkit-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            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: -webkit-calc(100% - var(--sidebar-width-on-desktop));
            width: -moz-calc(100% - var(--sidebar-width-on-desktop));
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -moz-box-orient: horizontal;
            -moz-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            width: -webkit-calc(100vw - (100vw - 100%));
            width: -moz-calc(100vw - (100vw - 100%));
            width: calc(100vw - (100vw - 100%));
            min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            -webkit-box-flex: 2;
            -webkit-flex-grow: 2;
            -moz-box-flex: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: 45.8rem;
            max-width: 45.8rem;
            margin: 0 auto;
        }
 
        @media not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    -webkit-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -o-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -moz-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    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 var(--sidebar-transition-timing);
                    transition: opacity var(--sidebar-transition-timing);
                }
 
                #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: -webkit-calc(100% - var(--sidebar-width-on-desktop));
                    width: -moz-calc(100% - var(--sidebar-width-on-desktop));
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

+ Show

:root {
    --header-title: "SCP FOUNDATION";
 
    --dark-accent: 20, 22, 24;
    --bright-accent: 228, 228, 228;
    --light-gray-monochrome: 84, 84, 84;
    --dark-gray-monochrome: 48,48,52;
    --black-monochrome: 20, 22, 24;
    --medium-accent: var(--bright-accent);
    --tab-border-color: var(--dark-accent);
    --rating-module-button-color: var(--bright-accent);
    --rating-module-button-credit-color: var(--bright-accent);
    --swatch-background: var(--dark-accent);
    /* Background and Header Colors */
    --background-color: var(--dark-accent);
    /* Primary Text Colors */
    --swatch-text-light: var(--bright-accent);
    --swatch-text-general: var(--bright-accent);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--dark-accent);
    /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */
    --swatch-secondary-color: var(--swatch-menubg-dark-color);
    --swatch-tertiary-color: var(--swatch-menubg-medium-dark-color);
    /* Primary Header Colors */
    --swatch-topmenu-border-color: var(--swatch-menubg-black-color);
    --swatch-topmenu-bg-color: var(--swatch-menubg-extra-dark-color);
 
    --rating-module-text-color: var(--bright-accent);
    --rating-module-button-cancel-color: var(--gray-monochrome);;
 
    --gradient-header: linear-gradient(
        to bottom,
        rgb(var(--header-gradient-color-bottom)) 0%,
        rgb(var(--header-gradient-color-middle)) 90%,
        rgb(var(--header-gradient-color-top)) 100%
    );
 
    --diagonal-stripes: repeating-linear-gradient(
        45deg,
        hsla(0, 0%, 100%, 0),
        hsla(0, 0%, 100%, 0) 0.25vh,
        rgba(var(--swatch-menubg-extra-dark-color), 0.1) 0.35vh,
        rgba(var(--swatch-menubg-extra-dark-color), 0.2) 0.5vh
    );
 
    --toggle-button-bg: rgb(var(--dark-accent));
    --toggle-border-color: rgb(var(--dark-gray-monochrome));
    --toggle-icon-color: rgb(var(--bright-accent));
}
 
.modalbox {
    background: rgb(var(--dark-accent))!important;
    box-shadow: none!important;
    border-color: transparent!important;
    border-radius: 0px!important;
    padding: 4px;
    pointer-events: auto !important;
}
 
#skrollr-body > a {
    display: none;
}
 
body {
    color: rgb(var(--bright-accent));
}
 
#search-top-box-form input[type=submit]:focus, #search-top-box-form input[type=submit]:hover {
    color: rgb(var(--dark-gray-monochrome));
}
 
a, a:visited {
    padding: 0 2px;
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
a:hover {
  text-decoration: none;
  background-color: transparent;
  color: var(--bright-accent);
}
 
a.close-menu {
    background-color: transparent;
}
 
a.newpage {
    color: rgb(var(--dark-accent));
    background-color: rgb(var(--bright-accent));
}
 
a.newpage:hover {
  text-decoration: none;
  background-color: transparent;
  color: var(--bright-accent);
}
 
::selection {
    background: rgb(148, 148, 148);
}
 
.creditButton p a {
    background-color: rgb(var(--black-accent));
}
 
#page-content .rate-box-with-credit-button {
    display: inline-flex;
    margin-bottom: .75rem;
    border: .0625rem solid rgba(12,12,12,.25);
    border: .0625rem solid rgba(var(--gray-monochrome));
    border-radius: 0;
    background: rgb(var(--dark-accent));
    background-color: #fcfcfc;
    background-color: rgb(var(--dark-accent));
    padding: 0 .125rem;
    height: var(--rating-module-height);
    overflow: hidden;
}
 
#top-bar div.mobile-top-bar>ul>li>ul>li:hover>a, #top-bar div.top-bar>ul>li>ul>li:hover>a {
    text-decoration: none;
    color: rgb(var(--dark-accent));
}
 
#side-bar .heading 
    background: rgb(var(--dark-gray-monochrome));
}
 
#side-bar .side-block {
    background-color: rgb(var(--dark-accent));
}
 
#side-bar .side-block.resources {
    background: rgb(var(--dark-accent))!important;
}
 
#side-bar .side-block.media {
    background-color: rgba(var(--dark-gray-monochrome))!important;
}
 
#side-bar div.menu-item>a {
    color: rgb(var(--bright-accent));
}
 
#side-bar div.menu-item>a:visited {
    color: rgb(var(--bright-accent));
}
 
.side-block.media a { 
    background: transparent 
}
 
#side-bar .collapsible-block .collapsible-block-folded, #side-bar .heading {
    background: rgb(var(--dark-gray-monochrome));
}
 
#search-top-box-input {
    background-color: rgb(var(--dark-gray-monochrome));
}
 
#account-options {
  background: var(--dark-accent);
  color: var(--bright-accent);
   border-color: var(--bright-accent);
}
 
#login-status {
    color: rgba(var(--swatch-menutxt-light-color),0.5);
}
 
#login-status ul a {
  color: rgb(var(--bright-accent));
}
 
span.printuser {
    color: rgb(var(--swatch-menutxt-light-color));
}
 
#login-status .printuser {
    background-color: transparent;
    color: rgb(var(--bright-accent));
}
 
.page-rate-widget-box {
    background: rgb(var(--dark-accent));
    border: 0.0625rem solid rgba(var(--swatch-menubg-dark-color));
}
 
#top-bar div.mobile-top-bar {
    background: rgb(var(--dark-accent));
}
 
#top-bar div.top-bar > ul > li:hover {
    background: rgb(var(--swatch-menubg-black-color));
}
 
#top-bar div.mobile-top-bar > ul > li.sfhover > ul, 
#top-bar div.mobile-top-bar > ul > li:hover > ul, 
#top-bar div.top-bar > ul > li.sfhover > ul, 
#top-bar div.top-bar > ul > li:hover > ul {
    color: rgb(var(--dark-accent));
}
 
blockquote, div.blockquote {
    border: none;
    background-color: rgb(var(--dark-gray-monochrome));
     --swatch-border-color: var(--gray-monochrome);
    box-shadow: .0225rem .0835rem .0725rem .0925rem rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav li, 
 .yui-navset .yui-navset-top .yui-nav li { 
    box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    --box-shadow: none;
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav hover a {
     border-color: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav .selected a {
    color: rgb(var(--dark-accent))!important;
   border-color: rgb(var(--bright-accent));
}
 
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    color: rgb(var(--bright-accent));
    background: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
     background: rgb(var(--dark-accent));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--swatch-menubg-dark-color));
    color: rgb(var(--dark-accent));
}
 
.yui-navset-bottom .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset .yui-nav li a {
    color: rgb(var(--bright-accent));
    background: rgb(var(--dark-gray-monochrome));
}
table.wiki-content-table th, table.wiki-content-table tr {
    border: .0625rem solid rgba(var(--bright-accent))!important;
}
 
table.wiki-content-table th {
    background: #e3e3e3;
    border: 1px solid #e3e3e3;
    color: #141618;
}
 
table.wiki-content-table tr {
    border: 1px solid #e3e3e3;
    color: #e3e3e3;
}
 
textarea,
input.text,
input.checkbox,
div.note,
#lock-info {
    border: 0.0625rem solid rgba(var(--swatch-menubg-light-color),0.25);
    background-color: rgb(var(--swatch-menubg-extra-dark-color));
    color: rgb(var(--swatch-text-light));
}
 
.code pre span[class*="hl-"] {
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg);
}
 
.owindow .modal-body img {
    background-color: transparent !important;
}
 
.hovertip {
    border: .0625rem solid rgb(var(--dark-gray-monochrome));
    color: rgb(var(--swatch-text-light));
}
 
.hovertip .content {
    padding: 0;
}
 
#footer {
    color: rgb(var(--bright-accent));
}
 
.scpnet-interwiki-wrapper {
    -webkit-filter: initial;
    filter: initial;
    margin-top: 1em;
}
 
.scpnet-interwiki-frame {
    -webkit-filter: invert(0.92) grayscale(1) contrast(1);
    filter: invert(0.92) grayscale(1) contrast(1);
}
 
.scp-image-block {
    border: none;
    --box-shadow: none;
    padding: 0;
    min-width: 100%;
    display: inherit;
}
 
.scp-image-block a {
    background-color: transparent;
}
 
.footnote {
    background-color: rgb(var(--dark-gray-monochrome));
    padding: .625em;
}
 
.footnotes-footer {
    border-left: none;
    background-color: rgba(var(--dark-gray-monochrome));
}
 
.licensebox .collapsible-block-link {
    background: none;
}
 
.printuser img.small {
    vertical-align: -0.4em;
    width: 20px;
    height: 20px;
}
 
#who-rated-page-area .printuser a {
    font-size: 100%;
}
 
#license-area {
    color: rgb(var(--light-gray-monochrome));
}
 
#search-top-box input.empty {
    color: rgba(var(--bright-accent));
}
 
.danger-diamond > .arrows,
.anom-bar > .bottom-box::before {
    background-color: rgb(var(--bright-accent));
}
.anom-bar > .bottom-box {
    box-shadow: 0 -0.5rem 0 0 rgb(var(--bright-accent));
}
 
.bottom-box > .diamond-part {
    box-shadow: -0.5rem 0 0 0 rgb(var(--bright-accent));
}
 
.acs-hybrid-text-bar > .acs-clear > .clearance-level-text::before {
    color: rgba(var(--bright-accent),1);
}
 
.acs-hybrid-text-bar > .acs-disrupt .disruption-class-number::before {
        color: rgba(var(--bright-accent),1);
}
 
.acs-hybrid-text-bar > .acs-risk .risk-class-number::before {
    color: rgba(var(--bright-accent, 12, 12, 12),1);
}
 
.contain-class .class-text::before {
    color: rgb(228 228 228);
}
 
.anom-bar-container.esoteric .text-part > .main-class > .second-class > .class-text::after {
    color: #e4e4e4;
}
 
.info-container .collapsible-block-folded, .info-container .collapsible-block-unfolded-link { 
   background: rgb(var(--bright-accent));
} 
 
.info-container .collapsible-block-folded .collapsible-block-link, .info-container .collapsible-block-link {
   background: rgb(var(--dark-accent));
}
 
.acs-hybrid-text-bar > a {
        background-color: transparent
}
 
.acs-hybrid-text-bar > .acs-clear > .clearance-level-text::after {
    padding-top: 0.1rem;
    color: rgba(var(--bright-accent),1);
}
 
.acs-hybrid-text-bar > .acs-risk .risk-class-number::after {
color: rgba(var(--bright-accent));
}
 
.acs-hybrid-text-bar > .acs-disrupt .disruption-class-number::after {
    color: rgba(var(--bright-accent),1);
}
 
.danger-diamond a, .danger-diamond a:hover {
    background-color: transparent;
    color: rgba(0,0,0,0);
}
 
.fnnum {
    background-color: rgb(var(--bright-accent));
}
 
.fnnum::after {
    color: #141618;
}
 
.fnnum:hover {
    background-color: transparent;
}
 
.fncon {
    background: rgb(var(--dark-accent));
    border: 2px solid rgb(var(--bright-accent));
}
 
.fncon::before {
    background-color: #141618;
    color: #e4e4e4;
    border: 2px solid rgb(var(--bright-accent));
}
 
.printuser {
    background-color: rgb(var(--bright-accent));
    color: rgb(var(--dark-accent));
}
 
.printuser a {
    margin-right: -1px;
    font-size: 14px;
    background-color: none;
}
 
.printuser img.small {
    vertical-align: -0.4em;
    width: 19px;
    height: 18.5px;
}
 
.printuser:hover {
    background-color: transparent;
}
 
.page-tags a {
    background-color: transparent;
    color: rgb(var(--bright-accent));
}
 
@media only screen and (max-width: 768px) {
#search-top-box form[id=search-top-box-form]:not(:focus-within) input[type=text] {
    background-color: rgb(var(--dark-accent));
}
}

Item#: XXXX

Level2

Containment Class:

euclid

Secondary Class:

none

Disruption Class:

vlam

Risk Class:

warning

link to memo

Special Containment Procedures: Spare instances that SCP-XXXX does not eat of SCP-XXXX-B are to be kept in a standard object containment chamber. SCP-XXXX is to be kept in a standard humanoid chamber with a built-in kitchen. SCP-XXXX is to be provided with bread-making materials every day to make SCP-XXXX-B.

Description: SCP-XXXX Is a 43-year-old human male, 5'6. The object often bakes bread whenever possible. These baked goods will henceforth be known as SCP-XXXX-B. When consumed by a subject, XXXX-B when consumed by a subject will induce nausea and lethargy. However, regardless of the ill-effects post-consumption: As of 06/05/2016, SCP-XXXX has made bread that do not include these anomalous effects. SCP-XXXX-B's new variant now causes healing effects to any wounds and euphoria, though still after consuming SCP-XXXX-B will compel subject to ingest more. These compulsion effects subside in subjects in 5 hours. and the ill-effects cease following REM sleep. SCP-XXXX has a diet consisting of only SCP-XXXX-B. It does not receive any of the ill-effects from consuming SCP-XXXX-B. SCP-XXXX has expressed immense satisfaction with SCP-XXXX-B calling it "The best bread in the world" on numerous occasions. Subjects near SCP-XXXX-B have reported smelling the smell they love most when near SCP-XXXX-B. SCP-XXXX-B's anomalous properties also manifest by giving SCP-XXXX enhanced vision, and hearing above that of non-anomalous humanoids when consumed. Though how it is immune to the effects is still a mystery. Some D-Class personnel, after eating the improved version of SCP-XXXX-B say ''its the best bread in the world'' and their body forces themselves to eat more and more.

Addendum 1:
< SCP-XXXX Interview Attempt #1

Begin log, 3:02PM, 25/02/2016

Interviewer: Agent Kowalski
Interviewed: SCP-XXXX.
Agent Kowalski: SCP-XXXX, Can you hear me?
SCP-XXXX: Loud and clear, Mister.
Agent Kowalski: Alright, SCP-XXXX, How are you not affected by the anomalous effects of your own bread?
-SCP-XXXX sighs heavily.-
SCP-XXXX: How many times do I tell you foundation idiots that its normal bread, not anomalous bread or whatever stuff you call it?
Agent Kowalski: Alright, I will ask that question again when you are willing to comply. What is the ingredient that you use different from other bread?
SCP-XXXX: Nothin' just the same stuff like homemade bread, its better than my bread.
Agent Kowalski: That brings us to our next question, Why do you only eat your own bread?
SCP-XXXX: Better at being horrible.
[SCP-XXXX laughs]
Agent Kowalski: SCP-XXXX, I will return tommorow.
SCP-XXXX: Okay freakshow.

End log: 3:05PM, 25/02/2016

Addendum 2:

Interview Attempt #2

Begin Log: 4:17pm, 26/02/2016

Agent Kowalski: Alright, I'm back, you will answer my questions now.
SCP-XXXX: What if I don't want to?
Agent Kowalski: You will.
SCP-XXXX: I don't think so.
Agent Kowalski: Alright, how are you not affected by the anomalous effects of your bread, and why does it make people tired and nauseous?
SCP-XXXX: IT DOES NOT
-Agent Kowalski talks to Researcher Gongalli, forgetting the microphone is still on.
Agent Kowalski: How do you put up with this ignorant idiot, and how do you manage to research and conduct tests on him?
Researcher Gongalli: You should turn that microphone off, Agent Kowalski.
Agent Kowalski: Oh.
SCP-XXXX: don't call me an idiot you little
Agent Kowalski: End the interview, quickly.

End Log: 3:09PM, 26/02/2016.

Addendum 3:

Interview Attempt #3.

Being Log: 12:53PM 28/02/2016

SCP-XXXX: bread bread bread bread bread bread bread
Researcher Gongalli: SCP-XXXX?
SCP-XXXX turns his head slowly to face the glass.
Researcher Gongalli: SCP-XXXX, Are you ready to comply, Agent Kowalski told me you were not answering his questions.
SCP-XXXX: Screw him. He insulted my baking skills.
Researcher Gongalli: He called it anomalous.
SCP-XXXX: It doesn't matter, you're pretty.
Researcher Gongalli: This is one way glass, you can't see me.
SCP-XXXX: But I can, that idiot from earlier and those two black and white guys with helmets on.
Researcher Gongalli: Wait what.. Alright, how are you not affected by your bread?
SCP-XXXX: I don't know, honestly.
Researcher Gongalli: Why do you only eat your own bread?
SCP-XXXX: Because its good.
Researcher Gongalli: Alright, I have enough info for today, Goodbye, SCP-XXXX.

End Log: 12:55PM 28/02/2016

Interview #4 with SCP-XXXX.

//Begin Log: 1:01PM, 04/05/2016

Researcher Gongalli: SCP-XXXX, I have to break this to you, but please listen.
SCP-XXXX: What?
Researcher Gongalli: What Agent Kowalski said was true. We need the truth, have you put anything bad into your bread?
SCP-XXXX: Well I thought I put a bit too much sugar into it, but apart from that, no. I promise.
Researcher Gongalli: Try making the bread without that extra dose of sugar.
SCP-XXXX: Alright.
[SCP-XXXX makes SCP-XXXX-B, not putting in as much sugar as usual. It was then transported to an SCP-XXXX-B Chamber.]

• SCP-XXXX-B New variation result
  • SCP-XXXX's new way of making SCP-XXXX-B has been a huge success. SCP-XXXX-B no longer contains its nausea and lethargy effects. D-Class subjects also claim the bread tastes very good. The anomalous properties of wanting more are still effective in SCP-XXXX-B, so research must continue as normal. SCP-XXXX is no longer hostile and seems much more happy. SCP-XXXX has been granted free roam through the facility on weekends with the exception of restricted areas and SCP zones.

SCP-XXXX and Agent Kowalski recorded conversation on 08/05/2016

Agent Kowalski: SCP-XXXX, Can you hear me?
SCP-XXXX: Oh, it's you. I wanted to just say sorry for being kind of hostile towards you. Thought you were insulting my skill of baking.
Agent Kowalski: Yeah, I kinda wanted to say sorry as well.
SCP-XXXX: I forgive you.
Agent Kowalski: So, we on good terms now?
SCP-XXXX: Yup.

• SCP-XXXX Observation #1
  • SCP-XXXX makes SCP-XXXX-B instances for around 2 hours every day and then eats it as regular meals. He sleeps for around 11 hours each day.
• SCP-XXXX Observation #2
  • SCP-XXXX seems much more satisfied after perfecting SCP-XXXX-B and is no longer hostile towards any foundation personnel.