@import url("https://use.typekit.net/tax7dna.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-highlighte";
/* must be either "nuscp" or "sigma9" */
--theme-id: "crocker-theme";
/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
--theme-name: "Crocker Theme";
/* set this to your theme's full name */
/* Header */
--logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Acrocker-theme/crocker_logo.png");
--header-title: "Điểm-81";
--header-subtitle: "Tuyển tập Công thức Nấu ăn";
/* Typefaces */
--body-font: garamond-premier-pro, serif;
--header-font: aragon, sans-serif;
--title-font: hwt-van-lanen, sans-serif;
/* Standard Colors */
--white-monochrome: 249, 247, 236;
/* off-blue white */
--pale-gray-monochrome: 243, 240, 218;
/* v light blue for blockquotes and stuff */
--light-gray-monochrome: 213, 194, 96;
/* light accent blue for login status */
--gray-monochrome: 206, 157, 144;
/* blue */
--dark-gray-monochrome: 162, 149, 85;
/* deep blue */
--black-monochrome: 39, 37, 32;
/* off-blue black */
--bright-accent: 239, 109, 138;
/* bright yellow */
--medium-accent: 188, 67, 69;
/* medium red */
--dark-accent: 129, 24, 21;
/* deep red */
--newpage-color: var(--bright-accent);
/* pale orange */
/* Primary Theme Colors */
--swatch-background: var(--white-monochrome);
--background-gradient-color: var(--gray-monochrome);
--swatch-primary: var(--bright-accent);
--swatch-primary-darker: var(--medium-accent);
--swatch-primary-darkest: var(--dark-accent);
/* Primary Text Colors */
--swatch-text-dark: var(--black-monochrome);
--swatch-text-light: var(--white-monochrome);
--swatch-important-text: var(--bright-accent);
/* Primary Menu Colors */
--swatch-menubg-color: var(--white-monochrome);
--swatch-menubg-light-color: var(--pale-gray-monochrome);
--swatch-menubg-medium-color: var(--light-gray-monochrome);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--dark-gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
--swatch-menutxt-dark-color: var(--black-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-border-color: var(--black-monochrome);
/* Primary Header Colors */
--header-gradient-color-bottom: var(--bright-accent);
--header-gradient-color-middle: var(--medium-accent);
--header-gradient-color-top: var(--medium-accent);
--swatch-headerh1-color: var(--dark-accent);
--swatch-headerh2-color: var(--black-monochrome);
--swatch-topmenu-border-color: var(--black-monochrome);
--swatch-topmenu-bg-color: var(--pale-gray-monochrome);
--link-color: var(--dark-accent);
--visited-link-color: var(--medium-accent);
--hover-link-color: var(--medium-accent);
--rating-module-button-color: var(--black-monochrome);
--rating-module-text-color: var(--swatch-menutxt-dark-color);
/* Header Gradients */
--gradient-header: linear-gradient(35deg,
rgb(var(--header-gradient-color-bottom)) 0,
rgb(var(--header-gradient-color-middle)) 90%,
rgb(var(--header-gradient-color-top)) 100%);
--diagonal-stripes: inherit;
/* header measurements */
--header-height-on-desktop: 12.25rem;
--header-height-on-mobile: 12.25rem;
--topbar-height-on-desktop: 1.875rem;
--topbar-height-on-mobile: 2.5rem;
--base-font-size: 1rem;
--sidebar-width-on-desktop: calc(var(--base-font-size) * 16);
}
::-webkit-scrollbar,
#side-bar:hover::-webkit-scrollbar {
background-color: rgba(var(--pale-gray-monochrome), 1);
}
::-webkit-scrollbar-thumb,
#side-bar:hover::-webkit-scrollbar-thumb {
background-color: rgba(var(--dark-gray-monochrome), 1);
}
::-moz-selection {
background: rgba(var(--bright-accent), 0.5);
}
::selection {
background: rgba(var(--bright-accent), 0.5);
}
html {
background: white;
}
#extra-div-1 {
height: var(--header-height-on-desktop);
width: 100%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background-image: url("https://scp-wiki.wdfiles.com/local--files/theme:crocker-theme/crocker-header-bg.png");
}
html,
body {
font-feature-settings: "onum"0;
font-variant-numeric: tabular-nums;
scrollbar-color: rgb(var(--dark-gray-monochrome)) rgb(var(--pale-gray-monochrome));
}
#page-content span>a:not([onclick*="Reference"]),
#page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]) {
transition: box-shadow 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: inset 0 0 0 0.01px rgba(var(--light-gray-monochrome), 1);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
#search-top-box::before {
background-color: rgb(var(--swatch-primary-darkest));
}
#search-top-box-input {
background-color: rgb(var(--pale-gray-monochrome));
}
#login-status {
color: rgb(var(--dark-accent));
}
#login-status a {
color: rgb(var(--swatch-text-dark)) !important;
}
#search-top-box input.empty {
color: rgb(var(--dark-accent));
}
#main-content {
margin-top: 2.1em;
}
#page-content span>a:not([onclick*="Reference"]):hover,
#page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):hover,
#page-content span>a:not([onclick*="Reference"]):active,
#page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):active {
transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: inset 100vw 0 0 0 rgba(var(--light-gray-monochrome), 0.75);
text-decoration: none;
}
#page-content span>a:not([onclick*="Reference"]):focus-within,
#page-content div:not([id*="wiki-tabview"]) a:not([onclick*="Reference"]):focus-within {
transition: box-shadow 1000ms cubic-bezier(0.4, 0.0, 0.2, 1);
box-shadow: inset 100vw 0 0 0 rgba(var(--light-gray-monochrome), 0.75);
text-decoration: none;
}
hr {
background: rgb(0, 0, 0, 0);
border: 0;
height: 0em;
width: 90%;
position: relative;
margin: 1.875rem auto 2.175rem;
}
#page-title::after,
hr::after {
content: " ";
height: 0.35rem;
width: 100%;
position: absolute;
margin: 0 auto;
background: rgb(var(--white-monochrome));
border-top: 0.125rem dashed rgb(var(--gray-monochrome));
border-bottom: 0.125rem dashed rgb(var(--gray-monochrome));
left: 0;
top: 50%;
box-sizing: border-box;
}
#header {
--swatch-headerh2-color: var(--swatch-primary);
-webkit-filter: initial;
filter: initial;
}
#header h1,
#header h1 a,
#header h2,
#header h2 span {
display: flex;
align-items: center;
}
#header h1 a {
margin-left: 12rem;
margin-top: -1em;
position: relative;
width: auto;
display: flex;
align-items: center;
justify-content: center;
top: 0;
}
#header h1 a::before {
--text-shadow: rgb(var(--swatch-text-light));
font-size: clamp(3rem, 24vw, 7rem);
color: rgb(var(--dark-accent));
}
#header h2,
#header h2 span {
margin-left: 6.5rem;
height: var(--header-height-on-desktop);
justify-content: flex-start;
font-family: var(--title-font);
margin-top: 2.25rem;
}
#header h2 span {
line-height: 1.15;
font-size: 1.1rem;
margin-top: 0rem;
}
#header h2 span::before {
--wght: 600;
font-weight: 600;
text-shadow: 0.125rem 0.125rem 0 rgb(var(--white-monochrome));
}
#login-status span.printuser {
color: rgb(var(--swatch-text-tertiary-color));
}
#top-bar {
--wght: 900;
font-size: var(--base-font-size);
font-weight: 900;
}
#side-bar:hover {
background: rgb(var(--white-monochrome));
}
#top-bar div[class*="top-bar"]>ul>li:hover {
background-color: rgb(var(--gray-monochrome));
}
#top-bar div[class*="top-bar"]>ul>li>a {
color: rgb(var(--swatch-menutxt-dark-color)) !important;
}
#top-bar div[class*="top-bar"]>ul>li>a::before,
#top-bar div[class*="top-bar"]>ul>li>a::after {
background-color: rgb(var(--dark-accent));
}
#top-bar div[class*="top-bar"]>ul>li:hover>a,
#top-bar div[class*="top-bar"]>ul>li:hover>a {
color: rgb(var(--white-monochrome)) !important;
}
#top-bar div[class*="top-bar"]>ul>li>ul {
background-color: rgb(var(--dark-gray-monochrome));
background-image: var(--gradient-header);
box-shadow: inherit;
}
#top-bar div[class*="top-bar"]>ul>li>ul,
#top-bar div[class*="top-bar"]>ul>li>ul>li {
border-color: rgb(var(--light-gray-monochrome));
}
#top-bar div[class*="top-bar"]>ul>li>ul>li>a {
--wght: 600;
font-weight: 600;
}
#top-bar div[class*="top-bar"]>ul>li>ul>li>a::before,
#top-bar div[class*="top-bar"]>ul>li>ul>li>ul>li>a::before,
#top-bar div[class*="top-bar"]>ul>li>ul>li>a:hover::before {
background-color: rgb(var(--dark-accent));
}
#side-bar:hover {
background: rgb(var(--white-monochrome));
}
#side-bar .heading,
#side-bar .side-block>.collapsible-block:nth-child(1) .collapsible-block-folded {
background: rgba(var(--pale-gray-monochrome), 0.5);
font-family: var(--title-font);
min-height: 1.5rem;
}
#side-bar .heading p,
#side-bar .side-block>.collapsible-block .collapsible-block-link {
--wght: 900;
text-shadow: inherit;
color: rgb(var(--dark-gray-monochrome));
font-weight: 900;
letter-spacing: 0.15em;
font-size: calc(var(--base-font-size) * 0.95);
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
#side-bar div.menu-item .sub-text {
color: rgb(var(--medium-accent));
}
#page-title {
font-family: var(--title-font);
position: relative;
border: 0px;
text-align: center;
}
#page-title:before {
top: calc(100% - 0.75rem);
}
#page-title:after {
left: 50%;
transform: translateX(-50%);
top: calc(100%);
max-width: 43.375rem;
}
#content-wrap h1,
#content-wrap h2,
#content-wrap h3,
#content-wrap h4,
#content-wrap h5,
#content-wrap #page-title {
--wght: 700;
line-height: 1.25;
font-weight: 700;
}
#content-wrap h1,
#content-wrap #page-title {
font-size: 2.45rem;
}
#content-wrap h2 {
font-size: 1.7rem;
}
#content-wrap h3 {
font-size: 1.25rem;
}
#content-wrap h4 {
font-size: 1rem;
}
#content-wrap h5 {
font-size: .9rem;
}
#content-wrap *>#page-title,
#content-wrap *>h1:first-of-type,
#content-wrap *>h2:first-of-type,
#content-wrap *>h3:first-of-type,
#content-wrap *>h4:first-of-type,
#content-wrap *>h5:first-of-type,
#content-wrap *>h6:first-of-type {
margin-bottom: 0;
margin-top: 0;
}
#content-wrap *+h1,
#content-wrap *+h2,
#content-wrap *+h3,
#content-wrap *+h4,
#content-wrap *+h5,
#content-wrap *+h6 {
margin-top: 1.5em;
}
#content-wrap #page-title+*,
#content-wrap h1+*,
#content-wrap h2+*,
#content-wrap h3+*,
#content-wrap h4+*,
#content-wrap h5+*,
#content-wrap h6+* {
margin-top: 1em;
}
#content-wrap p+* {
margin-top: 1em;
}
#page-content ol:not([class*="yui-nav"]),
#page-content ul:not([class*="yui-nav"]) {
margin-bottom: 1em;
margin-top: 1em;
line-height: 1.5;
padding-left: 3ch;
}
#page-content ol:not([class*="yui-nav"]) {
counter-reset: crocker-counter;
list-style: none;
}
#page-content ul:not([class*="yui-nav"]) {
list-style: none;
text-indent: -1em;
}
#page-content ol:not([class*="yui-nav"]) li,
#page-content ul:not([class*="yui-nav"]) li {
margin-bottom: .25em;
max-width: 100ex;
}
#page-content ol:not([class*="yui-nav"]) li {
counter-increment: crocker-counter;
position: relative;
text-indent: -1rem;
line-height: 1.5rem;
padding-bottom: 0.5rem;
}
#page-content ul:not([class*="yui-nav"]) li::before,
#page-content ol:not([class*="yui-nav"]) li::before {
color: rgb(var(--medium-accent))
}
#page-content ul:not([class*="yui-nav"]) li::before {
font-family: var(--header-font);
font-size: 1.25rem;
content: "\2767";
margin-right: 0.25rem;
}
#page-content ol:not([class*="yui-nav"]) li::before {
content: counter(crocker-counter) ". ";
font-family: var(--header-font);
font-size: 1.25rem;
}
#content-wrap table {
font-size: 1rem;
line-height: 1.5;
border-spacing: 0;
margin: 1.25rem auto !important;
border-collapse: collapse !important;
}
#content-wrap table td,
#content-wrap table th,
#content-wrap td,
#content-wrap th {
--wght: 400;
border: 1px solid rgb(var(--gray-monochrome));
background-color: rgb(var(--white-monochrome));
font-weight: 400;
padding: .25rem 0.5rem !important;
justify-content: center;
grid-auto-flow: column;
align-items: center;
}
#content-wrap thead td,
#content-wrap thead th,
#content-wrap th {
--wght: 700;
background-color: rgb(var(--pale-gray-monochrome)) !important;
color: rgb(var(--dark-gray-monochrome));
font-weight: 700 !important;
}
#content-wrap table thead th,
#content-wrap thead th {
--wght: 700;
font-weight: 700;
}
#content-wrap table th,
#content-wrap th {
text-align: left;
}
#content-wrap thead td,
#content-wrap thead th,
#content-wrap th {
text-shadow: none;
color: rgb(var(--swatch-primary-darkest));
}
.footnotes-footer,
.code {
background-image:
linear-gradient(90deg, transparent 2.35em, rgb(171, 206, 212) 2.35em, rgb(171, 206, 212) 2.5em, transparent 2.5em),
linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1em, transparent .1625em);
background-position: 1em 0.75em;
background-size: 100% 1.8em;
font-size: 0.9em;
font-family: var(--mono-font);
}
.code pre {
white-space: pre;
white-space: normal;
width: 100%;
overflow: hidden;
}
.code>*,
.footnotes-footer>* {
--wght: 400;
padding: 0 0 0 3em;
font-weight: 400;
letter-spacing: 0.05em;
outline: none;
}
.code>* {
line-height: 1.75;
}
.footnotes-footer>* {
line-height: 2;
}
.footnotes-footer .title {
--wght: 900;
font-family: var(--title-font);
margin: -0.75em 0 0.75em 0;
}
.footnotes-footer .footnote-footer {
width: 90%;
margin: 0 0 0 4ch !important;
}
.footnotes-footer a[href*="javascript"]::before,
.bibitems .bibitem::after {
right: -50%;
background-color: rgb(var(--swatch-primary-darkest));
color: rgb(var(--swatch-text-secondary-color));
padding: 0 0.25em 0 0.5em;
border-radius: 50%;
font-size: 0.9em;
}
.footnotes-footer div.footnote-footer:not([id*="footnote-1"]) {
margin-top: -0.1em !important;
}
.footnotes-footer .footnote-footer>a:nth-of-type(1) {
margin-left: 0;
}
.scp-image-block {
box-shadow: initial;
-webkit-box-shadow: initial;
}
@media only screen and (max-width: 56.25rem) {
#header {
background-position: left .5rem top 2rem;
background-size: auto 8.375rem;
}
#header h1 a {
margin-left: 7rem;
margin-top: -2.5rem;
}
#header h2 {
width: calc(100% - 9.5rem);
height: calc(100% - 7.5rem);
margin-left: 8.35rem;
margin-top: 8rem;
text-align: left;
}
#header h2 span {
width: 90vw;
height: 100%;
margin: 0;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
#header h2 span::before {
position: absolute;
top: 0;
left: 0;
width: 90%;
margin: 0;
}
#top-bar {
font-size: calc(var(--base-font-size) * 0.8);
}
#top-bar>div.mobile-top-bar>div.open-menu {
font-size: calc(var(--base-font-size) * 0.65);
}
#top-bar>div.mobile-top-bar>div.open-menu>p>a {
color: rgb(var(--swatch-menutxt-dark-color)) !important;
}
#top-bar div.mobile-top-bar>ul>li>a {
letter-spacing: 0;
}
#top-bar>div.top-bar>ul>li:last-of-type>ul,
#top-bar>div.mobile-top-bar>ul>li:last-of-type>ul {
left: 50%;
}
#side-bar:target .close-menu {
width: calc(100% - 15em - var(--scrollbar-width));
}
.footnotes-footer,
.code {
background-image:
linear-gradient(90deg, transparent 1.35rem, rgb(171, 206, 212) 1.35rem, rgb(171, 206, 212) 1.5rem, transparent 1.5rem),
linear-gradient(rgba(var(--light-gray-monochrome), 0.5) .1rem, transparent .1625rem);
background-position: 1rem 0.45rem;
background-size: 100% 1.25rem;
font-size: 0.7rem;
font-family: var(--mono-font);
}
.code>*,
.footnotes-footer>* {
line-height: 1.85;
padding-left: 2.5rem;
}
.footnotes-footer .title {
padding-left: 2.5rem !important;
}
#content-wrap h1,
#content-wrap #page-title {
font-size: 1.9rem;
}
#content-wrap h2 {
font-size: 1.5rem;
}
#content-wrap h3 {
font-size: 1.1rem;
}
#content-wrap h4 {
font-size: 0.9rem;
}
#content-wrap h5 {
font-size: .8rem;
}
}
}