Database Omega Theme

[[include :delameuh:theme:meg-secret]]

Theme Code

/* Fonts */
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,900|PT+Mono|Poppins:600,800|Share+Tech+Mono|Anonymous+Pro');
 
@import url('https://fonts.googleapis.com/css2?family=Kelly+Slab&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap');
 
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300&display=swap');
 
/* All Vars Used */
 
:root {
    /* S-CSS-P Integration */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "nuscp";
    /* mua be either "nuscp" or "sigma9" */
    --theme-id: "megsecret-theme";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "MEG SECRET";
    /* set this to your theme's full name */
 
    /* Header */
   --logo-image: url("http://backrooms-wiki.wikidot.com/local--files/level-997/meg-header");
    --header-title: "Database Omega";
    --header-subtitle: "the M.E.G. Secret Archive";
 
    /* Typefaces */
    --body-font: 'Share Tech Mono', monospace;
    --header-font: 'Oxygen Mono', monospace;
    --title-font: 'Kelly Slab', cursive;
    --mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
 
    /* Standard Colors */
    --white-monochrome: 4, 0, 10;
    /* white */
    --pale-gray-monochrome: 180, 180, 180;
    /* v light gray for blockquotes and stuff */
    --light-gray-monochrome: 235, 225, 235;
    /* light accent gray for login status */
    --gray-monochrome: 60, 60, 60;
    /* gray */
    --grayer-monochrome: 11, 11, 11;
    --dark-gray-monochrome: 0, 0, 0;
    /* dark accent gray for sidebar background */
    --black-monochrome: 0, 0, 0;
    /* black */
    --bright-accent: 125, 25, 125;
    /* Some sidebar text, edit button text etc */
    --medium-accent: 44, 1, 89;
    /* the annoying header thing */
    --dark-accent: 12, 12, 12;
    /* search bar and edit button */
    --newpage-color: 90, 10, 240;
    /* text highlight colour, url link */
    --terminal-medium: 54, 0, 74;
    /* edit button borders */
    --pale-accent: 102, 19, 237;
    /* dark yellow-brown */
 
    --tester-blue: 0, 0, 221;
    /* blue for testing */
    --tester-green: 0, 221, 0;
    /*green for testing */
    --tester-purple: 221, 0, 221;
    /*purple for testing */
    --tester-yellow: 221, 221, 0;
    /*yellow for testing */
 
    --dark-accent-red: 89, 0, 255;
    --mid-accent-red: 90, 10, 240;
    --bright-red: 71, 3, 145;
    --shadow-red: 89, 33, 166;
    --pink : 126, 12, 240;
    --dark-purple : 18, 0, 31;
    --darkish-red: 163, 119, 237;
    /*main text */
    --blinding-red: 81, 0, 232;
    --contrast-salmon: 34, 1, 56;
 
    /* Primary Theme Colors */
    --swatch-background: var(--grayer-monochrome);
    --swatch-primary: var(--newpage-color);
    --swatch-primary-darker: var(--mid-accent-red);
    --swatch-primary-darkest: 64, 0, 168;
 
    /* Primary Text Colors */
    --swatch-text-dark: var(--light-gray-monochrome);
    --swatch-text-light: 210, 210, 210;
    --swatch-important-text: var(--tester-purple);
 
      /* Primary Menu Colors */
    --swatch-menubg-color: var(--dark-purple);
    --swatch-menubg-light-color: var(--pink);
    --swatch-menubg-medium-color: var(--mid-accent-red);
    --swatch-menubg-medium-dark-color: var(--pink);
    --swatch-menubg-dark-color: var(--mid-accent-red);
    --swatch-menubg-black-color: var(--mid-accent-red);
    --swatch-menubg-hover-color: var(--mid-accent-red);
    --swatch-menutxt-dark-color: var(--dark-pink);
    --swatch-menutxt-light-color: 223, 209, 240;
    --swatch-border-color: var(--pink);
 
    /* Primary Header Colors */
    --swatch-headerh1-color: 255, 255, 255;
    --swatch-headerh2-color: 255, 255, 255;
    --swatch-topmenu-border-color: 42, 2, 127;
    --swatch-topmenu-bg-color: 42, 2, 107; 
 
    /* Header Gradients */
    --gradient-header: linear-gradient(to bottom,
     rgba(98, 10, 240) 10%,
     rgba(98, 10, 240) 40%,
     rgb(12, 0, 31) 100%);
 
    /* Rating Module Colors */
    --rating-module-text-color: var(--white-monochrome);
 
    --gradient-topmenu: linear-gradient(to bottom,
     white 0%,
     white 7.5rem,
     rgba(var(--swatch-topmenu-border-color), 1) 7.5rem,
     rgba(var(--swatch-topmenu-bg-color), 1) 7.625rem,
     rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.125rem),
     rgba(var(--swatch-topmenu-bg-color), 1) calc(100% - 0.125rem),
     rgba(var(--swatch-topmenu-border-color), 1) 100%);
 
    --gradient-topmenu-mobile: linear-gradient(to bottom,
     rgba(var(--swatch-topmenu-border-color), 1) 0,
     rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
     rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
     rgba(var(--swatch-topmenu-bg-color), 1) calc(3rem - 0.125rem),
     rgba(var(--swatch-topmenu-border-color), 1) 3rem);
 
   --diagonal-stripes: linear-gradient(transparent 0);
 
    --gradient-sidemenu-header: linear-gradient(10deg,
     rgba(var(--mid-accent-red), 0.45) 0%,
     rgba(var(--mid-accent-red), 0.55) 100%);
    --header-background-image-size: 100% 7.5rem;
 
    /* Sidebar */
    --sidebar-transition-timing: 0.5s ease-in-out 0.1s;
    --sidebar-internal-border-thickness: 0.16rem;
 
    --background-gradient-color: var(--grayer-monochrome);
    --background-gradient-distance: 50rem;
 
}
 
