@supports(--css: variables) {
:root:lang(zh) {
/* Header */
--logo-image: url("https://i.imgur.com/0SjByjV.png");
--header-title: "SCP基金會";
--header-subtitle: "安全續行於陽光之下";
/* Standard Colors */
--pale-accent: 255, 7, 7;
--bright-accent: 214, 0, 0;
--medium-accent: 119, 119, 119;
--dark-accent: 42, 42, 42;
/* Header Colors */
--header-gradient-color-bottom: 66, 66, 66;
--header-gradient-color-middle: var(--black-monochrome);
--header-gradient-color-top: var(--black-monochrome);
/* Primary Menu Colors */
--swatch-menubg-hover-color: var(--pale-accent);
/* Primary Header Colors */
--swatch-headerh2-color: var(--pale-accent);
--swatch-topmenu-border-color: var(--gray-monochrome);
--swatch-topmenu-bg-color: var(--very-light-gray-monochrome);
/* Link Colors */
--link-color: var(--swatch-primary);
--visited-link-color: var(--swatch-primary);
--hover-link-color: var(--pale-accent);
/* Ayer's Info Bar */
--barColour: rgb(var(--link-color));
}
/* Anchor Links */
a {
color: rgb(214, 0, 0);
color: rgb(var(--link-color));
}
a:visited {
color: rgb(214, 0, 0);
color: rgb(var(--visited-link-color));
}
a.newpage {
color: rgb(221, 102, 17);
color: rgb(var(--newpage-color));
}
a:hover {
color: rgb(255, 7, 7);
color: rgb(var(--hover-link-color));
}
/* Article Bottom Buttons */
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
background-color: rgba(119, 119, 119, 1);
background-color: rgba(var(--swatch-primary-darker), 1);
border-color: rgba(66, 66, 72, 1);
border-color: rgba(var(--swatch-menubg-medium-dark-color), 1);
}
div#page-options-bottom > a:hover,
div#page-options-bottom > a:active,
div#page-options-bottom-2 > a:hover,
div#page-options-bottom-2 > a:active {
background-color: rgba(214, 0, 0, 1);
background-color: rgba(var(--swatch-primary), 1);
border-color: rgba(66, 66, 72, 1);
border-color: rgba(var(--swatch-menubg-medium-dark-color), 1);
}
/* Header */
#header {
background-position: left 0.75rem top 1.1875rem;
background-size: auto -webkit-calc(var(--header-height-on-desktop) - 2.125rem);
background-size: auto -moz-calc(var(--header-height-on-desktop) - 2.125rem);
background-size: auto calc(var(--header-height-on-desktop) - 2.125rem);
}
#header h1 a,
#header h2 span {
margin-left: 11rem;
}
#search-top-box-form input[type="submit"],
#search-top-box-form input[type="submit"]:hover,
#search-top-box-form input[type="submit"]:focus {
background: rgb(214, 0, 0);
background: rgb(var(--swatch-primary));
}
/* Top-Bar */
#top-bar div.top-bar > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li:hover,
#top-bar div.top-bar > ul > li.sfhover,
#top-bar div.mobile-top-bar > ul > li.sfhover,
#top-bar div.top-bar > ul > li:focus-within,
#top-bar div.mobile-top-bar > ul > li:focus-within {
background-color: rgb(252, 252, 252);
background-color: rgb(var(--swatch-menubg-color));
}
#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(12, 12, 12);
color: rgb(var(--swatch-menutxt-dark-color));
}
#top-bar div.top-bar > ul > li > a::before,
#top-bar div.top-bar > ul > li > a::after,
#top-bar div.mobile-top-bar > ul > li > a::before,
#top-bar div.mobile-top-bar > ul > li > a::after {
width: 100%;
height: 0;
background-color: rgba(214, 0, 0, 0.75);
background-color: rgba(var(--swatch-primary), 0.75);
-webkit-transition-property: height;
-moz-transition-property: height;
-o-transition-property: height;
transition-property: height;
}
#top-bar div.top-bar > ul > li:hover > a::before,
#top-bar div.top-bar > ul > li:hover > a::after,
#top-bar div.top-bar > ul > li.sfhover > a::before,
#top-bar div.top-bar > ul > li.sfhover > a::after,
#top-bar div.top-bar > ul > li:focus-within > a::before,
#top-bar div.top-bar > ul > li:focus-within > a::after,
#top-bar div.mobile-top-bar > ul > li:hover > a::before,
#top-bar div.mobile-top-bar > ul > li:hover > a::after,
#top-bar div.mobile-top-bar > ul > li.sfhover > a::before,
#top-bar div.mobile-top-bar > ul > li.sfhover > a::after,
#top-bar div.mobile-top-bar > ul > li:focus-within > a::before,
#top-bar div.mobile-top-bar > ul > li:focus-within > a::after {
height: -webkit-calc(0.0625rem * 4);
height: -moz-calc(0.0625rem * 4);
height: calc(0.0625rem * 4);
}
#top-bar div.top-bar > ul > li > ul,
#top-bar div.mobile-top-bar > ul > li > ul {
background-color: rgba(252, 252, 252, 0.93);
background-color: rgba(var(--swatch-menubg-color), 0.93);
}
#top-bar div.top-bar > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover,
#top-bar div.top-bar > ul > li > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li > ul > li:hover {
background-color: transparent;
background-color: rgba(var(--pale-accent), 0.05);
}
#top-bar div.top-bar > ul > li > ul > li > a::before,
#top-bar div.top-bar > ul > li > ul > li > ul > li > a::before,
#top-bar div.top-bar > ul > li > ul > li > a:hover::before {
background-color: rgba(255, 7, 7, 0.7);
background-color: rgba(var(--pale-accent), 0.7);
}
/* Side-Bar */
#side-bar div.menu-item a::before,
#side-bar div.menu-item a:hover::before {
background-color: rgba(255, 7, 7, 0.7);
background-color: rgba(var(--pale-accent), 0.7);
}
/* Blockquote */
.gray1 blockquote,
.gray2 blockquote {
margin: 1em 0;
border: 0.1875rem solid rgb(var(--bright-accent));
border-radius: 0.625rem;
}
.gray1 blockquote {
background-color: rgb(244, 244, 244);
}
.gray2 blockquote {
background-color: rgb(232, 232, 232);
}
/* Flashing Lights */
div#extra-div-1,
div#extra-div-2 {
position: absolute;
top: 2.5rem;
width: 6rem;
height: 1rem;
border-radius: 0.0625rem;
}
div#extra-div-1 {
--light-on: -1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 1rem 0.0625rem 4rem rgba(255, 0, 0, 1), 0 0.0625rem 1.5rem rgba(255, 0, 0, 1) inset;
--light-off: -0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(255, 0, 0, 0.2), 0 0.0625rem 0.125rem rgba(255, 0, 0, 0.2) inset;
left: 55%;
background-color: rgba(255, 0, 0, 0.75);
-webkit-animation: flash-1 1s infinite;
-moz-animation: flash-1 1s infinite;
-o-animation: flash-1 1s infinite;
animation: flash-1 1s infinite;
}
@keyframes flash-1 {
0% {
opacity: 0.2;
box-shadow: var(--light-off);
}
12.5% {
opacity: 1;
box-shadow: var(--light-on);
}
25% {
opacity: 0.2;
box-shadow: var(--light-off);
}
37.5% {
opacity: 1;
box-shadow: var(--light-on);
}
50% {
opacity: 0.2;
box-shadow: var(--light-off);
}
100% {
opacity: 0.2;
box-shadow: var(--light-off);
}
}
div#extra-div-2 {
--light-on: -1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 1rem 0.0625rem 4rem rgba(0, 0, 255, 1), 0 0.0625rem 1.5rem rgba(0, 0, 255, 1) inset;
--light-off: -0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0.0625rem 0.0625rem 0.375rem rgba(0, 0, 255, 0.2), 0 0.0625rem 0.125rem rgba(0, 0, 255, 0.2) inset;
left: -webkit-calc(55% + 6.25rem);
left: -moz-calc(55% + 6.25rem);
left: calc(55% + 6.25rem);
background-color: rgba(0, 0, 255, 0.75);
-webkit-animation: flash-2 1s infinite;
-moz-animation: flash-2 1s infinite;
-o-animation: flash-2 1s infinite;
animation: flash-2 1s infinite;
}
@keyframes flash-2 {
0% {
opacity: 0.2;
box-shadow: var(--light-off);
}
50% {
opacity: 0.2;
box-shadow: var(--light-off);
}
62.5% {
opacity: 1;
box-shadow: var(--light-on);
}
75% {
opacity: 0.2;
box-shadow: var(--light-off);
}
87.5% {
opacity: 1;
box-shadow: var(--light-on);
}
100% {
opacity: 0.2;
box-shadow: var(--light-off);
}
}
/* Mobile */
@media only screen and (max-width: 768px) {
#top-bar div.top-bar > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li:hover,
#top-bar div.top-bar > ul > li > ul > li > ul > li:hover,
#top-bar div.mobile-top-bar > ul > li > ul > li > ul > li:hover {
background-color: rgba(255, 7, 7, 0.7);
background-color: rgba(var(--pale-accent), 0.7);
}
/* Mobile Search */
#search-top-box form[id="search-top-box-form"] input[type="submit"] {
background-color: rgb(214, 0, 0);
background-color: rgb(var(--swatch-primary));
}
/* Flashing Lights */
div#extra-div-1 {
max-width: -webkit-calc(100vw - 55%);
max-width: -moz-calc(100vw - 55%);
max-width: calc(100vw - 55%);
}
div#extra-div-2 {
max-width: -webkit-calc(100vw - 55% - 6.25rem);
max-width: -moz-calc(100vw - 55% - 6.25rem);
max-width: calc(100vw - 55% - 6.25rem);
}
}
@media only screen and (max-width: 400px) {
#header h1 a,
#header h2 span {
margin-left: 10rem;
}
}
}
