Fossil Theme

Link to article: Fossil Theme.

@import url(https://scp-wiki.wdfiles.com/local--code/theme:fossil/1);

(none)

(none)

[[include :scp-wiki:component:sigma-plus]]
[[module css]]
@import url(https://scp-wiki.wdfiles.com/local--code/theme:fossil/1);
[[/module]]
[[div_]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme:fossil/1
]]
[[/div]]

[[iftags +theme]]
[[>]]
[[module rate]]
[[/>]]

This is an aesthetic theme gifted to [[*user Pedagon]] for Art Exchange 2023.

To use the theme, insert the following:

> {{@@[[include :scp-wiki:theme:fossil]]@@}}

Fossil Theme is a [[[component:sigma-plus|]]] theme.

------

[[include component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Afossil/fossil-header.jpg |caption=Image.|width=270px]]

An ornamental horizontal rule can be created with 5 hyphens "- - - - -" as above.

Titles can be created by putting between one and six plus "+" at the start of the line.
@@ @@

[[collapsible show="Collapsible - Click me" hide="Collapsible - Click me"]]
+ First Title

++ Second Title

+++ Third Title

++++ Fourth Title

+++++ Fifth Title

++++++ Sixth Title
[[/collapsible]]

@@ @@

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.

https://www.svgrepo.com/svg/320663/dinosaur-bones
https://www.svgrepo.com/svg/219182/shovel
https://commons.wikimedia.org/wiki/File:Elliot_Formation_Caves_in_%27Matalane_Valley,_Leribe,_Lesotho_-_panoramio.jpg
https://commons.wikimedia.org/wiki/File:Diplodocus_sp._(sauropod_dinosaur_tail_bones)_(Morrison_Formation,_Upper_Jurassic;_Carnegie_Quarry,_Dinosaur_National_Monument,_Utah,_USA)_17_(48719495002).jpg

[[/tab]]
[[tab Long Tab]]
This is a long tab. It contains a lot of text.[[footnote]] This is a footnote. [[/footnote]]

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.
[[/tab]]

[[tab Longer Tab]]
This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.

This is also a long tab. It contains a lot of text.
[[/tab]]

[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

@@ @@

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes

@@ @@

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||

[[footnoteblock]]

[[=]]
+++* Header font is Półtawski Nowy.

Body font is Public Sans.

{{Monospace font is Sometype Mono.}}
[[/=]]

------

++* Source Code
[[collapsible show="Show" hide="Hide"]]
[[code type="CSS"]]
/*
    Fossilize Theme
    [2023 Wikidot Theme]
    By EstrellaYoshte
 
    Based on:
    Cafe Theme by EstrellaYoshte
    Sunside Theme by EstrellaYoshte
    Generic Space Theme by EstrellaYoshte
*/

@import url('https://api.fonts.coollabs.io/css2?family=Poltawski+Nowy:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Sometype+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --sp_header-height: min(calc(11.5rem + 7.25vw),18.75rem);
    --sp_header-logo: url(https://scp-wiki.wdfiles.com/local--files/theme%3Afossil/dos-logo.png);
    --sp_header-logo-size: calc(var(--sp_header-height)*.95);
    --sp_header-title-size: min(calc(2.5rem * var(--sp_header-title-scale)), calc(1rem * var(--sp_header-title-scale) + 2.675vw));
    --sp_header-title-scale: 2.5;
    --sp_top-bar-height: 2.325rem;
    --sp_side-bar-width: 15.875rem;
    --sp_area-max-width: 200rem;
    --sp_area-min-margin: 2.75rem;

    --sp_top-bar-link-color: rgb(var(--fossil-accent));
    --sp_top-bar-link-hover-color: var(--sp_top-bar-link-color);
    --sp_top-bar-link-hover-background: rgb(var(--fossil-accent)/.25);
    --sp_dropdown-background: rgb(var(--fossil-dark)/.875);
    --sp_dropdown-link-border: none;
    --sp_dropdown-link-color: rgb(var(--fossil-alt));
    --sp_dropdown-link-background: rgb(var(--fossil-alt)/.075);
    --sp_dropdown-link-hover-color: rgb(var(--fossil-light));
    --sp_dropdown-link-hover-background: rgb(var(--fossil-alt));

    --sp_rate-module-text-color: rgb(var(--fossil-light));
    --sp_rate-module-background: rgb(var(--fossil-dark));
    --sp_rate-module-button-color: rgb(var(--fossil-accent));
    --sp_rate-module-button-background: rgb(var(--fossil-accent)/.125);
    --sp_rate-module-button-hover-color: rgb(var(--fossil-dark));
    --sp_rate-module-button-hover-background: rgb(var(--fossil-accent));
    --sp_rate-module-sub-color: rgb(var(--fossil-secondary));
    --sp_rate-module-active-color: rgb(var(--fossil-accent));

    --sp_tab-background: transparent;
    --sp_tab-text-color: rgb(var(--fossil-accent));
    --sp_tab-border-color: rgb(var(--fossil-accent));
    --sp_tab-hover-border-color: rgb(var(--sp_tab-border-color));
    --sp_tab-selected-border-color: rgb(var(--sp_tab-border-color));
    --sp_tab-hover-background: rgb(var(--fossil-accent)/.325);
    --sp_tab-selected-background: rgb(var(--fossil-accent));
    --sp_tab-selected-text-color: rgb(var(--fossil-dark));

    --header-font: 'Poltawski Nowy', Garamond, "New Century Schoolbook", "Century Schoolbook", Georgia, serif;
    --body-font: 'Public Sans', Inter, Nanum Gothic, Arial, sans-serif;
    --mono-font: 'Sometype Mono', 'Courier New', Courier, monospace;

    --sp_hovertip-background: rgb(var(--fossil-light)/.875);
    --sp_hovertip-border: none;

    --fossil-accent: 228 204 167;
    --fossil-secondary: 160 116 64;
    --fossil-alt: 49 141 248;
    --fossil-dark: 30 30 30;
    --fossil-light: 255 254 253;
    --fossil-black: 12 12 10;
    --fossil-dawn: 235 114 28;

    --fossil-header: url(https://scp-wiki.wdfiles.com/local--files/theme%3Afossil/fossil-header.jpg);
    --fossil-header-slice-offset: calc(3.25rem + 3.25vw);
    --fossil-bg: url(https://scp-wiki.wdfiles.com/local--files/theme%3Afossil/fossil-bg.png);
    --fossil-footer: url(https://scp-wiki.wdfiles.com/local--files/theme%3Afossil/fossil-footer.jpg);
    --fossil-radius: 1.5rem;

    --blockquote-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 512 512'%3E%3Cpath d='M507 85 427 5c-7-7-18-7-25 0l-31 31a74 74 0 0 0-14 85L153 325l-39-38c-4-4-11-4-16 0l-63 64C6 379-6 420 3 459l6 33c2 5 6 9 11 11l33 6c39 9 80-3 108-32l64-63c4-5 4-12 0-16l-38-39 204-204c27 13 62 9 85-14l31-31c7-7 7-18 0-25zm-56 30a38 38 0 0 1-54-54l17-18 55 55-18 17z'/%3E%3C/svg%3E");
}


/*---------------------------------------*/

body {
    background-color: rgb(var(--fossil-light));
    background-image: var(--fossil-bg);
    background-size: 25rem;
    color: rgb(var(--fossil-black));
    font-family: var(--body-font);
}

tt, .page-source, .code, code, pre {
    font-family: var(--mono-font);
    font-size: 1em;
}

a:any-link {
    --_link-color: var(--fossil-alt);
    color: rgb(var(--_link-color));
}
a.newpage {
    --_link-color: var(--fossil-dawn);
}

h1,h2,h3,h4,h5,h6 {
    display: flow-root;
    font-family: var(--header-font);
    font-weight: bold;
    color: rgb(var(--fossil-black));
    margin: .375em 0;
    isolation: isolate;
}
h1 { font-size: 2.25em; }
h2 { font-size: 1.875em; }
h3 { font-size: 1.625em; }
h4 { font-size: 1.35em; }
h5 { font-size: 1.15em; }
h6 { font-size: 1em; }


::selection {
    background-color: rgb(var(--fossil-accent) / 0.375);
}

/*---------- SCROLLBAR ----------*/
 
::-webkit-scrollbar {
  width: 0.625rem;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--fossil-accent));
  border: none;
}
::-webkit-scrollbar-track {
  background: rgb(var(--fossil-black));
}
 
:root {
    scrollbar-color: rgb(var(--fossil-accent)) rgb(var(--fossil-black));
    scrollbar-width: thin;
}

/*---------------------------------------*/
/*------- STRUCTURE -------*/
/*---------------------------------------*/

#container {
    display: grid;
    grid-template-columns: minmax(0,1fr);
}

#header { order: -3; }

#content-wrap {
    order: -2;
    margin-block: 1rem 0;
    margin-inline-start: 0;
    max-width: calc(100% - var(--sp_area-min-margin));
    width: 100%;
    column-gap: 2.75rem;
    padding-bottom: .5rem;
}

#extrac-div-1 { order: -1; }

/*-----------------------------*/


/*---------------------------------------*/
/*------- HEADER -------*/
/*---------------------------------------*/

#header {
    background: initial;
    grid-template-areas:
        "login login login search"
        "top-bar top-bar top-bar top-bar"
        ". . . ."
        ". h1 . ."
        ". . . .";
    grid-template-rows: auto auto 1fr auto 1fr;
    grid-template-columns: var(--sp_area-comp-margin) 1fr auto auto;
}
#header::before {
    grid-row: 3/7;
    grid-column: 2/5;
    justify-self: end;
    margin-inline-end: 1rem;
}
#header h1, #header h2 {
    padding-inline-start: 0;
    max-width: calc(100% - var(--sp_header-logo-adaptive-size));
}
#header h2 { display: none; }
#header h1 a {
    font-family: var(--header-font);
    font-weight: 700;
    line-height: 0.875;
    text-shadow: 0 0 0.75rem rgb(var(--fossil-black)/.5);
    letter-spacing: -0.1rem;
}