.chapter {
  content: '';
  flex: 1;
  border-bottom: 1.5px solid #FFF;
}
 
.chapter:not(:empty) {
  margin-top: .1em;
}
 
#extrac-div-1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background: repeating-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0));
    background-size: auto 8px;
    opacity: 0.7;
}
 
#extrac-div-2 {
    position: fixed;
    width: 100vw;
    height : 1rem;
    top: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(162, 55, 255) 0%,rgba(162, 55, 255) 50%,rgba(162, 55, 255) 51%,rgba(162, 55, 255) 100%);
    opacity : .1;
    animation: scanm 6s linear infinite;
}
@keyframes scanm {
  0%   { top: -1rem; opacity : .05;}
  25% { top: 50%; opacity: .03;}
  37.5% { top: 75%; opacity: 0.06;}
  50% { top: 100%; opacity: .03;}
  100% { top: 100%;}
}
 
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
 
#container {
   background-image: radial-gradient(circle, rgb(var(--light-gray-monochrome)), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
   text-align: justify;
   text-justify: inter-word;
   font-size: 1.1em;
 
}
 
html,
body,
#side-bar:hover {
    scrollbar-color: rgb(var(--dark-purple)) rgb(var(--mid-accent-red));
    }
 
 ::-webkit-scrollbar,
 #side-bar:hover::-webkit-scrollbar {
    background-color: rgb(var(--dark-purple));
    }
 
 ::-webkit-scrollbar-thumb,
 #side-bar:hover::-webkit-scrollbar-thumb {
    background-color: rgb(var(--mid-accent-red));
    }
 
/* RATING MODULE */
.page-rate-widget-box {
    background: -webkit-gradient(linear,
     left bottom, left top,
     from(rgba(var(--dark-accent),1)),
     to(rgba(var(--dark-accent), 1)));
    background: -webkit-linear-gradient(bottom,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    background: -o-linear-gradient(bottom,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    background: linear-gradient(to top,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    border: 2px solid rgb(var(--mid-accent-red));
}
#page-content .rate-box-with-credit-button {
    background: -webkit-gradient(linear,
     left bottom, left top,
     from(rgba(var(--dark-accent),1)),
     to(rgba(var(--dark-accent), 1)));
    background: -webkit-linear-gradient(bottom,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    background: -o-linear-gradient(bottom,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    background: linear-gradient(to top,
     rgba(var(--dark-accent),1) 0%,
     rgba(var(--dark-accent), 1) 100%);
    border-color: rgb(var(--mid-accent-red));
}
 
.page-rate-widget-box .rate-points {
    color: rgb(var(--pink)) !important;
}
.page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a {
    background-color: rgb(var(--dark-accent-red)) !important;
} 
.page-rate-widget-box .ratedown a:hover, .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .cancel a:hover {
    background-color: rgb(var(--bright-red)) !important;
}
 
.scp-image-block .scp-image-caption {
    font-size: .8em;
    background-color:rgb(var(--dark-accent));
    color: rgb(255,0,0);
}
 
#header h1 {
    color: rgb(var(--tester-green));
}
 
.meta-title, #page-title {
    font-family: 'Kelly Slab', cursive;
    border-color: rgba(var(--mid-accent-red))!important;
 
    background: linear-gradient(to bottom,
     rgb(50, 8, 117) 0%,
     rgb(50, 8, 117) 35%,
     rgb(104, 10, 255) 80%);
 
    background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
}
 
#side-bar div.menu-item .sub-text {
    color: rgb(var(--pale-gray-monochrome));
}
#login-status {
    color: rgb(var(--medium-accent));
}
.code {
    padding: 5px 5px 5px 15px;
    margin-bottom:10px;
    width: 100%;
    font-family: var(--header-font);
    font-size: 1.1em;
    background-color:rgb(var(--dark-purple));
    border: 2px dashed rgb(var(--mid-accent-red));
    color: rgb(var(--bright-red));
}
 
