@import url("https://vivarium.wdfiles.com/local--files/backrooms%3Avivtheme/stylesheet.css");

:root {
   --theme-base: "black-highlighter";
   --theme-id: "dark-p-r-i";
   --theme-name: "Dark P.R.I. Theme";
 
   --logo-image: url("https://s1.ax1x.com/2023/01/14/pSMUy1H.png");
   --header-title: "P. R. I.";
   --header-subtitle: "因探求而凝聚，因合作而共存";
 
   --body-font: punctuation-marks,proxima-nova, sans-serif;
   --header-font: 'CKTKingKong','uni_sansheavy_caps',  sans-serif;
   --title-font: 'CKTKingKong','uni_sansheavy_caps',  sans-serif;
   --mono-font: 'Fantasque Sans Mono', monospace;
 
   --white-monochrome: 240, 242, 242;
   --pale-gray-monochrome: 138, 166, 158;
   --light-gray-monochrome: 167, 217, 217;
   --very-light-gray-monochrome: var(--dark-gray-monochrome);
   --gray-monochrome: 101, 129, 140;
   --black-monochrome: 33, 37, 46;
   --bright-accent: 182, 219, 242;
   --dark-accent: 34, 50, 64;
   --medium-accent: 34, 68, 89;
   --pale-accent: 34, 68, 89;
 
   --swatch-topmenu-border-color: var(--dark-gray-monochrome);
   --swatch-topmenu-bg-color: var(--dark-gray-monochrome);
   --swatch-background: var(--dark-gray-monochrome);
   --swatch-text-general: var(--swatch-text-light);

   --link-color: var(--bright-accent);
   --hover-link-color: var(--white-monochrome);
    --visited-link-color: var(--bright-accent);
   --newpage-color: var(--light-gray-monochrome);
 
   --background-gradient-distance: 40rem;
 
   --gradient-header: linear-gradient(to bottom,
      rgba(var(--dark-accent)) 0%,
      rgba(var(--dark-gray-monochrome)) 7.5rem
   );

                  --gradient-topmenu: linear-gradient(
                  to bottom,
                  rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0) var(--header-height-on-desktop),
                        rgba(var(--dark-gray-monochrome),1) calc(var(--header-height-on-desktop) + 0.375rem),
                        rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--header-height-on-desktop) + 0.125rem),
                        rgba(var(--swatch-topmenu-bg-color), 0.95) calc(100% - 0.2rem),
                        rgba(var(--bright-accent), 1) calc(100% - 0.2rem),
                        rgba(var(--bright-accent), 1) 100%);
                  --gradient-topmenu-mobile: linear-gradient(
                  to bottom,
                        rgba(var(--dark-gray-monochrome),1) 0,
                        rgba(var(--swatch-topmenu-bg-color), 1) 0.125rem,
                        rgba(var(--swatch-topmenu-bg-color), 1) calc(var(--topbar-height-on-mobile) - 0.2rem),
                        rgba(var(--bright-accent), 1) calc(var(--topbar-height-on-mobile) - 0.2rem),
                        rgba(var(--bright-accent),1) var(--topbar-height-on-mobile));

                  --sidebar-transition-timing: 0.1s ease-in-out 0.1s;

}

@keyframes logo-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 0.4;
    }
}

@-webkit-keyframes logo-appear /* Safari and Chrome */
{
    from { top:-16rem;
        opacity: 0;
    }
    to { top:-0rem;
        opacity: 0.4;
    }
}

@keyframes top-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}

-webkit-@keyframes top-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}

@keyframes h1-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}

@-webkit-keyframes h1-appear /* Safari and Chrome */
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}

@keyframes h2-appear
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}

@-webkit-keyframes h2-appear /* Safari and Chrome */
{
    from {
        opacity: 0;}
    to {
        opacity: 1;
    }
}

@keyframes tab-disappear {
  0% { max-height: 9999rem; }
  1% { max-height: 100vh; }
  100% { max-height: 0; }
}
@keyframes tab-appear {
  0% { max-height: 0; }
  99% { max-height: 100vh; }
  100% { max-height: 9999rem; }
}

@-webkit-keyframes tab-disappear {
  0% { max-height: 9999rem; }
  1% { max-height: 100vh; }
  100% { max-height: 0; }
}
@-webkit-keyframes tab-appear {
  0% { max-height: 0; }
  99% { max-height: 100vh; }
  100% { max-height: 9999rem; }
}

body {
    background-color: rgba(var(--black-monochrome));
    max-width:100%!important;
}

#skrollr-body {
width: auto;
position: relative;
top: 0;
left: 0;
background-image: linear-gradient(
                  to bottom,
                  rgba(var(--dark-accent), 1),
                        rgba(var(--dark-gray-monochrome),1));
background-repeat: repeat-x;
background-size: cover;
background-position: center, center;
}

#top-bar{
   animation:top-appear 3s ease-in-out alternate;
   -webkit-animation:top-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}

