Ouroborous Theme
@supports( --css: variables) {
    /* CSS Theming for DJKaktus' The Way It Ends
http://www.scp-wiki.net/djkaktus-s-proposal-iii */
 
    :root {
        /* Typefaces */
        --body-font: 'Lato', sans-serif;
        --header-font: 'GlacialIndifferenceBold', sans-serif;
        --title-font: 'Lato', sans-serif;
        --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
        /* Images */
        --logo-image: "http://kaktuskontainer.wdfiles.com/local--files/component%3Anu-thewayitendstheme-code/kak_logo.svg";
 
        /* Standard Colors */
 
        --white-monochrome: 15, 5, 5;
        --pale-gray-monochrome: 59, 59, 59;
        --light-gray-monochrome: 133, 133, 133;
        --gray-monochrome: 66, 66, 66;
        --dark-gray-monochrome: 51, 51, 51;
        --black-monochrome: 246, 246, 246;
        --bright-accent: 185, 5, 4;
        --medium-accent: 140, 20, 25;
        --dark-accent: 153, 1, 0;
        --newpage-color: 221, 102, 17;
 
        --swatch-border-color: var(--white-monochrome);
 
        --background-gradient-color: 215, 215, 215;
        --background-gradient-distance: 40rem;
 
        scrollbar-color: rgba(var(--white-monochrome), 1) rgba(var(--bright-accent), 0.50);
    }
 
    ::-webkit-scrollbar-thumb {
        background: rgba(var(--white-monochrome), 1);
    }
 
    ::-webkit-scrollbar-track-piece {
        background-color: rgba(var(--bright-accent), 0.50);
    }
 
    hr {
        border-top: none;
        background:-webkit-linear-gradient(80deg,rgba(var(--bright-accent), 0.15) 0%,rgba(var(--bright-accent), 1) 50%,rgba(var(--bright-accent), 0.15) 100%);
        background:-o-linear-gradient(80deg,rgba(var(--bright-accent), 0.15) 0%,rgba(var(--bright-accent), 1) 50%,rgba(var(--bright-accent), 0.15) 100%);
        background:linear-gradient(10deg,rgba(var(--bright-accent), 0.15) 0%,rgba(var(--bright-accent), 1) 50%,rgba(var(--bright-accent), 0.15) 100%);
        -webkit-filter: blur(0.04rem);
        filter: blur(0.04rem);
    }
 
    #login-status a {
        color: rgb(var(--dark-accent));
    }
 
    #account-options {
        background-color: rgba(var(--white-monochrome));
    }
 
    #account-options li a:hover {
        color: rgb(var(--dark-accent));
    }
 
    #header {
        background: url("http://kaktuskontainer.wdfiles.com/local--files/component%3Anu-thewayitendstheme-code/kak_logo.svg") .625rem 2.50rem no-repeat;
        background-position: left .75rem top 1.1875rem;
        background-clip: border-box;
        background-size: 5.375rem;
        -webkit-filter: drop-shadow(.063rem .063rem .063rem rgb(var(--white-monochrome)));
        filter: drop-shadow(.063rem .063rem .063rem rgb(var(--white-monochrome)));
    }
 
    #header h1 a::before {
        --text-shadow: rgb(var(--white-monochrome));
        content: "The Foundation";
        color: rgb(var(--dark-accent));
        text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }
 
    #header h2 span::before {
        --text-shadow: rgb(var(--bright-accent));
        content: "Office of the Overseer";
        color: rgb(var(--dark-grey-monochrome));
        text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }
 
    #header h1 a::before,
    #header h1 a {
        -webkit-animation: none;
        animation: none;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
 
    #header h1 a:hover::before {
        -webkit-animation: neon 1.5s ease-in-out infinite alternate;
        animation: neon 1.5s ease-in-out infinite alternate;
    }
 
    #top-bar a:hover {
        -webkit-animation: neon 1.5s ease-in-out infinite alternate;
        animation: neon 1.5s ease-in-out infinite alternate;
    }
 
    #top-bar div.top-bar > ul > li > a,
    #top-bar div.mobile-top-bar > ul > li > a,
    #top-bar div.top-bar > ul > li > ul > li > a,
    #top-bar div.mobile-top-bar > ul > li > ul > li > a {
        color: rgb(var(--bright-accent)) !important;
    }
 
    #top-bar div.top-bar > ul > li > ul,
    #top-bar div.mobile-top-bar > ul > li > ul {
        --box-shadow: rgba(var(--dark-accent), .5);
        background: rgba(var(--white-monochrome), .5);
        -webkit-box-shadow: 0 0.125rem 0.375rem var(--box-shadow);
        box-shadow: 0 0.125rem 0.375rem var(--box-shadow);
        border: 1px solid rgb(var(--bright-accent));
        -webkit-column-rule: 1px solid rgb(var(--dark-accent));
        column-rule: 1px solid rgb(var(--dark-accent));
    }
 
    #top-bar div.top-bar > ul > li > ul > li,
    #top-bar div.mobile-top-bar > ul > li > ul > li {
        border-top: .0625rem solid rgb(var(--dark-accent));
    }
 
    #top-bar div.top-bar > ul > li > ul > li:hover,
    #top-bar div.mobile-top-bar > ul > li > ul > li:hover #top-bar div.mobile-top-bar > ul > li > ul > li:active {
        background: rgba(var(--dark-accent), .15);
    }
 
    #top-bar li:hover ul,
    #top-bar li:focus-within ul,
    #top-bar li.sfhover ul,
    #top-bar li ul {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
 
    #side-bar {
        background: rgba(5, 0, 0, 0.6);
        margin: -0.125rem 0 0 -1vw;
    }
 
    #side-bar:hover {
        background: rgba(var(--white-monochrome),1);    
    }
 
    #side-bar div.menu-item a:hover {
        background-color: rgba(var(--bright-accent), .15);
        -webkit-animation: neon 1.5s ease-in-out infinite alternate;
        animation: neon 1.5s ease-in-out infinite alternate;
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        color: rgb(var(--black-monochrome));
    }
 
    #side-bar .heading {
        --text-shadow: rgb(var(--bright-accent));
        --box-shadow: rgb(var(--white-monochrome));
        color: rgb(var(--white-monochrome));
        -webkit-box-shadow: inset 0 -.0625rem 0 0 var(--box-shadow);
        box-shadow: inset 0 -.0625rem 0 0 var(--box-shadow);
        background: -webkit-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 100%);
        background: -o-linear-gradient(80deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 100%);
        background: linear-gradient(10deg, rgba(var(--bright-accent), 0.15) 0%, rgba(var(--bright-accent), 1) 100%);
        text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }
 
    #side-bar .heading p,
    #side-bar .side-block > .collapsible-block .collapsible-block-link {
        --text-shadow: rgb(var(--white-monochrome));
        text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }
 
    #container-wrap-wrap {
        background-image:-webkit-gradient(linear,left top, left bottom,from(rgb(var(--white-monochrome))),color-stop(30%, rgb(var(--white-monochrome))),to(rgb(var(--pale-gray-monochrome)))),