.hl-main {
    filter: invert(1) hue-rotate(180deg);
}
 
.page-options-bottom a {
    background-color:rgb(var(--dark-purple)) !important;
    color: rgb(var(--blinding-red)) !important;
    font-family: var(--header-font);
}
 
table.wiki-content-table th {
    text-align: left !important;
    font-family: var(--title-font) !important;
    color: rgb(255, 255, 255);
    background-color: rgb(90, 10, 240) !important;
    border: 1px solid rgb(var(--dark-accent-red)) !important;
}
 
table.wiki-content-table tr {
    background-color: rgb(12, 1, 22) !important;
    border: 1px solid rgb(var(--dark-accent-red)) !important;
    color: rgb(var(--tester-purple));
}
 
table.wiki-content-table td {
    background-color: rgb(12, 1, 22) !important;
    border: 1px solid rgb(var(--dark-accent-red)) !important;
    color: rgb(var(--dark-accent-red));
}
 
.footnotes-footer {
    margin-bottom:10px;
    width: 100%;
    font-family: var(--body-font);
    font-size: 1.1em;
    --footnotes-footer-bg-color: var(--dark-purple);
    color: rgb(126, 12, 240);
}
 
span.printuser {
    color: rgb(var(--light-gray-monochrome)) !important;
}
 
table.wiki-content-table {
    border: 2px solid rgb(var(--dark-accent-red));
}
 
hr {
    background-color: rgb(90, 10, 240) !important;
}
/* TABS */
 
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
    color: rgb(var(--bright-red));
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
color: rgb(var(--black-monochrome));
}
 
.scp-image-block {
    border: solid .1625rem rgb(var(--mid-accent-red));
}
 
.blockquote, [class*=blockquote], blockquote, div.blockquote {
    padding: 5px 15px 5px 15px;
    margin-bottom: 10px;
    background-color:rgb(15, 15, 15) !important;
    border: 3px solid rgb(var(--dark-accent-red)) !important;
    color: rgb(var(--light-gray-monochrome)) !important;
    margin: 10px auto 0;
}
 
blockquote blockquote, .blockquote blockquote {
    padding: 5px 15px 5px 15px;
    border: 3px solid rgb(var(--dark-accent-red));
    color: rgb(var(--bright-red)) !important;
    font-size: 1rem;
    margin: 10px auto 0;
}
 
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
    background-color: rgb(var(--dark-accent));
}
#search-top-box:not(:focus-within)::before {  
    color: rgb(var(--dark-accent));
}
 
#top-bar div.mobile-top-bar > ul > li > a, #top-bar div.top-bar > ul > li > a {
    color: rgb(var(--pale-gray-monochrome));
}
#top-bar div.mobile-top-bar > ul > li > a:hover, #top-bar div.top-bar > ul > li > a:hover, #top-bar div.mobile-top-bar > ul > li:hover > a, #top-bar div.top-bar > ul > li:hover > a {
    color: rgb(223, 209, 240);
}
.open-menu a {
    color: rgb(var(--tester-purple)) !important;
}
 
@-webkit-keyframes marquee {
         0% { -webkit-transform: translateX(100%); transform: translateX(100%) }
    100% { -webkit-transform: translateX(-100%); transform: translateX(-100%) }
}
 