#header-extra-div-1 {
    position: absolute;
    width: 100%;
    height: calc(var(--sp_final-header-height) + var(--fossil-header-slice-offset));
    pointer-events: none;
    z-index: -1;
}
#header-extra-div-1 {
    background-image: linear-gradient(-12.25deg, rgb(var(--fossil-black)/.875) var(--fossil-header-slice-offset), transparent calc(var(--fossil-header-slice-offset) + 25%)), linear-gradient(to bottom, rgb(var(--fossil-black)/.375), transparent 55%), var(--fossil-header);
    background-size: cover;
    background-position: center;
    background-attachment: local, local, fixed;
}
#header-extra-div-1 span {
    position: absolute;
    width: 100%;
    aspect-ratio: 4;
    max-height: 55%;
    bottom: 0;
    background: rgb(var(--fossil-light));
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#header-extra-div-1::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px); left: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgb(var(--fossil-light)), transparent);
}

/*-----------------------------*/

#header-extra-div-3 {
    grid-area: login;
    background-color: rgb(var(--fossil-dark));
}

#login-status {
    padding: .5rem;
    padding-inline-start: calc(var(--sp_area-min-margin) + 1.25rem);
    padding-inline-end: 2rem;
    text-align: start;
    width: max-content;
    color: rgb(var(--fossil-light));
}
#login-status a {
    color: rgb(var(--fossil-accent));
}

