@import url('https://fonts.googleapis.com/css?family=Basic|IBM+Plex+Mono:400,700');
@supports(--css: variables) {
:root {
/* Typefaces */
--body-font: 'IBM Plex Mono', 'Hiragino Kaku Gothic ProN', Meiryo, monospace;
--header-font: 'IBM Plex Mono', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
--title-font: 'IBM Plex Mono', 'Hiragino Kaku Gothic ProN', Meiryo, monospace;
--mono-font: "IBM Plex Mono", 'Hiragino Kaku Gothic ProN', Meiryo, monospace;
/* Standard Colors */
--white-monochrome: 238, 238, 216;
--pale-gray-monochrome: 233, 231, 204;
--light-gray-monochrome: 147, 147, 147;
--gray-monochrome: 127, 127, 127;
--dark-gray-monochrome: 101, 101, 101;
--black-monochrome: 25, 20, 16;
--bright-accent: 145, 179, 153;
--medium-accent: 145, 179, 153;
--dark-accent: 105, 133, 111;
--swatch-text-general: var(--swatch-text-dark);
--logo-image: url("http://scp-jp.wdfiles.com/local--files/theme%3Ascp-offices-theme/scpoffices_logo.svg");
--background-gradient-color: 215, 215, 215;
--background-gradient-distance: 40rem;
/* Link Colors */
--link-color: var(--bright-accent);
--visited-link-color: var(--dark-accent);
--hover-link-color: var(--dark-accent);
--newpage-color: 221, 102, 17;
scrollbar-color: rgba(var(--white-monochrome), 1) rgba(var(--bright-accent), 0.50);
}
#container-wrap-wrap {
background-image:
-webkit-repeating-linear-gradient(top,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),
-webkit-linear-gradient(top,
rgba(var(--black-monochrome), 1) var(--header-height-on-desktop),
rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--gray-monochrome), 1) -webkit-calc(100% - 0.125rem),
rgba(var(--gray-monochrome), 1) -webkit-calc(100% - 0.125rem),
rgba(var(--black-monochrome), 1) 100%);
background-image:
-moz-repeating-linear-gradient(top,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),
-moz-linear-gradient(top,
rgba(var(--black-monochrome), 1) var(--header-height-on-desktop),
rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--gray-monochrome), 1) -moz-calc(100% - 0.125rem),
rgba(var(--gray-monochrome), 1) -moz-calc(100% - 0.125rem),
rgba(var(--black-monochrome), 1) 100%);
background-image:
repeating-linear-gradient(180deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),
-webkit-gradient(linear,
left top, left bottom,
color-stop(var(--header-height-on-desktop), rgba(var(--black-monochrome), 1)),
color-stop(calc(var(--header-height-on-desktop) + 0.125rem), rgba(var(--gray-monochrome), 1)),
color-stop(rgba(var(--gray-monochrome), 1)),
color-stop(rgba(var(--gray-monochrome), 1)),
to(rgba(var(--black-monochrome), 1)));
background-image:
-o-repeating-linear-gradient(top,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),
-o-linear-gradient(top,
rgba(var(--black-monochrome), 1) var(--header-height-on-desktop),
rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
rgba(var(--black-monochrome), 1) 100%);
background-image:
repeating-linear-gradient(180deg,
hsla(0, 0%, 100%, 0),
hsla(0, 0%, 100%, 0) 0.25vh,
rgba(88, 88, 88, 0.1) 0.35vh,
rgba(88, 88, 88, 0.2) 0.5vh),
linear-gradient(to bottom,
rgba(var(--black-monochrome), 1) var(--header-height-on-desktop),
rgba(var(--gray-monochrome), 1) calc(var(--header-height-on-desktop) + 0.125rem),
rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem),
rgba(var(--black-monochrome), 1) 100%);
-webkit-background-size: 100% var(--header-height-on-desktop), 100% 9.375rem;
-moz-background-size: 100% var(--header-height-on-desktop), 100% 9.375rem;
-o-background-size: 100% var(--header-height-on-desktop), 100% 9.375rem;
background-size: 100% var(--header-height-on-desktop), 100% 9.375rem;
background-repeat: no-repeat;
}
#skrollr-body {}
a {
--wght: 900;
font-weight: 900;
}
#header h2 span::before {
color: rgb(var(--bright-accent));
}
#header h1 *,
#top-bar *,
#page-title * {
will-change: opacity;
-webkit-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
#header h1 a:hover::before,
#top-bar a:hover,
#page-title:hover,
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
-webkit-animation: flicker 20s linear infinite;
-moz-animation: flicker 20s linear infinite;
-o-animation: flicker 20s linear infinite;
animation: flicker 20s linear infinite;
}
#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;
}
#search-top-box-form input[type="submit"] {
background: rgb(var(--bright-accent)) !important;
}
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
background: rgb(var(--dark-accent)) !important;
}
#side-bar img {
display: none;
}
#side-bar .collapsible-block-unfolded {
background: unset;
}
#side-bar div.menu-item a.collapsible-block-link,
#side-bar .side-block>.collapsible-block a.collapsible-block-link {
background: rgba(var(--medium-accent),0.5);
}
#side-bar .close-menu::before {
line-height: 0.85em !important;
}
#side-bar div.menu-item a,
#side-bar div.menu-item .text {
--wght: 900;
font-weight: 900;
}
#side-bar div.menu-item a:hover {
-webkit-animation: flicker 20s linear infinite;
-moz-animation: flicker 20s linear infinite;
-o-animation: flicker 20s linear infinite;
animation: flicker 20s linear infinite;
}
.page-rate-widget-box {
background:
-webkit-gradient(linear,
left top, left bottom,
from(rgb(var(--bright-accent))),
color-stop(30%, rgb(var(--dark-accent))),
to(rgb(var(--dark-accent)))) !important;
background:
-webkit-linear-gradient(top,
rgb(var(--bright-accent)) 0%,
rgb(var(--dark-accent)) 30%,
rgb(var(--dark-accent)) 100%) !important;
background:
-moz-linear-gradient(top,
rgb(var(--bright-accent)) 0%,
rgb(var(--dark-accent)) 30%,
rgb(var(--dark-accent)) 100%) !important;
background:
-o-linear-gradient(top,
rgb(var(--bright-accent)) 0%,
rgb(var(--dark-accent)) 30%,
rgb(var(--dark-accent)) 100%) !important;
background:
linear-gradient(to bottom,
rgb(var(--bright-accent)) 0%,
rgb(var(--dark-accent)) 30%,
rgb(var(--dark-accent)) 100%) !important;
}
.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(--white-monochrome));
mix-blend-mode: unset;
-webkit-transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.page-rate-widget-box > span.rate-points:hover,
.page-rate-widget-box > span.rate-points:active {
color: rgb(var(--white-monochrome)) !important;
mix-blend-mode: unset !important;
}
.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 {
color: rgb(var(--black-monochrome));
-webkit-animation: flicker 20s linear infinite;
-moz-animation: flicker 20s linear infinite;
-o-animation: flicker 20s linear infinite;
animation: flicker 20s linear infinite;
}
.info-container .collapsible-block-folded,
.info-container .collapsible-block-unfolded-link {
background: rgb(var(--bright-accent))!important;
}
iframe.scpnet-interwiki-frame {
-webkit-filter: invert(0.8) hue-rotate(-40deg) saturate(0.2);
filter: invert(0.8) hue-rotate(-40deg) saturate(0.2);
}
@media only screen and (max-width: 768px) {
#header {
background-position: left -webkit-calc(5vw + 5.5rem - 10.4rem) top -webkit-calc(4% - var(--offset-from-page-top) / 2),top center;
background-position: left -moz-calc(5vw + 5.5rem - 10.4rem) top -moz-calc(4% - var(--offset-from-page-top) / 2),top center;
background-position: left calc(5vw + 5.5rem - 10.4rem) top calc(4% - var(--offset-from-page-top) / 2),top center;
-webkit-background-size: -webkit-calc(8.75rem + var(--offset-from-page-top)),100% var(--header-height-on-desktop);
-moz-background-size: -moz-calc(8.75rem + var(--offset-from-page-top)),100% var(--header-height-on-desktop);
-o-background-size: calc(8.75rem + var(--offset-from-page-top)),100% var(--header-height-on-desktop);
background-size: calc(8.75rem + var(--offset-from-page-top)),100% var(--header-height-on-desktop);
background-repeat: no-repeat,repeat;
}
}
@-webkit-keyframes flicker {
0% {
opacity: .2;
}
5% {
opacity: .9;
}
6% {
opacity: 1;
}
11% {
opacity: .4;
}
11.25% {
opacity: .6;
}
11.5% {
opacity: .4;
}
18% {
opacity: 1;
}
18.5% {
opacity: .9;
}
22% {
opacity: 1;
}
38.5% {
opacity: 1;
}
39% {
opacity: .8;
}
42% {
opacity: 1;
}
60% {
opacity: 1;
}
60.5% {
opacity: 0;
}
62% {
opacity: 0;
}
63% {
opacity: .2;
}
63.25% {
opacity: 0;
}
65% {
opacity: 1;
}
73% {
opacity: 1;
}
75% {
opacity: .8;
}
79% {
opacity: 1;
}
100% {
opacity: 1;
}
}
}