@keyframes marquee {
         0% { -webkit-transform: translateX(100%); transform: translateX(100%) }
    100% { -webkit-transform: translateX(-100%); transform: translateX(-100%) }
}
@media only screen and (max-width: 768px) {
    #header h2 {
        overflow: hidden;
    height: 100%;
    pointer-events: none;
    }
    #header h2 span {
        -webkit-animation: marquee linear 10s infinite;
                animation: marquee linear 10s infinite;
        width: 150% !important;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }
    #header h1 span {
    font-size: 75%;
    }
    #top-bar {
        font-size: calc(var(--base-font-size)*0.70);
    }
 
}
 
.hovertip{
background-color:rgb(var(--dark-purple)) !important;
background-image:radial-gradient(ellipse 1000% 100% at 50% 90%, transparent,rgb(var(--dark-purple))) !important;
}
 
#side-bar {
background-size: 0%;
}
 
.blockquote h1,
.blockquote h2,
.blockquote h3,
.blockquote h4,
.blockquote h5,
blockquote h1,
blockquote h2,
blockquote h3,
blockquote h4,
blockquote h5 {
    color: rgb(var(--bright-red));
}
 
.styled-quote {
  text-align: justify;
  text-justify: inter-word;
    color: rgb(42, 2, 102);
    background-color:rgb(var(--pale-gray-monochrome));
    border-left: 0.5rem solid rgba(var(--dark-accent-red));
}
 
.styled-quote2 {
    color: rgb(var(--dark-accent-red));
    background-color:rgb(var(--pale-gray-monochrome));
    border-left: 0.5rem solid rgba(var(--dark-accent-red));
    padding: 5px 15px 5px 15px;
    margin-right: 5px;
}
 
.dark-styled-quote {
   color:rgb(var(--pink));
   background-color:rgb(var(--dark-purple));
   border-left: 0.5rem solid rgba(var(--pink));
}
 
.lightblock {
   background-color:rgb(var(--pale-gray-monochrome));
   color: rgb(42, 2, 102);
}
 
.darkblock {
   background-color:rgb(var(--dark-purple));
   color:rgb(126, 12, 240);
}
 
.darkblock2 {
   background-color:rgb(var(--dark-purple));
   color:rgb(126, 12, 240);
   display: grid;
   text-align: justify;
   word-wrap: normal;
   font-size: 85%;
   padding: 5px 10px 5px 15px;
   margin-right: 5px;
}
 
.licensing {
  color:rgb(255, 255, 255);
}
 
.testingblock{
   color: rgb(var(--mid-accent-red));
   border: solid 2px rgb(var(--dark-accent-red));
   padding: 0.01rem 1rem 1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.20rem;
   box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,.25);
 
    background: url(http://backrooms-wiki.wdfiles.com/local--files/theme%3Ameg-edgy/F59005DF-954F-4EB8-8116-2E7F06FB4211.png) center/20% no-repeat;
    background-color: rgb(var(--pale-gray-monochrome));;
    background-position: right 50% bottom 25px;
    padding-bottom: 65px;
    position: relative;
    /* clear: both; */
    display: table;
}
 
.testingblock::after{
    content: "M.E.G. - Bettering Humanity";
    display: flex !important;
    justify-content: center !important;
    font-family: 'Kelly Slab', cursive;
    font-weight: bold;
    font-size: 80%;
    color: black;
    background-color: rgb(var(--pale-gray-monochrome));
    position: relative;
    transform: translateY(325%);
}
 
.logoblock{
    padding: 5px 15px 5px 15px; /* adds space - up right down left */
    font-size: 1rem;
    font-family: 'Share Tech Mono';
    background: url(http://backrooms-wiki.wdfiles.com/local--files/theme%3Ameg-edgy/F59005DF-954F-4EB8-8116-2E7F06FB4211.png) center/20% no-repeat;
    background-color: rgb(var(--pale-gray-monochrome));
    background-position: right 50% bottom 25px;
    border: 3px solid rgb(90, 10, 240);
    border-radius: 15px;
    color: rgb(var(--black-monochrome));
    margin: 10px auto 0; /* Adds a space above the box */
    padding-bottom: 65px;
    position: relative;
    /*clear: both; */
    display: table;
}
 
.logoblock::after{
    content: "M.E.G. - Bettering Humanity";
    display: flex !important;
    justify-content: center !important;
    font-family: 'Kelly Slab', cursive;
    font-weight: bold;
    font-size: 80%;
    color: black;
    background-color: rgb(var(--pale-gray-monochrome));
    position: relative;
    transform: translateY(325%);
}
 
.logoblock h2{
    color: rgb(var(--dark-accent-red));
}
 
#toc.floatright {
   background-color: rgb(var(--dark-accent-red)) !important;
   color:rgb(var(--black-monochrome));
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: 3px solid rgb(var(--dark-accent-red)) !important;
   padding: 0rem;
   margin: 1rem !important;
}
 