a#account-topbutton {
    display: grid;
    place-content: center;
    border: none;
    height: 100%;
    width: 1.75rem;
    font-size: 1em;
    padding: 0;
    margin: 0;
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    color: rgb(var(--fossil-accent));
}

#account-options {
    width: max-content;
    background-color: rgb(var(--fossil-black)/.775);
    backdrop-filter: blur(.125rem);
    border: none;
    border-radius: calc(var(--fossil-radius)*.5);
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    --_gap: .25rem;
}
#account-options > ul {
    display: grid;
    gap: var(--_gap);
    padding: var(--_gap);
}
#account-options ul li a {
    text-align: center;
    padding: .125rem .25rem;
    border-radius: calc(var(--fossil-radius)*.5 - var(--_gap));
    color: rgb(var(--fossil-alt));
}
#account-options ul li a:is(:hover,:focus) {
    color: rgb(var(--fossil-light));
    background-color: rgb(var(--fossil-alt));
}

/*-----------------------------*/
 
#search-top-box-form {
    gap: 0;
    height: 100%;
}
 
#search-top-box-input, #search-top-box-form input[type=submit] {
    padding: 0.25rem;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0;
}
 
#search-top-box-form input.btn[type=submit] {
    box-shadow: none;
    background: rgb(var(--fossil-alt));
    border: none;
    font-size: 0;
    width: 2rem;
}
 
#search-top-box {
    --search-mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E);
}
#search-top-box::before {
    content: "";
    display: block;
    width: 2rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgb(var(--fossil-light));
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: var(--search-mask);
    mask-image: var(--search-mask);
    -webkit-mask-size: 1.05rem;
    mask-size: 1.05rem;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/*------- Top Bar -------*/