-webkit-gradient(linear,left top, left bottom,color-stop(7.5rem, rgb(var(--dark-accent))),color-stop(7.625rem, rgb(var(--white-monochrome))),color-stop(rgb(var(--white-monochrome))),color-stop(rgb(var(--white-monochrome))),to(rgb(var(--dark-accent)))),
-webkit-gradient(linear,left top, left bottom,color-stop(0, rgba(var(--white-monochrome), 0)),color-stop(10rem, rgba(var(--white-monochrome), 0.5)),color-stop(25rem, rgba(var(--white-monochrome), 1)),to(rgba(var(--white-monochrome), 1)));
        background-image:-webkit-linear-gradient(top,rgb(var(--white-monochrome)) 0%,rgb(var(--white-monochrome)) 30%,rgb(var(--pale-gray-monochrome)) 100%),
-webkit-linear-gradient(top,rgb(var(--dark-accent)) 7.5rem,rgb(var(--white-monochrome)) 7.625rem,rgb(var(--white-monochrome)) calc(100% - 0.125rem),rgb(var(--white-monochrome)) calc(100% - 0.125rem),rgb(var(--dark-accent)) 100%),
-webkit-linear-gradient(top,rgba(var(--white-monochrome), 0) 0,rgba(var(--white-monochrome), 0.5) 10rem,rgba(var(--white-monochrome), 1) 25rem,rgba(var(--white-monochrome), 1) 100%);
        background-image:-o-linear-gradient(top,rgb(var(--white-monochrome)) 0%,rgb(var(--white-monochrome)) 30%,rgb(var(--pale-gray-monochrome)) 100%),
-o-linear-gradient(top,rgb(var(--dark-accent)) 7.5rem,rgb(var(--white-monochrome)) 7.625rem,rgb(var(--white-monochrome)) calc(100% - 0.125rem),rgb(var(--white-monochrome)) calc(100% - 0.125rem),rgb(var(--dark-accent)) 100%),
-o-linear-gradient(top,rgba(var(--white-monochrome), 0) 0,rgba(var(--white-monochrome), 0.5) 10rem,rgba(var(--white-monochrome), 1) 25rem,rgba(var(--white-monochrome), 1) 100%);
        background-image:linear-gradient(to bottom,rgb(var(--white-monochrome)) 0%,rgb(var(--white-monochrome)) 30%,rgb(var(--pale-gray-monochrome)) 100%),
