Vivarium's Authorpage

---

+ Show theme code

:root {
    /* New Vars */
    --swatch-menubg-extra-dark-color: 30, 30, 32;
 
    /* Old Vars */    
    --black-monochrome: 20, 22, 24;
    --light-pale-gray-monochrome: 250, 250, 250;
    /* Primary Theme Colors */
    --swatch-background: var(--swatch-menubg-black-color);
    /* Background and Header Colors */
    --background-gradient-color: 10, 10, 10;
    --header-gradient-color-bottom: var(--medium-accent);
    --header-gradient-color-middle: var(--swatch-menubg-black-color);
    --header-gradient-color-top: var(--swatch-menubg-black-color);
    /* Primary Text Colors */
    --swatch-text-light: var(--light-pale-gray-monochrome);
    --swatch-text-general: var(--swatch-text-light);
    /* Primary Menu Colors */
    --swatch-menubg-color: var(--swatch-menubg-black-color);
    /* 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(--swatch-text-general);
    --rating-module-button-color: var(--swatch-text-general);
    --rating-module-button-cancel-color: 100, 100, 100;
 
    --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
    );
}
 
::selection {
    background: rgb(var(--swatch-primary-darkest));
}
 
#search-top-box-input {
    background-color: rgb(var(--swatch-menubg-extra-dark-color));
}
 
#account-options {
  background: var(--gradient-header);
}
 
#login-status {
    color: rgba(var(--swatch-menutxt-light-color),0.5);
}
 
#login-status ul a {
  color: rgb(var(--swatch-menutxt-light-color));
}
 
span.printuser {
    color: rgb(var(--swatch-menutxt-light-color));
}
 
#login-status a#my-account {
    padding: 0.15em;
    margin: -0.15em;
    color: rgb(var(--swatch-menutxt-light-color));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
    -moz-box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
    box-shadow: inset 0 -0.125rem 0 0rem rgba(var(--swatch-primary), 1);
    -webkit-transition:
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -o-transition:
        box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    -moz-transition:
        box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -moz-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
        box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
    transition:
        box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        color 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -webkit-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
        -moz-box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
#login-status a#my-account:hover,
#login-status a#my-account:active  {
    padding: 0.3em 0.25em 0.2em 0.25em;
    margin: -0.25em;
    -webkit-box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1);
    -moz-box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1);
    box-shadow: inset 0 -1.5em 0 0 rgba(var(--swatch-primary), 1);
    text-decoration: none;
    color: rgb(var(--white-monochrome))
}
 
.page-rate-widget-box {
    background: -webkit-gradient(linear,
        left top, left bottom,
        from(rgba(var(--header-gradient-color-bottom),0.5)),
        color-stop(90%, rgba(var(--header-gradient-color-middle),0.15)),
        to(rgba(var(--header-gradient-color-top),0.15)));
    background: -webkit-linear-gradient(top,
        rgba(var(--header-gradient-color-bottom),0.5) 0%,
        rgba(var(--header-gradient-color-middle),0.15) 90%,
        rgba(var(--header-gradient-color-top),0.15) 100%);
    background: -moz-linear-gradient(top,
        rgba(var(--header-gradient-color-bottom),0.5) 0%,
        rgba(var(--header-gradient-color-middle),0.15) 90%,
        rgba(var(--header-gradient-color-top),0.15) 100%);
    background: -o-linear-gradient(top,
        rgba(var(--header-gradient-color-bottom),0.5) 0%,
        rgba(var(--header-gradient-color-middle),0.15) 90%,
        rgba(var(--header-gradient-color-top),0.15) 100%);
    background: linear-gradient(to bottom,
        rgba(var(--header-gradient-color-bottom),0.5) 0%,
        rgba(var(--header-gradient-color-middle),0.15) 90%,
        rgba(var(--header-gradient-color-top),0.15) 100%);
    border: 0.0625rem solid rgba(var(--swatch-menubg-medium-color), 0.25);
}
 
#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 {
    background: rgba(var(--swatch-menubg-black-color),0.85);
}
 
#top-bar div.mobile-top-bar > ul > li > ul > li > a, 
#top-bar div.top-bar > ul > li > ul > li > a {
    -webkit-box-shadow: inset 0 0 0 0.0625rem rgba(var(--swatch-menubg-medium-color), 0.15);
       -moz-box-shadow: inset 0 0 0 0.0625rem rgba(var(--swatch-menubg-medium-color), 0.15);
            box-shadow: inset 0 0 0 0.0625rem rgba(var(--swatch-menubg-medium-color), 0.15);
}
 
blockquote,
.blockquote,
.code {
    --swatch-border-color: var(--swatch-menubg-light-color);
    border-color: rgba(var(--swatch-border-color),0.25);
}
 
.yui-navset .yui-nav,
.yui-navset .yui-navset-top .yui-nav {
    --box-shadow: rgb(var(--swatch-primary-darkest));
    border-color: rgb(var(--swatch-primary-darkest));
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-navset-top .yui-nav li {
    --box-shadow: rgb(var(--swatch-primary-darkest));
}
 
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background-color: rgb(var(--swatch-menubg-extra-dark-color));
    color: rgb(var(--swatch-text-general));
}
 
.yui-navset .yui-nav .selected, 
.yui-navset .yui-navset-top .yui-nav .selected {
    background-color: rgb(var(--swatch-primary-darkest));
}
 
table.wiki-content-table th {
    background: rgb(var(--swatch-secondary-color));
}
 
table.wiki-content-table th,
table.wiki-content-table tr {
    border: 0.0625rem solid rgba(var(--swatch-menubg-medium-color), 0.25) !important;
}
 
table.wiki-content-table td {
    border: 0.0625rem solid rgba(var(--swatch-menubg-light-color), 0.25) !important;
}
 
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: 0.0625rem solid rgba(var(--swatch-menubg-light-color),0.25);
    background-color: rgb(var(--swatch-menubg-extra-dark-color)) !important;
    color: rgb(var(--swatch-text-light)) !important;
}
 
#footer {
    color: rgb(var(--swatch-text-general));
}
 
.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);
}

---

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

Info

---

Upvote Vivarium… please. <3

---

SCPs

SCP-5120 Fidelis Roma LINK

[+36]

"Long ago the city was attacked. She acted as a shield and allowed herself to be wounded to protect the people of Fidelis Roma. Many of our people perished, but we survived. Ever since she has given us the gift of isolation. We are safe because of her. She… is our savior."

SCP-5803 One More Song LINK

[+73]

"The tragedy is not always easy to see. Sometimes the sadness lies in the implications."

SCP-5681 Gehenna Arcade LINK

[+64]

Collab with Grigori Karpin

"Gehenna Arcade is the next exciting project from Vikander-Kneed Technical Media. A classic gameshow featuring host Jeremy Kincaid."

SCP-496 A Sunken Contagion LINK

[+28]

"Return to the sea."

Tales

Try Again? LINK

[+43]

"Your head throbs as your vision returns. The easy option was never an option."

Progressive Retrograde LINK

[+81]

"She said yes. A simple yes had never filled me with so much happiness before."

GOI Formats

La Rue Post: Willie's Shine LINK

[+36]

"That big ass gator that clawed my eye out is still out there, so if ya see it… kill it dead."

Hubs

Into the Void Hub LINK

[+55]

Collab with Sirslash47

"Hello, my name is Dr. Rynhart. I am the head researcher overseeing The Beholder Program. You have been personally selected to join this program due to your work ethic, interpersonal skills, and lack of major disciplinary violations. Welcome to the team!"

Vivarium's Art Page LINK

[+34]

Themes

Last Frontier Theme LINK

"Spaaaaaaaaaace"

---

SCP-877 (+305)
SCP-961 (+219)
SCP-1080 (+210)
SCP-1998 (+192)
SCP-2487 (+137)
SCP-1617 (+136)
SCP-1083 (+129)
SCP-1043 (+126)
SCP-1081 (+126)
SCP-1546 (+112)
SCP-3050 (+109)
SCP-4980 (+87)
SCP-4218 (+67)
SCP-474 (+63)

‡ Licensing / Citation

Cite this page as:

"Vivarium's Authorpage" by Vivarium, from the SCP Wiki. Source: https://scp-wiki.wikidot.com/vivarium-s-word-hole. Licensed under CC-BY-SA.

For more information, see Licensing Guide.
Licensing Disclosures

Filename: Viv.png
Name: Viv.png
Author: Vivarium
License: CC BY 3.0
Source Link: Wings, Eye, and Lighthouse

For more information about on-wiki content, visit the Licensing Master List.