#top-bar {
    background: initial;
}
#top-bar > div[class*="top-bar"] {
    border-bottom: solid 0.1rem rgb(var(--fossil-light)/.375);
}
#top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; }

#top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a {
    text-shadow: 0 0 0.75em rgb(var(--fossil-black)/.95);
    border-radius: var(--fossil-radius);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    --_gap: .425rem;
    display: grid;
    gap: var(--_gap);
    padding: var(--_gap);
    -webkit-backdrop-filter: blur(.125rem);
    backdrop-filter: blur(.125rem);
    border: none;
    border-radius: var(--fossil-radius);
    box-shadow: 0 0 0.75rem rgb(var(--fossil-black)/.5);
}

#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
    text-align: center;
    padding: .375rem .625rem;
    border-radius: calc(var(--fossil-radius) - var(--_gap));
    font-weight: bold;
}

/*---------------------------------------*/
/*------- SIDE BAR -------*/
/*---------------------------------------*/

#side-bar {
    --_gap: .75rem;
    align-self: start;
    border-top-right-radius: var(--fossil-radius);
    border-bottom-right-radius: var(--fossil-radius);
    box-shadow: 0 0 0.575rem rgb(var(--fossil-black)/.425);
    padding: var(--_gap);
    padding-left: 0; padding-bottom: 0;
    margin: 0;
    color: rgb(var(--fossil-light)/.775);
    background-color: rgb(var(--fossil-dark));
    box-sizing: border-box;
    font-size: .925em;
    overflow-x: hidden;
    direction: rtl;
}
#side-bar > * { direction: ltr; }

:is(#interwiki, #side-bar) .side-block {
    margin-bottom: var(--_gap);
    border-radius: calc(var(--fossil-radius) - var(--_gap) + .1rem);
    border-start-start-radius: 0; border-end-start-radius: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

#side-bar .side-block.media {
    background-color: rgb(var(--fossil-alt)/.25);
}
#side-bar .side-block.resources {
    background-color: rgb(var(--fossil-secondary)/.175);
}

:is(#interwiki, #side-bar) .heading {
    color: rgb(var(--fossil-accent));
    border-bottom: solid 0.05rem currentColor;
    margin-inline-start: -.625rem;
    padding-inline-start: .625rem;
    font-size: 1em;
    font-family: var(--header-font);
}

:is(#interwiki, #side-bar) .side-block a {
    display: inline-block;
    color: rgb(var(--fossil-alt));
    padding: .225em .675em;
    border-radius: var(--fossil-radius);
    text-decoration: none;
}
:is(#interwiki, #side-bar) .side-block a:is(:hover,:focus) {
    color: rgb(var(--fossil-light));
    background-color: rgb(var(--fossil-alt));
}
:is(#interwiki, #side-bar) .side-block.media a { display: contents; }

#side-bar a.collapsible-block-link {
    display: inline-flex;
    padding-inline-start: .225em;
}
#side-bar :where(.collapsible-block-folded) a.collapsible-block-link::before { color: rgb(var(--fossil-alt)); }
#side-bar :where(.collapsible-block-folded) a.collapsible-block-link:is(:hover,:focus)::before { color: rgb(var(--fossil-light)); }

#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 0.05rem rgb(var(--fossil-accent));
    padding-bottom: .125rem;
    margin-inline-start: -.625rem;
    padding-inline-start: .625rem;
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    margin: 0;
    color: rgb(var(--fossil-accent));
    font-size: 1em;
    font-family: var(--header-font);
}
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:is(:hover,:focus) { color: rgb(var(--fossil-light)); }

#side-bar .close-menu {
    width: calc(100% - var(--sp_side-bar-width));
    left: initial;
    right: 0;
    background: transparent;
}

#top-bar .mobile-top-bar .open-menu a {
    top: 0; left: 0;
    border-radius: 0;
    border-bottom-right-radius: calc(var(--fossil-radius)*.5);
    border: none;
    font-size: 2.25rem;
    width: 2.5rem; height: 2.5rem;
    padding-right: .125rem; padding-bottom: .125rem;
    display: grid;
    align-items: center;
    background-color: rgb(var(--fossil-dark));
    color: rgb(var(--fossil-accent));
    box-shadow: 0 0 0.5rem rgb(var(--fossil-black)/.625);
}

/*---------------------------------------*/
/*------- MAIN -------*/
/*---------------------------------------*/

#page-title, .meta-title {
    position: relative;
    border: none;
    font-size: min(calc(2.75em + 1.75vw), 3.675em);
    margin: 0;
    margin-bottom: 1rem;
    padding: 0;
    color: rgb(var(--fossil-secondary));
    text-shadow:
