@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 Chaos Insurgency";
     color: rgb(var(--dark-accent));
     text-shadow: .063rem .063rem .063rem var(--text-shadow);
    }

    #header h2 span::before {
     --text-shadow: rgb(var(--bright-accent));
     content: "VIVAT REBELLIUM";
     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);
    }
    
    #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 .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)) !important;
     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));
     }
    }
}