#side-bar:hover,
#side-bar:active,
#side-bar:focus-within {
      background-color: rgb(var(--black-monochrome));
}
 
#side-bar .menu-item a, #side-bar:hover,
#side-bar:active,
#side-bar:focus-within a{
color:rgb(var(--white-monochrome))!important;
}

#header h1 a::before, #header h2 span::before {
   text-shadow: none;
}

#header::before {
   animation:logo-appear 3s ease-in-out  alternate;
   -webkit-animation:logo-appear 3s ease-in-out alternate; /*Safari and Chrome*/
   background-size: auto 8.5rem;
}

#header h1, #header h1 a {
   animation:h1-appear 3s ease-in-out  alternate;
   -webkit-animation:h1-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}
 
#header h2, #header h2 span, #header h2 span::before {
   animation:h2-appear 3s ease-in-out  alternate;
   -webkit-animation:h2-appear 3s ease-in-out alternate; /*Safari and Chrome*/
}

div.top-bar>ul>li>ul>li>a{
   transition: color 0.3s ease-out;
   -webkit-transition: color 0.3s ease-out;
}

div.top-bar>ul>li>ul>li>a:hover{
  color: rgb(var(--black-monochrome))!important;
}

#container {
  background-image: none;
}

#toc {
   background-color:rgb(var(--gray-monochrome));
   color:rgb(var(--white-monochrome));
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: none;
   padding: 0.5rem
}

#toc a {
   color: rgb(var(--swatch-menubg-medium-color));
}

#main-content a {
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
}

#page-title{
   text-align: center;
   color: rgb(var(--light-gray-monochrome));
   border-bottom: 5px solid rgb(var(--light-gray-monochrome));
}
 
#main-content h1 {
   color: rgb(var(--light-gray-monochrome));
   border-bottom: 5px 5px solid rgb(var(--light-gray-monochrome));
}

.code {
   background-color: rgb(var(--dark-gray-monochrome));
   border: none;
   border-left: 0.125rem rgb(var(--light-gray-monochrome))!important;
   box-shadow: none;
}

blockquote, div.blockquote {
   border: none;
   border-left: 0.125rem rgb(var(--light-gray-monochrome))!important;
   background-color: rgb(var(--dark-gray-monochrome));
}

.scp-image-caption {
    background-color: rgb(var(--gray-monochrome));
}

div.page-rate-widget-box, #page-content div.rate-box-with-credit-button, #page-content .creditButtonStandalone {
    border: none;
    border-left: 3px soild rgb(var(--light-gray-monochrome))!important;
    background-image: none;
    background-color:rgb(var(--light-gray-monochrome));
    box-shadow: none
}
 
.page-rate-widget-box span.rate-points {
   letter-spacing: -12px;
   color: transparent !important;
}
 
.page-rate-widget-box .rate-points:before, .page-rate-widget-box .rate-points span {
    content: "综合评分指数：";
    letter-spacing: 0;
    color: rgb(var(--black-monochrome));
}

table.wiki-content-table td,
table.wiki-content-table th,
table.wiki-content-table tr {
  border: .1rem solid rgb(var(--gray-monochrome)) !important;
  background-color:rgb(var(--dark-accent))!important;
}
 
table.wiki-content-table th {
  color:rgb(var(--black-monochrome))!important;
  background-color:rgb(var(--light-gray-monochrome))!important;
}

.scp-image-caption {
    background-color: rgb(var(--gray-monochrome))!important;
}

/* TABVIEW */

.yui-navset .yui-content {
   background-color:inherit;
   border:none;
   border-bottom: 0.3rem solid rgba(var(--bright-accent), 1);
}

/*未选择的tab*/
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
     background-color: rgba(var(--dark-accent), 1);
     color:rgb(var(--white-monochrome));
}
 
/*鼠标移上去的tab*/
.yui-navset .yui-nav a:hover,
.yui-navset .yui-nav a:focus {
     background-color: rgba(var(--dark-gray-monochrome), 1);
     color:rgb(var(--white-monochrome));
}
 
/*选了的tab*/
#page-content .yui-navset .yui-nav .selected,
#page-content .yui-navset .yui-navset-top .yui-nav .selected {
     background-color: rgba(var(--dark-gray-monochrone), 1);
}
 
#page-content .yui-navset .yui-nav .selected a:focus,
#page-content .yui-navset .yui-nav .selected a:active {
     background-color: rgba(var(--dark-gray-monochrome), 1);
}

.yui-navset .yui-content > div {
  padding: 0.25em 0.5em;
  display: block;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
}
 
#owindow{
     background-color: rgba(var(--dark-accent), 1);
    color:rgb(var(--white-monochrome));
}

#page-content .yui-navset .yui-content > div > * {
  transform-origin: 0 0;
}
 
#page-content .yui-navset .yui-content > div[style*="none"] {
  display: block !important;
  flex: 0;
  max-height: 0;
  padding: 0 0.5em;
  border-width: 0;
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s;
  animation: tab-disappear 1s ease-in-out 0s 1 both;
}
 