-.145rem -.145rem rgb(var(--fossil-light)),
-.125rem -.125rem rgb(var(--fossil-light)),
-.1rem -.1rem rgb(var(--fossil-light)),
-.085rem -.085rem rgb(var(--fossil-light)),
-.055rem -.055rem rgb(var(--fossil-light)),
-.035rem -.035rem rgb(var(--fossil-light)),
-.01rem -.01rem rgb(var(--fossil-light));
    font-family: var(--header-font);
    font-weight: 300;
    line-height: .95;
    isolation: isolate;
}
:is(#page-title, .meta-title)::before {
    content: "";
    position: relative;
    display: inline-block;
    z-index: -1;
    width: 1.325em;
    height: 1.325em;
    vertical-align: middle;
    margin-block-start: -.75em; margin-block-end: -.25em;
    margin-inline-end: -1em; margin-inline-start: -.325em;
    border-radius: var(--fossil-radius);
    background-color: rgb(var(--fossil-accent)/.825);
    transform: rotate(30deg);
}
.meta-title p { display: contents; line-height: inherit; }

#breadcrumbs, .pseudocrumbs {
    font-family: var(--mono-font);
    margin-top: -.675em;
}

#main-content :is(h1,h2,h3,h4,h5,h6)::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 1.25em;
    height: 1.25em;
    top: -.125em;
    vertical-align: bottom;
    margin-inline-end: -.75em;
    margin-inline-start: -.5em;
    border-radius: calc(var(--fossil-radius)*.425);
    background-color: rgb(var(--fossil-accent)/.75);
    transform: rotate(30deg);
    z-index: -1;
}

/*---------------------------------------*/

:where(#main-content) a:any-link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: rgb(var(--_link-color)/.875);
    text-underline-offset: .15em;
    text-decoration-thickness: .125em;
}
:where(#main-content) a:any-link:hover {
    color: rgb(var(--_link-color));
    background-color: rgb(var(--_link-color)/.15);
}

blockquote, div.blockquote {
    position: relative;
    background-color: rgb(var(--fossil-light)/.375);
    padding: .25rem 1.325rem;
    border: none;
    border-radius: var(--fossil-radius);
    box-shadow: 0 0 0.5rem rgb(var(--fossil-black)/.225);
}
:is(blockquote, div.blockquote)::before {
    content: "";
    position: absolute;
    top: -.325rem; right: -.325rem;
    width: 1.75rem; height: 1.75rem;
    background-color: rgb(var(--fossil-secondary));
    -webkit-mask-image: var(--blockquote-icon);
    mask-image: var(--blockquote-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#toc {
    display: grid;
    column-gap: .75rem;
    grid-template-areas:
        "title action"
        "list list";
    grid-template-columns: 1fr 3.75rem;
    align-items: center;
    background: transparent;
    padding: .5rem .75rem;
    border: none;
    border-inline-start: solid .175rem rgb(var(--fossil-accent));
    border-radius: var(--fossil-radius);
}
#toc .title {
    font-weight: bold;
    font-family: var(--header-font);
    margin: 0;
    padding: .325em;
    text-align: start;
}
#toc-list {
    grid-area: list;
    margin: 0;
    line-height: 1.5;
    font-family: var(--header-font);
}
#toc #toc-action-bar {
    grid-area: action;
    text-align: end;
}

#toc-action-bar a {
    text-transform: uppercase;
    font-size: .875em;
    color: rgb(var(--fossil-secondary));
    text-decoration-color: currentColor;
}
#toc-action-bar a:is(:hover,:focus) {
    color: rgb(var(--fossil-accent));
}

#toc-list div[style*="1em"] a{ font-size: 1.15em; }
#toc-list div[style*="2em"] a{ font-size: 1.025em; }
#toc-list div[style*="3em"] a{ font-size: 1em; }
#toc-list div[style*="4em"] a{ font-size: .95em; }
#toc-list div[style*="5em"] a{ font-size: .875em; }
#toc-list div[style*="6em"] a{ font-size: .75em; }
#toc-list a {
    text-decoration-color: rgb(var(--fossil-accent));
    color: rgb(var(--fossil-black));
}
#toc-list a:is(:hover,:focus) { color: rgb(var(--fossil-accent)); }

/*------- Rate Module -------*/

