SCP基金会

@importurl('https://fonts.googleapis.com/css2?family=Nixie+One&display=swap');
@importurl('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@importurl('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
 
:root{
 --body-bg:225, 225, 225;
 --content-bg: var(--global-white-color);
 --bg-opacity:0.9;
 
 --extra-bg-1: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
 --extra-bg-2: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
 --extra-bg-3: url(https://imagebed.pro/images/Liurd/n2QIoY5r1F.svg);
 --extra-opacity-1:0.15;
 --extra-opacity-2:0.05;
 --extra-opacity-3:0.05;
 
 --topbar-hover-bg: var(--dark-ui-bg), 0.2;
 --topbar-hover-txt: var(--light-ui-txt);
 
 --user-drop-txt: var(--dark-ui-txt);
 
 --bottombar-bg: var(--dark-ui-bg);
 --bottombar-txt: var(--dark-ui-txt);
 
 --header-title: "SCP 基金会";
 
 --banner-title: "FOUNDATION";
 --banner-subtitle: "当色彩褪去的时候";
 
 --header-height:3rem;
 --topbar-height:2.5rem;
 --dropdown-height: var(--topbar-height);
 --banner-height:25rem;
 
 --header-ui-size:3rem;
 
 --header-title-size:1.8rem;
 --topbar-size: clamp(0.8em, calc(0.4rem + 0.8vw), 1em);
 --banner-title-size: clamp(2rem, calc(2rem + 3.5vw), 6rem);
 --banner-subtitle-size:1rem;
 
 --banner-font: "Nixie One", "Noto Serif SC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, serif;
 --header-font: var(--banner-font);
 --title-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Franklin Gothic Medium, Franklin Gothic, ITC Franklin Gothic, Arial, sans-serif;
 --body-font: "Atkinson Hyperlegible", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
 --ui-font: "Outfit", "Noto Sans SC", "Noto Sans TC", Arimo, Verdana, Geneva, sans-serif;
}#extra-div-1{position:fixed;
 width:100%;
 height:25vh;
 bottom:0;
 left:0;
 z-index: -1;
 background-image: var(--extra-bg-1);
 background-size:20rem;
 background-repeat:repeat-x;
 background-position:center;
 opacity: var(--extra-opacity-1);
}#extra-div-2{position:fixed;
 width:100%;
 height:50vh;
 bottom:0;
 left:0;
 z-index: -2;
 background-image: var(--extra-bg-2);
 background-size:40rem;
 background-repeat:repeat-x;
 background-position:center;
 opacity: var(--extra-opacity-2);
}#extra-div-3{position:fixed;
 width:100%;
 height:100vh;
 bottom:0;
 left:0;
 z-index: -3;
 background-image: var(--extra-bg-3);
 background-size: contain;
 background-repeat:repeat-x;
 background-position:bottom;
 opacity: var(--extra-opacity-3);
}#container{display: grid;
 grid-template-columns: minmax(var(--sidebar-width), 1fr)auto1fr;
 grid-template-rows:autoautoautoauto;
}#extrac-div-1{grid-column:2 / 3;
 grid-row:1 / 2;
 display: flex;
 flex-direction: column;
 justify-content:center;
 align-items:center;
 font-family: var(--banner-font);
 font-weight:200;
 width:100%;
 height: var(--banner-height);
 color: rgb(var(--header-txt));
 order: -1;
}#extrac-div-1::before{content: var(--banner-title);
 font-size: var(--banner-title-size);
}#extrac-div-1::after{content: var(--banner-subtitle);
 font-size: var(--banner-subtitle-size);
}#header{grid-column:1 / 2;
 grid-row:1 / 3;
 min-width: var(--sidebar-width);
 width:100%;
 height: fit-content;
 grid-template-columns: var(--header-ui-size) 1fr autoauto;
 grid-template-rows: var(--header-ui-size) calc(var(--banner-height) - var(--header-ui-size)) auto;
 top: calc(0px - var(--banner-height));
 order: -2;
}#search-top-box{grid-column:3 / 4;
 position:fixed;
 right: var(--header-ui-size);
 backdrop-filter: blur(1rem);
}#login-status{grid-column:4 / 5;
 position:fixed;
 right:0;
 backdrop-filter: blur(1rem);
}#headerh1{grid-column:2 / 3;
 grid-row:1 / 2;
 height: var(--header-height);
 position:static;
}#headerh1a{justify-content: flex-start;
 padding:0;
 padding-left:0.5rem;
 transition: padding var(--global-duration);
}#headerh1a:is(:hover, :focus) {padding-left:1rem;
 transition: padding var(--global-hover-duration);
}#headerh2{display:none;
}#header-extra-div-1{display:none;
}#top-bar{grid-column:1 / 5;
 grid-row:3 / 4;
 height:auto;
}#top-bar > div > ul{flex-direction: column;
 height:auto;
 margin-right:0;
}#top-bar > div > ul > li{flex-basis: unset;
 height: var(--topbar-height);
}#top-bar > div > ul > li > a{justify-content: flex-end;
 padding:01rem;
}#top-bar > div > ul > :is(li, li:last-of-type) > ul{top:0;
 left:100%;
 width:32em;
 max-width: max-content;
 min-width:auto;
 flex-direction: row;
 flex-wrap: wrap;
}#top-bar > div > ul > li > ul > li{width:50%;
 flex-grow:1;
}#top-bar > div > ul > :is(li, li:hover, li:focus, li.sfhover, li:focus-within) > ul > li > a{box-sizing: border-box;
}#content-wrap{display: contents;
}#side-bar{max-height: unset;
 overflow-y:auto;
 border: unset;
 box-shadow:001.5rem -1rem rgb(var(--global-dark-color));
}#side-bar::after{backdrop-filter: blur(1rem);
}#main-content{grid-column:2 / 3;
 grid-row:2 / 3;
 min-height:100vh;
 box-sizing: border-box;
 margin:0auto15vh;
 padding:1.5rem;
 box-shadow:002.5rem -1rem rgb(var(--global-dark-color));
 position:relative;
 background: rgba(var(--content-bg), var(--bg-opacity));
}#main-content::after{content: "控制,收容,保护.";
 display: flex;
 align-items:center;
 justify-content:center;
 position:absolute;
 top:100%;
 left:0;
 width:100%;
 height:10vh;
 color: rgb(var(--header-txt));
 font-family: var(--banner-font);
 font-weight:200;
}#page-title{padding:0;
}:is(blockquote, .blockquote, div.blockquote, [class*=blockquote]) {padding:0.5rem 1rem;
 border-width:0000.3rem;
 background: rgba(var(--light-block-bg), 0.4);
}#page-options-container{font-family: var(--ui-font);
}#footer{grid-column:1 / 4;
 grid-row:3 / 4;
 box-sizing: border-box;
 justify-content: flex-end;
 margin-top:0.5rem;
 border: unset;
}#license-area{grid-column:1 / 4;
 grid-row:4 / 5;
 padding:0.5rem;
 justify-content: flex-end;
}#license-areaa{color: rgb(var(--global-pale-color));
}@mediaonlyscreenand (max-width: 1024px) {#container-wrap{perspective-origin:49.5%5rem;
 }#container{display: flex;
 }#header{min-width: var(--sidebar-width);
 grid-template-columns: var(--header-ui-size) 1fr autoauto;
 grid-template-rows: var(--header-ui-size) autoauto;
 top:0;
 width: initial;
 position:static;
 }#content-wrap{display:block;
 margin:0;
 }#login-status{position:relative;
 backdrop-filter: unset;
 }#search-top-box{position:static;
 backdrop-filter: unset;
 }#login-status#account-options{left: initial;
 right:0;
 }#top-bar > div > ul{flex-direction: row;
 margin-right:auto;
 }#top-bar > div > ul > li{flex-basis: min-content;
 }#top-bar > div > ul > li > a{justify-content:center;
 padding:0;
 }#top-bar > div > ul > :is(li, li:last-of-type) > ul {
 top: 100%;
 left:0;
 width:auto;
 flex-direction: column;
 }#top-bar > div > ul > li:last-of-type > ul{left: initial;
 right:0;
 }#top-bar > div > ul > li > ul > li{width:100%;
 flex-grow:1;
 }
}
 
@mediaonlyscreenand (max-width: 768px) {#top-bar > div > ul > :is(li, li:last-of-type) > ul {
 flex-direction: row;
 }#top-bar > div > ul > li > ul > li{width:50%;
 }
}