무제 1
@supports(display: grid) { :root { --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19); --body-width-on-desktop: 45.75rem; } @media only screen and (min-width: 769px) { #side-bar .close-menu { display: block; position: fixed; top: 0.25rem; left: 0.5rem; width: 3rem; opacity: 1; pointer-events: all; z-index: -1; } #side-bar .close-menu img { color: transparent; } #side-bar .close-menu::before, #side-bar .close-menu::after { content: ""; box-sizing: border-box; position: fixed; display: block; top: 0.5rem; left: 0.5rem; width: 3rem; height: 3rem; padding: 0; margin: 0; text-align: center; pointer-events: all; cursor: pointer; transition: opacity var(--sidebar-transition-timing); } #side-bar .close-menu::before { --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.1 0 2-.9 2-2s-.9-2-2-2H4c-1.1 0-2 .9-2 2s.9 2 2 2zm24 4H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2zm0 8H4c-1.1 0-2 .9-2 2s.9 2 2 2h24c1.1 0 2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E"); z-index: -1; background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important; -webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 60%; mask-size: 60%; } #side-bar .close-menu::after { z-index: -2; background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important; border-radius: var(--toggle-roundness, 50%); border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid; } #side-bar:focus-within .close-menu::before, #side-bar:focus-within .close-menu::after { opacity: 0; } #side-bar { display: block; position: fixed; top: 0; left: calc(var(--sidebar-width-on-desktop)*-1); z-index: 10; transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; height: 100%; overflow-y: auto; overflow-x: hidden; margin-top: 0; } #side-bar:focus-within { left: 0; } #side-bar .side-block { margin-top: 1rem; background-color: rgb(0, 0, 0, 0); border-radius: 0; border-left-width: 0px; border-right-width: 0px; } #main-content::before { content: ""; display: block; position: fixed; top: 0; right: 0; z-index: -1; opacity: 0; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; margin-left: var(--sidebar-width-on-desktop); background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat; padding-right: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 99; } #side-bar:focus-within~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } #content-wrap { display: flex; flex-direction: row; width: calc(100vw - (100vw - 100%)); min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem))); flex-grow: 2; height: auto; position: relative; margin: 0 auto; max-width: inherit; } #main-content { width: 100%; position: initial; max-height: 100%; padding: 2rem 1rem; width: var(--body-width-on-desktop, 45.75rem); max-width: var(--body-width-on-desktop, 45.75rem); margin: 0 auto; } #page-content { max-width: min(90vw, var(--body-width-on-desktop, 45.75rem)); } @media not all and (-webkit-min-device-pixel-ratio:0), not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { #side-bar { transition: left 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms, background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; padding-right: 0; background-color: rgb(0, 0, 0, 0); pointer-events: all; overflow-x: visible; overflow-y: visible; z-index: 999; } #side-bar::-webkit-scrollbar { opacity: 0; -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms; } #side-bar .close-menu::before { z-index: 999; } #side-bar .close-menu::after { z-index: 998; } #side-bar:hover .close-menu::before { opacity: 0; } #side-bar:hover { left: 0; background-color: rgba(var(--swatch-menubg-color), 1); padding-right: 0; } #side-bar:hover::-webkit-scrollbar { opacity: 1; } #side-bar:hover~#main-content::before { width: calc(100% - var(--sidebar-width-on-desktop)); opacity: 1; pointer-events: all; } } } } }
@supports(display: grid) { :root { /* header measurements */ --header-height-on-desktop: 10rem; --header-height-on-mobile: 10rem; --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem); --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem); } #header { --search-textbox-text-color: var(--swatch-secondary-color); background: none; } #header::before { content: " "; position: absolute; width: 100%; height: 100%; left: 0; top: 0.75rem; background-image: var(--logo-image); background-repeat: no-repeat; background-position: center 0; background-size: auto calc(var(--header-height-on-desktop) - 1.5rem); opacity: 0.8; pointer-events: none; } #header h1, #header h2 { margin: 0; padding: 0; width: 100%; height: var(--header-height-on-desktop); display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center; } #header h1 a, #header h1 a::before, #header h2 span, #header h2 span::before { margin: 0; padding: 0; z-index: 0; display: block; text-align: center; } #header h1 { z-index: 1; } #header h1 a::before, #header h1 a::after { content: var(--header-title); } #header h1 a::before { color: rgb(var(--swatch-text-tertiary-color)); z-index: -1; -webkit-text-stroke: 0.325rem rgb(var(--swatch-text-dark)); } #header h1 a::after { color: rgb(var(--swatch-headerh1-color)); z-index: 1; } #header h2 { z-index: 0; text-transform: uppercase; pointer-events: none; } #header h2 span { margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/2 - 2em); } #header h2 span::before, #header h2 span::after { --wght: 600; content: var(--header-subtitle); position: absolute; left: 50%; transform: translateY(-50%) translateX(-50%); width: 100%; text-align: center; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-dark)); } #header h2 span::after { color: rgb(var(--swatch-headerh2-color)); z-index: 1; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { color: rgba(0, 0, 0, 0); } @media (min-width: 36rem) { #login-status { flex-grow: 1; left: 3%; right: initial; } #login-status::before { --mask-image: none; background-color: transparent; } #login-status:not(:focus-within) { color: rgb(var(--login-line-divider-color)); -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; } #login-status #account-topbutton, #login-status:not(:focus-within) #account-topbutton { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgba(var(--login-arrow-color), 0); } #login-status #account-topbutton::before{ --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--login-arrow-color), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton::before, #login-status:not(:focus-within) #account-topbutton:hover::before { --clip-path: polygon( 30% 35%, 70% 35%, 50% 60%, 50% 60% ); --mask-image: initial; } #login-status:not(:focus-within) #account-topbutton::after { display: none; } #login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); pointer-events: all; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) { opacity: 1; } #login-status #my-account { --wght: 300; } #account-options { background: var(--gradient-header); } #search-top-box { top: 1.5em; right: 3%; background: rgba(var(--search-focus-textbox-bg-color), 0.4); box-shadow: calc(var(--search-height) / 2 * -1) 0 calc(var(--search-height) / 2) rgba(var(--search-focus-textbox-bg-color), 0.4); } #search-top-box:focus-within ~ #login-status { opacity: 1; } #search-top-box::after { transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1); } #search-top-box:not(:focus-within)::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0% 100% ); background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1); -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); } #search-top-box:not(:focus-within):hover::after { --clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100% ); background-color: rgb(var(--search-icon-hover-bg-color)); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) { max-width: var(--search-width); } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] { max-width: var(--search-width); padding: 0 var(--search-height) 0 1em; outline-width: 0; background-color: rgb(var(--search-focus-textbox-bg-color), 0.35); color: rgba(var(--search-textbox-text-color), 0.4); cursor: pointer; } #search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="submit"], #search-top-box form[id="search-top-box-form"]:focus-within input[type="submit"] { pointer-events: all; border: none; } } #page-title::after, .meta-title::after, #page-title::before, .meta-title::before { content: ""; flex-grow: 1; height: 0.0625rem; background: rgb(var(--swatch-primary)); } #page-title::before, .meta-title::before { margin: auto 1.25rem auto auto; } }
@import url("https://use.typekit.net/afb2wxe.css"); @supports(display: grid) { :root { /* S-CSS-P Integration */ /* If you're making a new CSS theme, please include the following three variables at minimum. */ --theme-base: "black-highlighter"; /* must be either "black-highlighter" or "sigma9" */ --theme-id: "AESTHETIC-theme"; /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */ --theme-name: "AESTHETIC Theme"; /* set this to your theme's full name */ /* Header */ --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:aesthetic-theme/AESTHETIC_logo.svg"); /* Typefaces */ --body-font: prenton, serif; --header-font: flood-std, sans-serif; --title-font: eurostile-extended, sans-serif; /* Standard Colors */ --white-monochrome: 217, 233, 251; --pale-gray-monochrome: 1, 245, 252; --light-pale-gray-monochrome: 170, 207, 251; --very-light-gray-monochrome: 26, 139, 235; --light-gray-monochrome: 150, 62, 184; --gray-monochrome: 92, 42, 95; --dark-gray-monochrome: 39, 6, 75; --black-monochrome: 14, 12, 45; --bright-accent: 250, 245, 45; --pale-accent: var(--pale-gray-monochrome); --medium-accent: 255, 52, 131; --dark-accent: 195, 42, 158; --newpage-color: 204, 5, 166; --swatch-text-general: var(--swatch-text-light); --swatch-menutxt-general-color: var(--swatch-menutxt-light-color); --ui-wght: 700; --ui-hvr-wght: 900; /* ===SECONDARY & TERTIARY COLORS=== */ /* Editing these will edit a vast majority of theme elements. Useful for making dark themes */ /* Colors for Secondary & Tertiary items like Blockquote and YUI Tabs */ --swatch-secondary-color: var(--swatch-menubg-dark-color); --swatch-tertiary-color: var(--swatch-menubg-light-color); --swatch-alternate-color: var(--swatch-primary); /* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */ --swatch-text-secondary-color: var(--swatch-menutxt-dark-color); --swatch-text-tertiary-color: var(--swatch-menutxt-light-color); --swatch-headerh2-color: var(--dark-gray-monochrome); --swatch-topmenu-border-color: var(--pale-gray-monochrome); --swatch-topmenu-bg-color: var(--dark-gray-monochrome); /* ===MENU BACKGROUND COLORS=== */ --swatch-menubg-color: var(--black-monochrome); --swatch-border-color: var(--pale-gray-monochrome); --rating-module-text-color: var(--bright-accent); --rating-module-button-color: var(--bright-accent); --swatch-background: var(--black-monochrome, 14, 12, 45); --background-gradient-color: var(--dark-accent); --header-gradient-color-bottom: var(--light-gray-monochrome); --header-gradient-color-middle: var(--dark-accent); --header-gradient-color-top: var(--medium-accent); --gradient-header: linear-gradient(355deg, rgb(var(--header-gradient-color-bottom)) 0%, rgb(var(--header-gradient-color-middle)) 20%, rgb(var(--header-gradient-color-top)) 100%); --rating-module-text-color: var(--dark-gray-monochrome); --rating-module-button-color: var(--dark-gray-monochrome); /* ===HEADER TITLE FONT SIZES=== */ --header-h1-font-size: calc(var(--base-font-size) * 3.5); --header-h2-font-size: calc(var(--base-font-size) * 0.8); --scrollbar-width: 0.5rem; } #header { /* ===HEADER ELEMENTS=== */ /* ===SEARCH ELEMENT=== */ --search-icon-color: var(--swatch-primary); --search-icon-bg-color: var(--black-monochrome); --search-icon-hover-color: var(--swatch-primary); --search-icon-hover-bg-color: var(--swatch-primary); --search-icon-focus-color: var(--black-monochrome); --search-icon-focus-bg-color: var(--medium-accent); --search-focus-outline-color: var(--medium-accent); --search-textbox-text-color: var(--swatch-text-tertiary-color); --search-focus-textbox-text-color: var(--swatch-text-secondary-color); } #top-bar { /* ===TOPBAR ELEMENTS=== */ /* ===TOPBAR CATEGORIES=== */ --topmenu-category-color: var(--bright-accent); --topmenu-category-hover-color: var(--bright-accent); --mobile-topmenu-sidebar-button-color: var(--bright-accent); /* ===DROPDOWN MENU=== */ --dropdown-bg-color: var(--swatch-secondary-color), 0.8; --dropdown-links-color: var(--swatch-text-tertiary-color); --dropdown-links-hover-color: var(--swatch-text-secondary-color); } #side-bar { /* ===SIDE-BAR ELEMENTS=== */ /* ===SIDE-BAR GENERAL=== */ --sidebar-resources-bg-color: 0, 0, 0, 0; --sidebar-media-bg-color: 0, 0, 0, 0; /* ===SIDEBLOCK MENU=== */ --sideblock-bg-color: 0, 0, 0, 0; /* Transparent */ /* ===MENU-ITEMS=== */ --sidebar-links-text: var(--swatch-primary); --sidebar-links-hover-bg-color: var(--medium-accent); --sidebar-links-hover-text-color: var(--swatch-text-secondary-color); } #license-area { --license-link-hover-color: var(--swatch-text-secondary-color); } ::-moz-selection { background: rgb(var(--pale-gray-monochrome)); color: rgb(var(--black-monochrome)); } ::selection { background: rgb(var(--pale-gray-monochrome)); color: rgb(var(--black-monochrome)); } html { background: white; } html, body { font-feature-settings: "onum"0; font-variant-numeric: tabular-nums; } #extra-div-1 { --outrun-lines: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 645' overflow='visible' xml:space='preserve'%3E%3Cg id='Outrun_Lines'%3E%3Crect width='100' height='60'/%3E%3Crect y='63' width='100' height='12'/%3E%3Crect y='78' width='100' height='13'/%3E%3Crect y='94' width='100' height='12'/%3E%3Crect y='109' width='100' height='13'/%3E%3Crect y='125' width='100' height='12'/%3E%3Crect y='141' width='100' height='12'/%3E%3Crect y='157' width='100' height='12'/%3E%3Crect y='172' width='100' height='12'/%3E%3Crect y='187' width='100' height='12'/%3E%3Crect y='203' width='100' height='12'/%3E%3Crect y='219.5' width='100' height='11'/%3E%3Crect y='234.5' width='100' height='11'/%3E%3Crect y='249.5' width='100' height='11'/%3E%3Crect y='265.5' width='100' height='11'/%3E%3Crect y='281' width='100' height='10'/%3E%3Crect y='297' width='100' height='10'/%3E%3Crect y='313' width='100' height='9'/%3E%3Crect y='328' width='100' height='9'/%3E%3Crect y='343.5' width='100' height='9'/%3E%3Crect y='359' width='100' height='8'/%3E%3Crect y='374' width='100' height='9'/%3E%3Crect y='391' width='100' height='8'/%3E%3Crect y='407' width='100' height='8'/%3E%3Crect y='422' width='100' height='8'/%3E%3Crect y='437' width='100' height='8'/%3E%3Crect y='453' width='100' height='8'/%3E%3Crect y='469' width='100' height='6'/%3E%3Crect y='485' width='100' height='6'/%3E%3Crect y='501' width='100' height='4'/%3E%3Crect y='517' width='100' height='4'/%3E%3Crect y='533' width='100' height='4'/%3E%3Crect y='549' width='100' height='3'/%3E%3Crect y='564' width='100' height='3'/%3E%3Crect y='579' width='100' height='3'/%3E%3Crect y='595' width='100' height='3'/%3E%3Crect y='611' width='100' height='2'/%3E%3Crect y='627' width='100' height='2'/%3E%3Crect y='643' width='100' height='2'/%3E%3C/g%3E%3C/svg%3E%0A"); width: 100%; height: calc(100% - var(--final-header-height-on-desktop)); position: absolute; top: var(--final-header-height-on-desktop); left: 0; background-image: var(--gradient-background); -webkit-mask-image: var(--outrun-lines); mask-image: var(--outrun-lines); -webkit-mask-size: 8%; mask-size: 8%; -webkit-mask-position: top; mask-position: top; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; pointer-events: none; opacity: 0.5; } #extra-div-2, #extra-div-2 span { /* Mountains Mask hosted on external site due to CORS issue with wikidot hosted mask SVGs */ --mountains-mask: url("https://elusionillusion.com/img/AESTHETIC_mtns_vs2.svg"); display: block; width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; } #extra-div-2 { height: var(--header-height-on-desktop); background-image: linear-gradient(35deg, rgb(var(--pale-gray-monochrome), 1) 0%, rgb(var(--pale-gray-monochrome), 0.3) 30%, rgb(var(--pale-gray-monochrome), 0.4) 50%, rgba(var(--pale-gray-monochrome), 0) 100%); -webkit-mask-image: var(--mountains-mask); mask-image: var(--mountains-mask); background-repeat: repeat; -webkit-mask-size: 400vmin; mask-size: 400vmin; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom; mask-position: bottom; } #extra-div-2 span { height: 100%; background-image: linear-gradient(70deg, rgb(var(--bright-accent), 0.8) 0%, rgb(var(--medium-accent), 0.3) 50%, rgba(var(--bright-accent), 0.8) 100%); background-repeat: repeat; -webkit-animation: movebg 30s linear infinite normal; animation: movebg 30s linear infinite normal; will-change: background-size, background-position-x, background-position-y; } @-webkit-keyframes movebg { 0% { background-size: 200vw; background-position-x: 100vw; background-position-y: -100vw; } 50% { background-size: 400vw; background-position-x: 0; background-position-y: 100vw; } 100% { background-size: 200vw; background-position-x: -100vw; background-position-y: 200vw; } } @keyframes movebg { 0% { background-size: 200vw; background-position-x: 100vw; background-position-y: -100vw; } 50% { background-size: 400vw; background-position-x: 0; background-position-y: 100vw; } 100% { background-size: 200vw; background-position-x: -100vw; background-position-y: 200vw; } } #header::before { opacity: 1; -webkit-filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5)); filter: drop-shadow(0.15rem 0.15rem 0.5rem rgba(var(--pale-gray-monochrome), 0.5)); } #header h1 a { overflow-wrap: normal; } #header h1 a::before, #header h1 a::after { letter-spacing: 0.07em; } #header h1 a::before { -webkit-text-stroke: 0.325rem rgb(var(--dark-gray-monochrome)); } #header h1 a::after { color: rgb(var(--bright-accent)); background: linear-gradient(to top, rgb(var(--dark-gray-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 20%, rgb(var(--dark-accent)) 40%, rgb(var(--pale-gray-monochrome)) 70%); background-size: contain; overflow-wrap: normal; z-index: 1; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #header h2 span { width: 100%; } #header h2 span::before, #header h2 span::after { --wght: 500; top: calc(50% + (var(--header-h1-font-size) / 1.5)); letter-spacing: 0.25em; } #header h2 span::before { -webkit-text-stroke: 0.25rem rgb(var(--swatch-text-secondary-color)); } /* Mobile Header Font Sizes */ @media only screen and (max-width: 36rem) { :root { /* ===HEADER TITLE FONT SIZES=== */ --header-h1-font-size: calc(var(--base-font-size) * 3); --header-h2-font-size: calc(var(--base-font-size) * 0.7); } } @media only screen and (max-width: 21.875rem) { :root { /* ===HEADER TITLE FONT SIZES=== */ --header-h1-font-size: calc(var(--base-font-size) * 2); --header-h2-font-size: calc(var(--base-font-size) * 0.7); } } #top-bar { font-size: var(--base-font-size); } #top-bar div.top-bar>ul>li>ul>li>a { --wght: 600; } #side-bar, #side-bar:hover { background: linear-gradient(to bottom, rgb(var(--black-monochrome)) 0%, rgb(var(--dark-gray-monochrome)) 50%, rgb(var(--dark-accent)) 100%); background-size: 400vh; background-origin: border-box; background-position: top left; } #side-bar div.menu-item { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); border-bottom: 0.0625rem solid rgb(var(--swatch-border-color)); border-top: 0.0625rem solid rgb(var(--swatch-border-color)); margin-top: -0.0625rem; text-shadow: .063rem .063rem .063rem var(--text-shadow); } #side-bar div.menu-item> :not(:nth-child(2)):not(.collapsible-block) { border-left: 0.0625rem solid rgb(var(--swatch-border-color)); } #side-bar div.menu-item a, #side-bar div.menu-item a:visited, #side-bar div.menu-item .text { --text-shadow: rgb(var(--black-monochrome)); letter-spacing: 0.1em; word-spacing: 0.1em; } #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background: var(--gradient-header); background-attachment: fixed; background-position: top; background-origin: border-box; background-size: 100vh; } #side-bar .heading { text-align: center; justify-content: center; align-items: center; } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { --text-shadow: rgb(var(--swatch-text-dark, 12, 12, 12, )); --ui-hvr-wght: 900; letter-spacing: 0.05rem; font-size: 1.25rem; position: relative; display: flex; justify-content: center; margin: 1rem 0 1rem 0.5rem; color: rgb(var(--pale-gray-monochrome)); font-family: var(--header-font); text-transform: none; } #side-bar .side-block[style*="background-color:"] .heading { margin-top: .25rem; } #side-bar .heading p::after, #side-bar .side-block>.collapsible-block .collapsible-block-link::after { bottom: -0.6rem; } #side-bar .heading p::before, #side-bar .side-block>.collapsible-block .collapsible-block-link::before { top: -0.6rem; } a[href*="/random:random-tale"], a[href*="/most-recently-edited"] { min-width: calc((var(--base-font-size) * (14 / 15)) * 6.5); } #main-content { z-index: 1; position: relative; } #main-content a:not([href*="javascript"]):not([href*="classification-"]), #main-content a:not([href*="javascript"]):not([href*="classification-"]):visited, #main-content div.collapsible-block a, #main-content div.collapsible-block a:visited { --wght: var(--ui-wght); background-color: rgb(var(--swatch-primary)); align-items: center; justify-content: center; text-align: center; margin: 0 0.4em 0 0.2em; color: rgb(var(--swatch-background)); box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -webkit-box-decoration-break: clone; box-decoration-break: clone; } #main-content a:not([href*="javascript"]):not([href*="classification-"]):hover, #main-content a:not([href*="javascript"]):not([href*="classification-"]):active, #main-content div.collapsible-block a:hover, #main-content div.collapsible-block a:active { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); text-decoration: none; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } #main-content a:not([href*="javascript"]):not([href*="classification-"]):focus-within, #main-content div.collapsible-block a:focus-within { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); text-decoration: none; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } #main-content a.footnoteref, #main-content a.footnoteref:visited { --wght: var(--ui-wght); background-color: rgb(var(--swatch-primary)); width: 1em; height: 1.1em; display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0 0.4em 0 0.2em; color: rgb(var(--swatch-background)); box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); } #main-content a.footnoteref:hover, #main-content a.footnoteref:active { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } a.footnoteref:focus-within { --wght: var(--ui-hvr-wght); background-color: rgb(var(--swatch-primary-darker)); color: rgb(var(--swatch-background)); box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } #page-title, .meta-title { color: rgb(var(--pale-gray-monochrome)); border-color: rgba(0, 0, 0, 0); } #page-title::before, #page-title::after, .meta-title::before, .meta-title::after { background-image: linear-gradient(30deg, rgb(var(--bright-accent), 0.8) 0%, rgb(var(--dark-accent), 0.3) 50%, rgba(var(--bright-accent), 1) 100%); background-size: 100%; background-color: rgb(var(--bright-accent)); height: 0.125rem; } blockquote, .blockquote { background-color: rgba(var(--gray-monochrome), 0.25); border: 0.0625rem solid rgb(var(--swatch-border-color)); } blockquote:nth-of-type(odd) { border-color: rgb(var(--swatch-border-color)); } blockquote:nth-of-type(even) { border-color: rgb(var(--swatch-primary)); } table.wiki-content-table th { background: rgb(var(--swatch-primary-darker)); color: rgb(var(--dark-gray-monochrome)); } table.wiki-content-table, table.wiki-content-table th, table.wiki-content-table td { border: .0625rem solid rgba(var(--swatch-border-color), 1) !important; border-collapse: collapse; } .code { background-color: rgba(var(--swatch-menubg-dark-color), 0.25); border-color: rgb(var(--swatch-border-color)); } .hl-main { -webkit-filter: invert(1) hue-rotate(180deg); filter: invert(1) hue-rotate(180deg); } .scp-image-block .scp-image-caption { background-color: rgba(var(--swatch-menubg-dark-color), 0.25); } .scp-image-block img { border: 0.0625rem solid rgba(var(--swatch-border-color)); } a:visited { color: rgb(var(--swatch-primary-darker)); } h1 { color: rgb(var(--swatch-primary)) !important; } hr { border-top: none; position: relative; height: 0.35rem; background: rgba(0, 0, 0, 0); display: flex; } hr::before { content: " "; position: absolute; top: 0.1125rem; left: 0; border-top: none; width: 100%; height: 0.125rem; background: linear-gradient(10deg, rgba(var(--gray-monochrome), 0.15) 0%, rgba(var(--pale-gray-monochrome), 1) 50%, rgba(var(--gray-monochrome), 0.15) 100%); background-position: center center; -webkit-filter: blur(0.04rem); filter: blur(0.04rem); } .page-rate-widget-box { background: linear-gradient(to top left, rgba(var(--swatch-primary), 1) 0, rgba(var(--swatch-primary-darkest), 1) 100%) !important; } form#edit-page-form { background-color: rgba(var(--dark-accent), 0.25); border: 0.0625rem solid rgb(var(--light-gray-monochrome)); } #side-bar iframe.scpnet-interwiki-frame:not(:lang(cn)) { -webkit-filter: invert(1); filter: invert(1); } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before, #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::before, #side-bar .scpnet-interwiki-wrapper:not(:lang(cn)) p::after { background-color: rgb(var(--swatch-menubg-color)); } #side-bar .scpnet-interwiki-wrapper:not(:lang(cn))::before { mix-blend-mode: lighten; } @media only screen and (max-width: 56.25rem) { a[href*="/random:random-tale"], a[href*="/most-recently-edited"] { min-width: calc((var(--base-font-size) * (14 / 15)) * 4); } #side-bar .heading p, #side-bar .side-block>.collapsible-block .collapsible-block-link { font-size: 1em; } } @-webkit-keyframes fade-in { from { opacity: 0; box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); } to { opacity: 1; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } } @keyframes fade-in { from { opacity: 0; box-shadow: 0.25em 0.25em 0 0 rgb(var(--swatch-primary-darker)); } to { opacity: 1; box-shadow: 0.125em 0.125em 0 0 rgb(var(--swatch-primary)), 0.3625em 0.3625em 0 0 rgb(var(--pale-gray-monochrome)); } } }
/* 글꼴 */ @import url('https://scpko.wdfiles.com/local--files/unfont/UnDinaru.css'); @import url('https://scpko.wdfiles.com/local--files/unfont/UnGraphic.css'); @font-face { font-family: 'MapoHongdaeFreedom'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoHongdaeFreedomA.woff') format('woff'); font-weight: normal; font-style: normal; } @supports((display: -ms-grid) or (display: grid)) { :root:lang(ko) { --header-title: 'SCP 재단'; --header-subtitle: '확 보 격 리 보 호'; /* Typefaces */ --body-font: 'prenton', 'UnGraphic', serif; --header-font: 'flood-std', Arial, 'MapoHongdaeFreedom', sans-serif; --title-font: 'eurostile-extended', 'UnDinaru', sans-serif; --mono-font: 'novel-mono-pro', monospace; } } @media (max-width: 565px) { #header h2 span { color: transparent; text-shadow: none; } #header h2 span::before { content: "확보 격리 보호"; } }
무제 1
Untitled 1

모든 일의 시작은 이렇게 이루어졌다.
그리고.
1막: 상어와 호랑이
2막: 살덩이와 기계
3막: 헤어지는 자들은
댓글 보기