#page-content .yui-navset .yui-content > div[style*="block"] {
  display: block !important;
  flex: 1;
  max-height: 9999rem;
  transition: padding 0s linear 0.5s,
        border-width 0s linear 0.5s,
        flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s;
  animation: tab-appear 1s ease-in-out 0.5s 1 both;
}

.footnotes-footer {
    border-color:  rgb(var(--bright-accent));
}

.lightblock {
    background-color:rgb(var(--gray-monochrome));
}

.styled-quote {
    background-color:rgb(var(--gray-monochrome));
    border-left:0.2rem solid rgb(var(--bright-accent));
}

.darkblock {
   background-color:rgb(var(--dark-accent));
}

.dark-styled-quote {
   background-color:rgb(var(--dark-accent));
    border-left:0.2rem solid rgb(var(--bright-accent));
}

.titleblock {
   background-color:rgb(var(--gray-monochrome));
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border-top: solid rgb(var(--bright-accent)) 0.3rem;
}
 
.dark-titlebox{
  position: relative;
  top: -1.6rem;
  background-color:rgb(var(--gray-monochrome));
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
}
 
.dark-titleblock {
   background-color:rgb(var(--dark-accent));
   padding: 0.5rem 1rem 0.10rem;
   margin: 1.5rem 0rem 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border-top: solid rgb(var(--bright-accent)) 0.3rem;
}
 
.titlebox{
  position: relative;
  top: -1.6rem;
  background-color:rgb(var(--dark-accent));
  color: rgb(var(--white-monochrome));
  padding: 0.25rem 1rem;
  line-height: 0.1rem;
}
 
.glassblock {
   background-image: linear-gradient(-30deg,
      rgba(var(--bright-accent),.8) -80%,
      rgba(var(--white-monochrome),.4) 100%);
   border: solid rgb(var(--pale-accent)) 2px;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
}
 
.hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
}
 
.hoverblock:hover,.hoverblock:focus{
 box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
  transform: translateY(-.3em);
}
 
.light-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
}
 
.light-hoverblock:hover,.light-hoverblock:focus{
   background-color: rgb(var(--gray-monochrome));
   box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
 transform: translateY(-.3em);
}
 
.dark-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
}
 
.dark-hoverblock:hover,.dark-hoverblock:focus{
   background-color: rgb(var(--dark-accent));
   box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
 transform: translateY(-.3em);
}
 
.transparent-hoverblock{
   color:transparent;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
}
 
.transparent-hoverblock:hover,.transparent-hoverblock:focus{
   color: rgb(var(--white-monochrome));
   box-shadow: 0px 4px 10px 0 rgba(var(--bright-accent), .25);
 transform: translateY(-.3em);
}
 
.white-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out; /* Safari */
}
 
.white-hoverblock:hover,.white-hoverblock:focus{
   color: rgb(var(--black-monochrome));
   background-color: rgb(var(--white-monochrome));
   box-shadow: 0px 4px 10px 0 rgba(var(--white-monochrome), .25);
 transform: translateY(-.3em);
}
 
.white-hoverblock:hover a:hover{
   color: rgb(var(--black-monochrome));
}
 
.inset-hoverblock{
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
}
 
.inset-hoverblock:hover,.hoverblock:focus{
 box-shadow: inset 0px 4px 10px 0 rgba(var(--bright-accent), .25);
  transform: translateY(.3em);
}

.color{
min-height:90px;
}

.image-background {
   background-image: url(https://cicnsandbox.wikidot.com/local--files/component:destruction-sequence-agreement-css/body-url);
   border: solid rgb(89,47,46) 2px;
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0rem;
   box-shadow: 0px 0px 20px 0px rgba(var(--dark-accent), .25);
   filter: invert(85%);
   color: rgb(var(--black-monochrome));
}

.colors-container {
  width: 98%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  font-weight: 700;
  font-family: var(--title-font, Verdana);
  color: black;
}

.colors-container .colors, .colors-container .subcolors {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}

.colors-container .color {
  flex-grow: 2;
  padding: 0.5rem;
  margin: 0.5rem;
  color: rgb(var(--swatch-text-dark, 0, 0, 0));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.colors-container .colors .color {
  height: 7rem;
  min-width: 4rem;
  flex-basis: calc((100% / 2) - 2rem);
}

.colors-container .subcolors .color {
  height: 4rem;
  min-width: 4rem;
  font-size: 75%;
  text-align: center;
  flex-basis: calc((100% / 6) - 2rem);
}

.colors-container .css-variable {
  font-size: 75%;
  letter-spacing: 0.1em;
  font-family: var(--body-font, Verdana);
}

/* Hide a colour that's not been provided by seeing if the variable starts with "{$" */
.colors-container [data-variable^=\{\$] {
  display: none;
}

.colors-container [data-has-light-text="1"] {
  color: white;
  color: rgb(var(--swatch-text-light, 255, 255, 255));
}

.owindow, .title.modal-header {
    background-color: rgb(44 44 44);
    color: #ffffff;
}