div.page-rate-widget-box, div.rate-box-with-credit-button {
    --_gap: .275rem;
    border-radius: var(--fossil-radius);
    padding: var(--_gap);
    gap: var(--_gap);
    box-shadow: 0 0 0.225rem rgb(var(--fossil-black)/.75);
}

div.page-rate-widget-box {
    gap: var(--_gap);
}
div.page-rate-widget-box .rate-points {
    padding-inline: .5em .25em;
}
.page-rate-widget-box :is(.rateup, .ratedown) a {
    display: grid;
    place-content: center;
    justify-items: center;
    box-sizing: border-box;
    text-decoration: none;
    aspect-ratio: 1;
    width: 1.195em;
    border-radius: var(--fossil-radius);
}
div.page-rate-widget-box .cancel a { text-decoration: none; }

div.creditButton p a {
    border: none;
    --sp_rate-module-text-color: rgb(var(--fossil-alt));
    --sp_rate-module-button-hover-color: rgb(var(--fossil-light));
    background-color: rgb(var(--fossil-alt)/.175);
    width: 1.275em;
    border-radius: var(--fossil-radius);
    aspect-ratio: 1;
}
div.creditButton p a:is(:hover,:focus) { background-color: rgb(var(--fossil-alt)); }

div.modalbox {
        box-sizing: border-box;
    border-radius: var(--fossil-radius);
    border: none;
    box-shadow: 0 0 1.5rem rgb(var(--fossil-black)/.25);
    background: rgb(var(--fossil-dark));
    --_gap: .5rem;
    gap: var(--_gap);
    padding: var(--_gap);
}
.modalbox > div > h2 {
    margin: 0;
    color: rgb(var(--fossil-accent));
}
div.modalbox .credit {
    margin: 0;
    overflow-y: auto;
    border-radius: calc(var(--fossil-radius) - var(--_gap));
    padding: 0.25rem 1.25rem;
    background-color: rgb(var(--fossil-light));
}

.modalbox .close-credits {
    top: calc(var(--_gap) + .375rem);
    right: calc(var(--_gap) + .375rem);
    width: auto;
}
.modalbox .close-credits a {
    display: grid;
    width: 1.65rem;
    box-sizing: border-box;
    padding: .25rem;
    place-items: center;
    aspect-ratio: 1;
    text-decoration: none;
    background-color: rgb(var(--fossil-dark));
    color: rgb(var(--fossil-accent));
    border: solid 0.1rem rgb(var(--fossil-accent));
    border-radius: var(--fossil-radius);
    font-weight: bold;
    font-size: .875em;
}
.modalbox .close-credits a:is(:hover,:focus) {
    color: rgb(var(--fossil-dark));
    background-color: rgb(var(--fossil-accent));
}

.modalbox > hr { display: none; }

/*------- Image Block -------*/

.scp-image-block {
    border: none;
    box-shadow: none;
}
.scp-image-block img {
    border-radius: var(--fossil-radius);
    box-shadow: 0 0 0.325rem rgb(var(--fossil-black)/.125);
}
.scp-image-block .scp-image-caption {
    background-color: rgb(var(--fossil-dark));
    color: rgb(var(--fossil-light));
    padding: .325rem;
    margin: -1.125rem auto 0;
    border-radius: var(--fossil-radius);
    border: solid 0.15rem rgb(var(--fossil-accent));
    box-sizing: border-box;
    width: calc(100% - var(--fossil-radius)*2);
    box-shadow: 0 0 0.575rem rgb(var(--fossil-black)/.425);
    position: relative;
    z-index: 1;
}

table.wiki-content-table :is(th,td) {
    border-color: rgb(var(--fossil-accent));
}
table.wiki-content-table th {
    background-color: rgb(var(--fossil-accent));
    color: rgb(var(--fossil-black));
}

/*--------- HR ----------*/

hr {
    --hr-icon-size: .875rem;
    margin: .75rem 0;
    background: transparent;
    height: var(--hr-icon-size);
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: unset;
}
hr::before, hr::after {
    content: "";
    display: grid;
    grid-column: 1/2;
    grid-row: 1/2;
    background-color: rgb(var(--fossil-secondary));
}
hr::before {
    height: 0.05rem;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, black calc(50% - var(--hr-icon-size)/2 - 0.125rem), transparent calc(50% - var(--hr-icon-size)/2 - 0.125rem), transparent calc(50% + var(--hr-icon-size)/2 + 0.125rem), black calc(50% + var(--hr-icon-size)/2 + 0.125rem));
    mask-image: linear-gradient(90deg, black calc(50% - var(--hr-icon-size)/2 - 0.125rem), transparent calc(50% - var(--hr-icon-size)/2 - 0.125rem), transparent calc(50% + var(--hr-icon-size)/2 + 0.125rem), black calc(50% + var(--hr-icon-size)/2 + 0.125rem));
}
hr::after {
    width: var(--hr-icon-size);
    height: var(--hr-icon-size);
    border-radius: calc(var(--hr-icon-size)*.25);
    border: solid 0.075rem rgb(var(--fossil-secondary));
    box-sizing: border-box;
    background: transparent;
    transform: rotate(45deg);
}

