妙厨 主题版式

主题颜色

Rose--gray-monochrome206,157,144)

Froly--bright-accent(239,109,138)

{$color3-name}{$color3-variable}{$color3-info}

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Tacha--light-gray-monochrome(213,194,96)

Barley Corn--dark-gray-monochrome(162,149,85)

Dune--black-monochrome(39,37,32)

Chestnut--medium-accent(188,67,69)

Falu Red--dark-accent(129,24,21)

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

使用方法

注意：这是一个基于黑色标记笔的主题版式。若你想使用此版式，你还需要导入黑色标记笔版式。点击这里了解更多。¹

在你的作品开头添加如下语法以应用此版式：²

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:crocker-theme]]

示例

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

---

标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。

+ 标题

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题

6 级标题

分页

此为分页（tab view）。

分页

看，这有更多文字。

多么精巧绝伦。

长 Tab

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

这是一个长的 tab，它有很多文字。

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

空 Tab

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

---

一条分割线

嵌套引用块

这是	表格
你应该老早	就知道怎么
做这个了吧

脚注

1. 看一看将链接高亮时会如何！

2. 精美的条纹纸样式，会显示在 code 方块和脚注里。

---

+ 显示版式代码

@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: "Site-81";
        --header-subtitle: "Community Cookbook";
 
        /* 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);
    }
 
    :root:lang(cn) {
        /* Header */
        --header-title: "Site-81";
        --header-subtitle: "社区食谱";
 
        /* Typefaces */
        --body-font: garamond-premier-pro, "Noto Sans SC", serif;
        --header-font: aragon, sans-serif;
        --title-font: hwt-van-lanen, "Noto Sans SC", sans-serif;
    }
 
    ::-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%3Acrocker-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;
        }
    }
}

:root {
    --body-font: garamond-premier-pro, "Noto Sans SC", serif;
    --title-font: hwt-van-lanen, "Noto Sans SC", sans-serif;
    --base-font-size: 1rem;
    --white-monochrome: 249, 247, 236;
    --pale-gray-monochrome: 243, 240, 218;
    --dark-gray-monochrome: 162, 149, 85;
    --black-monochrome: 39, 37, 32;
    --bright-accent: 239, 109, 138;
    --medium-accent: 188, 67, 69;
    --dark-accent: 129, 24, 21;
}
::-moz-selection {
    background: rgba(var(--bright-accent), 0.5);
}
::selection {
    background: rgba(var(--bright-accent), 0.5);
}
.side-block .heading {
    background: rgba(var(--pale-gray-monochrome), 0.5);
    font-family: var(--title-font);
    min-height: 1.5rem;
}
.side-block .heading p {
    --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;
}