#toc-action-bar    {
   background-color:rgb(var(--dark-accent-red)) !important;
 
}
 
#toc .title {
   background-color:rgb(var(--dark-accent-red)) !important;
   padding: 0.25em 2em 0.25em 0;
}
 
#toc a {
   text-align: left !important;
   color: rgb(var(--mid-accent-red)) !important;
}
 
#toc #toc-action-bar a::after {
                content: "Table of Contents";
                border-color:rgb(var(--tester-yellow)) !important;
                position: absolute;
                left: 104%;
                transition: font-weight 0.15s var(--ease-in-out), font-variation-settings 0.15s var(--ease-in-out);
                white-space: nowrap;
            }
 
#toc #toc-action-bar a::before {
                content: "";
                display: inline-block;
                position: relative;
                width: 1em;
                height: 1em;
                background-color: rgb(var(--blinding-red));
                -webkit-mask: var(--mask-image) center center / 100% no-repeat;
                        mask: var(--mask-image) center center / 100% no-repeat;
            }
 
#toc #toc-action-bar a:first-of-type::before {
                    --mask-image: var(--down-arrow-mask);
 
                    left: -0.85em;
                    -webkit-mask-size: 2em 0.3625em;
                            mask-size: 2em 0.3625em;
 
                    background-color: green !important;
 
                }
 
#toc #toc-action-bar a:last-of-type::before {
                    --mask-image: var(--right-arrow-mask);
 
                    left: 0em;
                    bottom: 0.2em
                    -webkit-mask-size: 0.3625em 2em;
                            mask-size: 0.3625em 2em;
 
                    background-color: rgb(var(--blinding-red)) !important;
 
                }
 
#toc #toc-action-bar a,
            #toc #toc-action-bar a:visited {
                color: rgb(var(--pale-gray-monochrome)) !important;
            }
 
#toc #toc-action-bar a:is(:hover, :active, :focus, :focus-within) {
                color: rgb(var(--blinding-red))  !important;
            }
 
#toc #toc-action-bar a:is(:hover, :active, :focus, :focus-within)::before {
                    color: rgb(var(--tester-yellow)) !important;
                }
#toc #toc-list div[style*="margin-left"] {
                margin-left: 1em !important;
            }
 
#toc #toc-list div[style*="2em"] {
                padding-left: 0.75em !important;
            }
 
#toc #toc-list div[style*="2em"]::before {
                    content: "╶";
                }
 
#toc #toc-list div[style*="3em"] {
                padding-left: 1.75em !important;
            }
 
#toc #toc-list div[style*="3em"]::before {
                    content: "╶─";
                }
 
#toc #toc-list div[style*="4em"] {
                padding-left: 2.75em !important;
            }
 
#toc #toc-list div[style*="4em"]::before {
                    content: "╶───";
                }
 
#toc #toc-list div[style*="5em"] {
                padding-left: 3.75em !important;
            }
 
#toc #toc-list div[style*="5em"]::before {
                    content: "╶────";
                }
 
#toc #toc-list {
            position: relative;
            border-color: rgb(var(--tester-yellow)) !important; /*I don't know how this works but it sort of does */
        }
/* #page-content is shoved everywhere to make sure it's the most specific thingy */
/* Styling! */
#page-content .collapsible-block-folded, #page-content .collapsible-block-unfolded-link {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    /* Animated things */
    transition: background 0.2s linear;
    background: var(--base-color);
    /* Technical bits */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
/* The Clicky Text */
#page-content .collapsible-block-link {
    color: rgb(var(--pale-gray-monochrome));
    font-weight: bold;
    text-decoration: none;
}
/* Gets rid of the underline when hovering over the collapsible */
#page-content .collapsible-block-link:hover {
    text-decoration: none
}
/* Collapsible content */
#page-content .collapsible-block-content {
    /* Animated things */
    transition: border-top-color 0.2s linear, border-bottom-color 0.2s linear;
    border-top: solid var(--base-color) 5px;
    border-bottom: solid var(--base-color) 3px;
}
 