/*------- Tabs -------*/

div.yui-navset {
    display: grid;
    grid-template-areas: "tab content";
    grid-template-columns: 10.5rem minmax(0,1fr);
    align-items: flex-start;
    --_gap: .45rem;
    gap: var(--_gap);
    padding: var(--_gap);
    background-color: rgb(var(--fossil-dark));
    border-radius: var(--fossil-radius);
    box-shadow: 0 0 0.575rem rgb(var(--fossil-black)/.425);
}
.yui-navset .yui-nav {
    grid-area: tab;
    display: grid;
    border: none;
    gap: var(--_gap);
    font-size: clamp(.875em, calc(.5em + .675vw), .9125em);
    top: var(--_gap);
    position: sticky;
}

.yui-navset.yui-navset-top .yui-nav li a {
    border-radius: calc(var(--fossil-radius) - var(--_gap) + 0.02rem);
    border-width: .125rem;
    padding: .575em;
}
.yui-navset.yui-navset-top .yui-nav .selected a {
    font-weight: bold;
}
.yui-navset .yui-content {
    grid-area: content;
    align-self: stretch;
    border: none;
    border-radius: calc(var(--fossil-radius) - var(--_gap) + 0.01rem);
    padding: 0.325rem 1.25rem;
    background-color: rgb(var(--fossil-light));
    min-height: var(--fossil-radius);
}

/*------- Collapsible -------*/

a.collapsible-block-link {
    color: rgb(var(--fossil-secondary));
    text-decoration: none;
    display: inline-flex;
    gap: .5em;
    align-items: center;
    font-weight: bold;
}
a.collapsible-block-link:is(:hover,:focus) {
    color: rgb(var(--fossil-accent));
    background: transparent;
}

a.collapsible-block-link::before {
    display: grid;
    width: 1.375em;
    height: 1.375em;
    place-items: center;
    font-size: 1.325em;
    border-radius: var(--fossil-radius);
}
:where(.collapsible-block-folded) a.collapsible-block-link::before {
    content: "+";
    color: rgb(var(--fossil-secondary));
    background: rgb(var(--fossil-accent)/.375);
}
:where(.collapsible-block-unfolded) a.collapsible-block-link::before {
    content: "−";
    color: rgb(var(--fossil-light));
    background: rgb(var(--fossil-dark));
}
:where(.collapsible-block-folded) a.collapsible-block-link:is(:hover,:focus)::before {
    color: rgb(var(--fossil-light));
    background: rgb(var(--fossil-accent));
}
:where(.collapsible-block-unfolded) a.collapsible-block-link:is(:hover,:focus)::before {
    color: rgb(var(--fossil-accent));
}

/*------- Footnotes & Biblio -------*/

a.footnoteref, a.bibcite {
    font-family: var(--mono-font);
}

.bibitems, .footnotes-footer {
    display: grid;
    gap: .425rem;
    line-height: 1.325;
    height: auto;
    margin-block: .5rem;
    clear: both;
}
:is(.bibitems, .footnotes-footer) .title {
    font-family: var(--header-font);
    font-size: 1.375em;
    margin: 0;
}
.footnote-footer > a:first-child {
    font-family: var(--mono-font);
}

.hovertip {
    border-radius: calc(var(--fossil-radius)*.75);
    box-shadow: 0 0 0.5rem rgb(var(--fossil-black)/.325);
    -webkit-backdrop-filter: blur(.125rem);
    backdrop-filter: blur(.125rem);
    max-width: 30rem;
}

.hovertip .content {
    padding: .625rem .875rem;
}

.footnote .f-heading, .equation .e-heading, .reference .r-heading {
    font-family: var(--mono-font);
    background: rgb(var(--fossil-dark));
    color: rgb(var(--fossil-light));
    position: absolute;
    inset-block-start: -1em;
    inset-inline-start: -.75em;
    padding: .325em .75em;
    border-radius: var(--fossil-radius);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    font-size: .775em;
    font-family: var(--mono-font);
    text-align: end;
}


