Local_Pyromancer #3

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

Item#: XXXX

Level2

Containment Class:

euclid

Secondary Class:

none

Disruption Class:

vlam

Risk Class:

notice

link to memo

---

Special Containment Procedures: SCP-XXXX is to be stored in a 75 by 75 centimetre sealed metal case only accessible to Level 3 personnel or higher. All personnel are not to make contact with SCP-XXXX unless they are equipped with the required resources. Personnel that are required to interact with SCP-XXXX for a test are to be a equipped with a hazmat suit with specific gloves made of latex. All tests with SCP-XXXX require permission from a Former Council Member or 2 Administration Staff Members.

---

Description: SCP-XXXX is 44 by 24 centimetre brown, blackened, labelled Victorian bitter Beer other known as VB. SCP-XXXX appears to be empty with no past liquid behaviour. SCP-XXXX is lethal to the skin of any biological species. Interactions involving SCP-XXXX and the subject causes there skin to burn into the subjects epidermis, and there dermis will slowly decrease and fall through the dermis going by the layer's of skin. The only point you can touch SCP-XXXX is the labelled sticker, Which if attempted to scratch or peel off will lead into a seizure. If 0.5 centimetres of the scratch or peel of the sticker is removed, all peeling's or scratch's will regenerate there wounds to the original state.

---

Discovery: SCP-XXXX Was found at a nearby park located in Georgia by Mobile Task Force Unit Beta-7 finished a mission involving another SCP . Beta-7 witnessed SCP-XXXX traits when a 43 year old man had thrown SCP-XXXX in a bush to the left of them. The mans skin started to burn until they die in front of a Beta-7 Operative, The operative requested a retrieval team to recover SCP-XXXX. All citizens within the area were administered Class-C Amnestics.