/* Folded blocks are animated, unfolded ones are not */
#page-content .collapsible-block-folded {
    max-width: 100%;
}
#page-content .collapsible-block-unfolded-link{
    width: min-content;
}
/* Addendum counter */
 
/* Addendum prefixes */
#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▷";
    color: rgb(0, 180, 0);
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▽";
    color: rgb(230,0,0);
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
/* Hovering effects */
#page-content .collapsible-block-folded:hover {
    background: rgb(45, 3, 92);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:hover {
    background: green;
    max-width: 100%;
}
 
/* Collapsible borders - because it looks prettier this way */
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content{
    border-top-color: green;
    border-bottom-color: green;
}
/* When hovering over link, change addendum tag to hover-color */
#page-content .collapsible-block-unfolded-link:hover + .collapsible-block-content::after {
    background: green;
}
/* Click flash when clicking, also forces the collapsible to expand */
#page-content .collapsible-block-folded:active {
    transition: background 0s, max-width 0s;
    background: var(--click-color);
    max-width: 100%;
}
 
#page-content .collapsible-block-unfolded-link:active, #page-content .collapsible-block-unfolded-link:active + .collapsible-block-content::after {
    transition: background 0s, max-width 0s;
    background: var(--hover-color);
    max-width: 100%;
}
/* On click, change borders to click-color */
#page-content .collapsible-block-unfolded-link:active + .collapsible-block-content {
    transition: border-top-color 0s, border-bottom-color 0s;
    border-top-color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}
/* Done with normal collapsibles, now we do all the variations */
/* Unfolded collapsible */
#page-content .unfolded-collapse {
    margin-top: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: rgb(128, 128, 128) 0px 0px 3px 0px;
    background: var(--base-color);
    /* Text */
    color: white;
    font-weight: bold;
    /* Technical bits */
    width: min-content;
    white-space: nowrap;
    overflow: hidden;
}
/* Addendum prefix */
#page-content .unfolded-collapse::before {
    content: "▽";
    color: green !important;
    border-right: none;
    padding-right: 0rem;
    margin-right: 1rem;
    font-weight: normal;
    font-family: var(--mono-font);
}
/* Bottom border */
#page-content .unfolded-collapse-border {
    display: block;
    width: 700px;
    border-top: solid var(--base-color) 5px;
}
/* Centering, very simple */
#page-content .center-collapse .collapsible-block-folded, #page-content .center-collapse .collapsible-block-unfolded-link, #page-content .center-collapse .unfolded-collapse{
    margin:auto;
    margin-top: 10px;
}
 
/* SD Classes */
 
/* sd banner colours */
 
.sd-container {
 
/* font */
--sd-font:'PT Mono';
 
/* borders */
--sd-border:98,10,240; /* for most classes */
--sd-border-secondary:0,0,0; /* for n/a */
--sd-border-deadzone:20,0,0; /* for deadzone */
 
/* symbols */
--sd-symbol:var(--sd-border) !important; /* for most symbols */
--sd-symbol-secondary: 255,255,255; /* white for class 4 and higher */
 
/* text */
--sd-bullets:var(--sd-border) !important; /* the colour of the bullet point text */
--sd-text: 98, 10, 240; /* the colour of the text in the top box */
 
/* class colours */
--class-0:217, 197, 97;
--class-1:247,227,117;
--class-1:255,201,14;
--class-2:245,156,0;
--class-3:249,90,0;
--class-4:254,23,1;
--class-5:175,6,6;
--class-unknown:38,38,38;
--class-habitable:26,128,111;
--class-deadzone:44,13,12;
--class-pending:182,182,182;
--class-n-a:38,38,38;
--class-amended:185,135,212;
--class-omega:98,10,240;
}
 
.reverenceblock{
    border: 4px double white;
    outline: 6px solid black;
    background: url(http://backrooms-wiki.wikidot.com/local--files/level-997/Liberation-Eagle) center/10% no-repeat;
    background-color: rgb(0, 0, 0);
    color: white;
    padding: 0 1em;
    background-position: right 50% bottom 25px;
    padding-bottom: 65px;
    position: relative;
    display: table;
}
 
.reverenceblock::after{
    content: "Liberation";
    display: flex !important;
    justify-content: center !important;
    font-family: 'Kelly Slab', cursive;
    font-weight: bold;
    font-size: 80%;
    color: white;
    background-color: rgb(0, 0, 0);
    position: relative;
    transform: translateY(325%);
}
 
.top-box .gradient-box {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 36%) !important;
}