/*---------------------------------------*/

.owindow {
    border-radius: var(--fossil-radius);
    border: none;
    box-shadow: 0 0 1rem rgb(var(--fossil-black)/.375);
}
.owindow .title {
    cursor: auto;
    font-size: 1.325em;
    font-family: var(--header-font);
    font-weight: bold;
    color: rgb(var(--fossil-secondary));
    padding: 0.5rem 1.25rem;
    background-color: transparent;
    height: auto;
}

/*---------------------------------------*/

#main-content .page-tags {
    display: grid;
    gap: .25rem;
    margin-block: 1rem;

}
#main-content .page-tags::before {
    content: "TAGS";
    font-family: var(--mono-font);
    font-weight: bold;
    font-size: .875em;
    display: block;
}
#main-content .page-tags span {
   border: none;
}
#main-content .page-tags a {
    text-decoration : none;
    border-radius: var(--fossil-radius);
    color: rgb(var(--fossil-alt));
    background-color: rgb(var(--fossil-alt)/.1375);
    padding: .375em .875em;
}
#main-content .page-tags a:is(:hover,:focus) {
    background-color: rgb(var(--fossil-alt));
    color: rgb(var(--fossil-light));
}

/*---------------------------------------*/

#page-info, .page-watch-options {
    font-family: var(--mono-font);
    font-size: .75em;
}

.page-options-bottom a {
    --_link-color: var(--fossil-secondary);
    color: rgb(var(--_link-color));
    text-decoration-color: currentColor;
}
.page-options-bottom a:is(:hover,:focus) {
    color: rgb(var(--fossil-accent));
    background-color: rgb(var(--_link-color)/.05);
}

/*---------------------------------------*/
/*------- BOTTOM AREA -------*/
/*---------------------------------------*/

#extrac-div-1 {
    --_bottom-offset: 5rem;
    background-image: linear-gradient(166.5deg, rgb(var(--fossil-black)/.325) 45%, transparent 55%), var(--fossil-footer);
    background-size: cover;
    background-position: center;
    background-attachment: local, fixed;
    aspect-ratio: 4;
    width: 100%;
    max-height: calc((var(--sp_final-header-height) + var(--fossil-header-slice-offset))*.55);
    padding-bottom: var(--_bottom-offset);
    clip-path: polygon(100% 0, 0 calc(100% - var(--_bottom-offset)), 0 100%, 100% 100%);
}

#footer {
    align-items: center;
    font-family: var(--mono-font);
    font-size: .825em;
    background-color: rgb(var(--fossil-accent));
    color: rgb(var(--fossil-dark));
    padding-block: .375rem;
    margin: 0;
}
#footer a {
    color: inherit;
    font-weight: bold;
}

#license-area, #footer-bar {
    background-color: rgb(var(--fossil-dark));
    color: rgb(var(--fossil-light));
    font-size: .95em;
    padding-block: 1rem;
}
#license-area a {
    font-weight: bold;
}

/*---------------------------------------*/

/* fuck u safari */
@supports (-webkit-hyphens:none) {
#header-extra-div-1,#extrac-div-1 {
     background-attachment: local;
}
}

/*---------------------------------------*/
/*------- MOBILE QUERY -------*/
/*---------------------------------------*/

@media screen and (max-width: 767px) {

:root {
    --sp_area-min-margin: 1.325rem;
}

body {
    font-size: .875em;
}

#header {
    grid-template-rows: auto auto var(--sp_header-logo-adaptive-size) auto 1fr;
}
#header::before {
    grid-row: 3/4;
    grid-column: 2/3;
    justify-self: center;
}
#header h1, #header h2 {
    max-width: unset;
    text-align: center;
}

#content-wrap {
    margin-inline: auto;
    width: calc(100% - var(--sp_area-min-margin)*2);
    margin-block: 2rem 0;
}

#top-bar div[class*="top-bar"] > ul > li {
    position: static;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul {
    grid-template-columns: repeat(2, 1fr);
}

div.yui-navset {
    grid-template-areas:
        "tab"
        "content";
    grid-template-columns: minmax(0,1fr);
}
.yui-navset .yui-nav {
    display: flex;
    flex-wrap: wrap;
    position: static;
}
.yui-navset .yui-nav li { flex-grow: 1; }

}
[[/code]]
[[/collapsible]]
[[/iftags]]

Fossil Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source