linear-gradient(to bottom,rgb(var(--dark-accent)) 7.5rem,rgb(var(--white-monochrome)) 7.625rem,rgb(var(--white-monochrome)) calc(100% - 0.125rem),rgb(var(--white-monochrome)) calc(100% - 0.125rem),rgb(var(--dark-accent)) 100%),
linear-gradient(to bottom,rgba(var(--white-monochrome), 0) 0,rgba(var(--white-monochrome), 0.5) 10rem,rgba(var(--white-monochrome), 1) 25rem,rgba(var(--white-monochrome), 1) 100%);
        background-size: 100% 7.5rem, 100% 9.375rem, 100% 100%;
        background-repeat: no-repeat;
        background-blend-mode: darken;
    }
 
    #skrollr-body {
        background-color: rgb(var(--bright-accent));
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='40' viewBox='0 0 50 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230f0505' fill-opacity='0.1'%3E%3Cpath d='M40 10L36.67 0h-2.11l3.33 10H20l-2.28 6.84L12.11 0H10l6.67 20H10l-2.28 6.84L2.11 10 5.44 0h-2.1L0 10l6.67 20-3.34 10h2.11l2.28-6.84L10 40h20l2.28-6.84L34.56 40h2.1l-3.33-10H40l2.28-6.84L47.89 40H50l-6.67-20L50 0h-2.1l-5.62 16.84L40 10zm1.23 10l-2.28-6.84L34 28h4.56l2.67-8zm-10.67 8l-2-6h-9.12l2 6h9.12zm-12.84-4.84L12.77 38h15.79l2.67-8H20l-2.28-6.84zM18.77 20H30l2.28 6.84L37.23 12H21.44l-2.67 8zm-7.33 2H16l-4.95 14.84L8.77 30l2.67-8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
 
    #side-bar div.menu-item {
        --box-shadow: rgba(var(--black-monochrome), 0.15);
        -webkit-box-shadow: inset 0 -.0625rem 0 0 var(--box-shadow);
        box-shadow: inset 0 -.0625rem 0 0 var(--box-shadow);
    }
 
    #side-bar div.menu-item :not(:nth-child(2)) {
        border-left: .0625rem solid rgba(var(--black-monochrome), 0.15);
    }
 
    #side-bar div.menu-item a,
    #side-bar div.menu-item .text {
        color: rgb(var(--bright-accent));
        font-weight: 900;
    }
 
    #side-bar > div:nth-child(3) {
        background-color: rgba(var(--dark-accent), 0.09) !important;
    }
 
    #side-bar > div:nth-child(5) {
        background-color: rgba(var(--dark-accent), 0.25) !important;
    }
 
    #page-title {
        color: rgb(var(--white-monochrome));
        -webkit-animation: none;
        animation: none;
        cursor: default;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        color: rgb(var(--white-monochrome));
        border-bottom: none;
    }
 
    #page-title:hover {
        -webkit-animation: neon 1.5s ease-in-out infinite alternate;
        animation: neon 1.5s ease-in-out infinite alternate;
        color: rgb(var(--bright-accent));
    }
 
    .page-rate-widget-box {
        background:-webkit-gradient(linear,left top, left bottom,from(rgb(var(--white-monochrome))),color-stop(30%, rgb(var(--white-monochrome))),to(rgba(var(--dark-accent), 0.25)));
        background:-webkit-linear-gradient(top,rgb(var(--white-monochrome)) 0%,rgb(var(--white-monochrome)) 30%,rgba(var(--dark-accent), 0.25) 100%);
        background:-o-linear-gradient(top,rgb(var(--white-monochrome)) 0%,rgb(var(--white-monochrome)) 30%,rgba(var(--dark-accent), 0.25) 100%);
        background:linear-gradient(to bottom,rgb(var(--white-monochrome)) 0%,rgb(var(--white-monochrome)) 30%,rgba(var(--dark-accent), 0.25) 100%);
 
    }
 
    .page-rate-widget-box > span.rate-points,
    .page-rate-widget-box > span.rateup,
    .page-rate-widget-box > span.ratedown,
    .page-rate-widget-box > span.cancel,
    .page-rate-widget-box > span.rate-points > a,
    .page-rate-widget-box > span.rateup > a,
    .page-rate-widget-box > span.ratedown > a,
    .page-rate-widget-box > span.cancel > a {
        color: rgb(var(--dark-accent));
        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }
 
    .page-rate-widget-box > span.rate-points:hover > a,
    .page-rate-widget-box > span.rateup:hover > a,
    .page-rate-widget-box > span.ratedown:hover > a,
    .page-rate-widget-box > span.cancel:hover > a {
        color: rgb(var(--white-accent));
    }
 
    .page-rate-widget-box > span.rate-points:hover,
    .page-rate-widget-box > span.rate-points:active,
    .page-rate-widget-box > span.rateup:hover,
    .page-rate-widget-box > span.rateup:active,
    .page-rate-widget-box > span.ratedown:hover,
    .page-rate-widget-box > span.ratedown:active,
    .page-rate-widget-box > span.cancel:hover,
    .page-rate-widget-box > span.cancel:active {
        mix-blend-mode: unset;
 
    }
 
    @media only screen and (max-width: 768px) {
        #top-bar .mobile-top-bar {background:-webkit-gradient(linear,left top, left bottom,color-stop(0, rgba(var(--dark-accent), 1)),color-stop(.125rem, rgba(var(--white-monochrome), 1)),color-stop(rgba(var(--white-monochrome), 1)),color-stop(rgba(var(--white-monochrome), 1)),color-stop(3rem, rgba(var(--dark-accent), 1)));background:-webkit-linear-gradient(top,rgba(var(--dark-accent), 1) 0,rgba(var(--white-monochrome), 1) .125rem,rgba(var(--white-monochrome), 1) calc(3rem - 0.125rem),rgba(var(--white-monochrome), 1) calc(3rem - 0.125rem),rgba(var(--dark-accent), 1) 3rem);background:-o-linear-gradient(top,rgba(var(--dark-accent), 1) 0,rgba(var(--white-monochrome), 1) .125rem,rgba(var(--white-monochrome), 1) calc(3rem - 0.125rem),rgba(var(--white-monochrome), 1) calc(3rem - 0.125rem),rgba(var(--dark-accent), 1) 3rem);background:linear-gradient(to bottom,rgba(var(--dark-accent), 1) 0,rgba(var(--white-monochrome), 1) .125rem,rgba(var(--white-monochrome), 1) calc(3rem - 0.125rem),rgba(var(--white-monochrome), 1) calc(3rem - 0.125rem),rgba(var(--dark-accent), 1) 3rem);
        }
 
        #top-bar > div.mobile-top-bar > div.open-menu > p > a {color: rgb(var(--bright-accent)) !important;
        }
 
        #side-bar {background: rgba(5, 0, 0, 1)
        }
 
        #side-bar .close-menu {background: rgba(var(--white-monochrome), .3) .0625rem .0625rem repeat;
        }
 
        #side-bar:target .close-menu {background: rgba(var(--white-monochrome), .3) 1px 1px repeat
        }
    }
 
    /* Animations */
    @keyframes neon {
        from {text-shadow:0 0 0.3125rem rgb(var(--white-monochrome)),0 0 0.625rem rgb(var(--white-monochrome)),0 0 0.9375rem rgb(var(--white-monochrome)),0 0 1.25rem rgb(var(--bright-accent)),0 0 2.1875rem rgb(var(--bright-accent)),0 0 2.5rem rgb(var(--bright-accent)),0 0 3.125rem rgb(var(--bright-accent)),0 0 4.6875rem rgb(var(--bright-accent));
        }
 
        to {text-shadow:0 0 0.1565rem rgb(var(--white-monochrome)),0 0 0.3125rem rgb(var(--white-monochrome)),0 0 0.469rem rgb(var(--white-monochrome)),0 0 0.625rem rgb(var(--bright-accent)),0 0 1.094rem rgb(var(--bright-accent)),0 0 1.25rem rgb(var(--bright-accent)),0 0 1.5625rem rgb(var(--bright-accent)),0 0 2.344rem rgb(var(--bright-accent));
        }
    }
 
    @-webkit-keyframes neon {
        from {text-shadow:0 0 0.3125rem rgb(var(--white-monochrome)),0 0 0.625rem rgb(var(--white-monochrome)),0 0 0.9375rem rgb(var(--white-monochrome)),0 0 1.25rem rgb(var(--bright-accent)),0 0 2.1875rem rgb(var(--bright-accent)),0 0 2.5rem rgb(var(--bright-accent)),0 0 3.125rem rgb(var(--bright-accent)),0 0 4.6875rem rgb(var(--bright-accent));
        }
 
        to {text-shadow:0 0 0.1565rem rgb(var(--white-monochrome)),0 0 0.3125rem rgb(var(--white-monochrome)),0 0 0.469rem rgb(var(--white-monochrome)),0 0 0.625rem rgb(var(--bright-accent)),0 0 1.094rem rgb(var(--bright-accent)),0 0 1.25rem rgb(var(--bright-accent)),0 0 1.5625rem rgb(var(--bright-accent)),0 0 2.344rem rgb(var(--bright-accent));
        }
    }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License