單型 外觀主題

您正在查詢的標題為：關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：人物檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

您正在查詢的標題為：基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消

dummy

繁中原創

主站翻譯

dummy

---

俄文分部

韓文分部

中國分部

法文分部

波蘭分部

西語分部

泰文分部

日文分部

德文分部

義語分部

烏克蘭分部

葡語分部

捷克分部

越南分部

這是什麼

這是些被我，Croquembouche，使用在許多頁面上的各種「改進用」CSS代碼，因為我認為它能讓我更輕易地去處理問題。

這個組件做出了一些小小的調整，使得人們能得到更為舒適的書寫體驗，並且在編篡組件/外觀主題時也能更加輕鬆一點（我很常這麼覺得）。對於讀者來說，這沒有對任何可看的部分做出任何的變化 —— 真正有感的是寫的人。

我並不期望有使用該組件的文章在被翻譯過後也跟著使用這個組件，除非譯者喜歡這個組件並無論如何都想要使用它。

這個組件基本上不會與其它的組件或外觀主題相互衝突，而若即便發生了，那可能也不會造成顯著的影響。

使用方法

在任何頁面上加入以下的代碼：

[[include :scp-zh-tr:component:croqstyle]]

這個組件是設計給其它的組件所使用的。如果你在其它組件裡使用到的話，請確保將其添加在那個組件的[[iftags]]區塊裡面，這樣你組件的使用者就不會被迫跟著使用Croqstyle了。

相關組件

其它的個人設計組件（也是做出了一些改動）：

• RSO 組件 — Rounderhouse

個人設計主題（對整體外觀做了大幅調整）：

• Magnus網頁版式 — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

CSS修改

合理化大小的腳註

讓有比較多內容的腳註不再會有十萬八千里那麼長，讓你可以真正意義上地去讀它們了。

.hovertip { max-width: 400px; }

等寬字體式編輯/編碼

讓你的編輯文字視窗套用等寬字體，並同時將Fira Code作為所有等寬字體使用的字型，那顯然比原本的還要更加優越。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

打字機體的背景顏色

為<tt>元素（{{text}}）添加了淡灰色的背景，讓代碼片段能在文中較為突顯出來。

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

大臉照退散

停用了當你把游標懸浮於某人的頭像上時會顯示放大版圖片的功能，因為那很蠢而且相當煩人，如果真的想要看較大的圖片只需要點一下就好了。

.avatar-hover { display: none !important; }

斷斷續續

所有被包覆在nobreak這個class的div裡面的文字，將會以每個英文字母為標準來做換行。

.nobreak { word-break: break-all; }

代碼著色

我把我終端上的代碼顏色作為變數加了上來。也許在未來的某一天，我會把它換成其他更為廣泛使用的終端主題配色，像是Monokai或者其他的，但現在就是我所使用的個人主題配色，沿襲自Tomorrow Night Eighties。

與此同時，我也添加了.terminal這個class來呈現出一個假的代碼區塊，當你使用[[div class="code terminal"]]並搭背著深色背景時，它看起來就會有點偽終端的樣子。這不會在[[code]]上起作用，因為Wikidot插入了一大堆凸顯用的語法，所以如果你想修改的話也得用上大量的CSS。僅供非[[code]]的代碼片段使用。

一個能能用上述變數對『標準』的Wikidot組件用例作顏色變換的快速工具：連結

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

除錯模式

在.debug-mode裡面的所有東西都會被框線所包圍。線條的顏色是紅色，但實際上將取決於--debug-colour這個CSS變數。

你也可以在一個元素之中加入div.debug-info.over和div.debug-info.under來標註出除錯區塊 —— 不過你要確保有偽這些標註預留足夠的垂直空間，以避免與上方或下方的東西相互重疊到。

……就像這個！

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

≡

單型 外觀主題

評分模組：

著作資訊模組：

作品著作資訊

---

你頁面的資訊。

---

更多資訊

更多資訊

---

你頁面的更多資訊。

---

這是個在Woedenaz的些許幫助之下，由EstrellaYoshte所製作而成的美觀性主題。為了要使用它，請將以下代碼複製到你的文章裡面：

[[include :scp-zh-tr:theme:monotypical]]

---

圖像。

一條水平線可以透過使用5個連字號「-----」¹來創建，並且如果它沒被包在任何東西裡面的話（例如引用塊），它會延伸並橫跨整個頁面。在這份文件中被拿來分段的就是水平線。

標題可以被以在一行的開頭添加一至六個加號「+」來創建。

+ 摺疊頁 - 點我

一級標題

二級標題

三級標題

四級標題

五級標題

六級標題

Tabulator

這是一個tabview。²

Tabulation

嘿，看看這裡，這裡有更多文字。

多麼別緻啊。

長Tab

這是個長Tab。裡面容納了大量文字。³

這是個長Tab。裡面容納了大量文字。

這是個長Tab。裡面容納了大量文字。

這是個長Tab。裡面容納了大量文字。

這是個長Tab。裡面容納了大量文字。

這是個長Tab。裡面容納了大量文字。

這是個長Tab。裡面容納了大量文字。

這是個長Tab。裡面容納了大量文字。

更長的Tab

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

這也是個長Tab。裡面容納了大量文字。

空Tab

這是個引用塊，可以透過在每一行的開頭添加「> 」來創建。
更多文字

---

這是個水平線。

巢狀引用塊

這是個	表格
你應該要	要知道該如何
創建這東西了
1	2
3	4
它們裡面	誰最大？
#十六進制	#最高位

Header使用的字體是Century Gothic/Quicksand。

Body使用的字體是Ubuntu。

Monospace使用的字體是Fira Code。

Footnotes

1. 這是為了安撫Placeholder McD。

2. 這是一個註解。

3. 這也是一個註解。

深度分析

Croqstyle CSS會隨著這個主題一起被引用。

[[div class="monoboxical"]]

Hello world!

[[div class="meta-title"]]

在此插入標題

單型預設隱藏了原生的標題，所以要用meta-title來做出標題的效果。

[[div class="header-center"]]

置中1級標題

置中2級標題

置中5級標題

出於標題在這個外觀主題裡運作的方式，它們得要放在header-center div裡面才能夠正常置中。

這也會置中一般的文字。

CSS 變數
單型的外觀是藉由以下的變數來去做控制的：

:root {
    --linkColor: #FC8391;
    --linkColor-newpage: #FC9958;
 
    --primaryBackgroundColor: #F9F9F9;
    --secondaryBackgroundColor: #EFEFEF;
    --tertiaryBackgroundColor: #E0E0E0;
    --borderColor: #C6C6C6;
 
    --shadow: rgba(0,0,0,0.225);
 
    --selectionColor: #FFE419;
    --textColor: #0E0E0E;
    --textColor-alt: #8E8E8E;
 
    /*----- Technical Variables -----*/
 
    --body-font: 'Ubuntu', sans-serif;
    --header-font: 'Century Gothic', 'Quicksand', sans-serif;
    --header-title: 'SCP FOUNDATION';
 
    --sidebar-width: 15rem;
    --sidebar-timing: 0.275s ease-out;
    --header-height: 5.5rem;
    --page-content-width: 954px;
 
    --radius-adjust: 0.95rem;
    --link-timing: .125s ease-out;
}

你可以修改這些變數來改變單型看起來的樣子。這裡有些預組好的組合可以讓你放在[[include]]的後面：

---

:root {
    --linkColor: #88C0D0;
 
    --primaryBackgroundColor: #ECEFF4;
    --secondaryBackgroundColor: #E5E9F0;
    --tertiaryBackgroundColor: #D8DEE9;
    --borderColor: #4C566A;
 
    --shadow: rgba(46,52,64,0.25);
 
    --selectionColor: #EBCB8B;
    --textColor: #2E3440;
    --textColor-alt: #434C5E;
}
#side-bar, #license-area {
    --secondaryBackgroundColor: #2E3440;
    --tertiaryBackgroundColor: #434C5E;
    --textColor: #D8DEE9;
}

---

:root {
    --linkColor: #2aa198;
 
    --primaryBackgroundColor: #fdf6e3;
    --secondaryBackgroundColor: #eee8d5;
    --tertiaryBackgroundColor: #002b36;
    --borderColor: #93a1a1;
 
    --shadow: rgba(0,0,0,0.2);
 
    --selectionColor: #268bd2;
    --textColor: #586e75;
    --textColor-alt: #C39006;
}
#side-bar .heading, #license-area {
    --textColor: #fdf6e3;
}

---

:root {
    --linkColor: #FF799A;
 
    --primaryBackgroundColor: #282A36;
    --secondaryBackgroundColor: #2F3142;
    --tertiaryBackgroundColor: #BD93F9;
    --borderColor: #6272A4;
 
    --shadow: rgba(96,213,248,0.3);
 
    --selectionColor: #50FA7B;
    --textColor: #F8F8F2;
    --textColor-alt: #6272A4;
}
::-webkit-scrollbar-track {
    background: var(--secondaryBackgroundColor);
}

---

請隨意用你的配色方案去動手試試看吧！

原始碼

展開

/*
    Monotypical Theme
    [2021 Wikidot Theme]
    By EstrellaYoshte
    Based on:
      Paperstack Theme by EstrellaYoshte
      Penumbra Theme by EstrellaYoshte
      Black Highlighter by Woedenaz
*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
 
/*---- Dismantling and Rebuilding the Structure ----*/
 
div#container-wrap {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: auto 1fr auto auto auto;
    overflow: hidden;
    background: none;
}
#container, #content-wrap {
    display: contents;
}
 
#header {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}
 
#main-content {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
}
#footer {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
}
#license-area {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 3;
}
#footer-bar {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 3;
}
 
#side-bar {
    grid-row-start: 1;
    grid-row-end: 5;
    grid-column-start: 1;
    grid-column-end: 2;
}
 
/*-------Basic Layout---------*/
 
#header, #top-bar {
     width: 100%;
     max-width: 100%;
     margin: 0;
     padding: 0;
}
 
#main-content {
    position: relative;
    margin: 0;
    max-width: 100%;
}
 
#footer {
    margin-top: 0;
}
 
#footer-bar {
    z-index: 0;
}
 
#side-bar {
    position: fixed;
    top: 0;
    left: 0;
 
    margin: 0;
    padding: 0;
 
    width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 0;
}
#side-bar:focus-within { z-index: 99; }
 
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
 
:root {
    --linkColor: #FC8391;
    --linkColor-newpage: #FC9958;
 
    --primaryBackgroundColor: #F9F9F9;
    --secondaryBackgroundColor: #EFEFEF;
    --tertiaryBackgroundColor: #E0E0E0;
    --borderColor: #C6C6C6;
 
    --shadow: rgba(0,0,0,0.225);
 
    --selectionColor: #FFE419;
    --textColor: #0E0E0E;
    --textColor-alt: #8E8E8E;
 
    /*----- Technical Variables -----*/
 
    --body-font: 'Ubuntu', sans-serif;
    --header-font: 'Century Gothic', 'Quicksand', sans-serif;
    --header-title: 'SCP FOUNDATION';
 
    --sidebar-width: 15rem;
    --sidebar-timing: 0.275s ease-out;
    --page-content-width: 954px;
 
    --radius-adjust: 0.95rem;
    --link-timing: .125s ease-out;
}
 
body {
    font-family: var(--body-font);
    font-size: 0.9675rem;
    color: var(--textColor);
    background-color: var(--primaryBackgroundColor);
}
body, li, p { line-height: 1.5; }
 
img {
    max-width: 100%;
}
 
tt {
    background-color: var(--secondaryBackgroundColor);
    font-size: .925em;
}
code {
    font-family: var(--mono-font);
}
#edit-page-textarea, .code pre, .code p, .code, .page-source {
    font-size: .95em;
}
 
#main-content {
    background-color: var(--primaryBackgroundColor);
    padding: 1em 3em;
}
 
span.printuser {
    display: inline-flex;
    align-items: baseline;
}
#main-content span.printuser.deleted img,
.hovertip span.printuser a:first-of-type,
#main-content span.printuser a:first-of-type {
    display: inline-block;
    height: 1em;
    position: relative;
    margin-right: 0;
    user-select: none;
}
 
#page-content {
    width: 100%;
    max-width: var(--page-content-width);
    margin: 0 auto 2rem;
    min-height: 100vh;
}
 
#page-content a:not(#u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a) {
    color: var(--textColor);
    padding: 0.1em;
    text-decoration: none;
 
    border-bottom: solid 2px var(--linkColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#page-content a:not(#u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a):hover,
#page-content a:not(#u-sb-button, #u-no-more-menu, .page-rate-widget-box a, .creditRate a, .printuser.avatarhover a:first-child, ul.yui-nav a, .scp-image-block a):focus {
    background-size: 100% 100%;
}
 
#page-content a.newpage {
    --linkColor: var(--linkColor-newpage);
}
 
/* adjusting avatar username spacing */
.printuser.avatarhover a:first-child {
    margin-left: 0.15em;
}
.printuser.avatarhover a:nth-child(2) {
    margin-left: -0.45em;
}
 
/* ---- SCROLLBAR ---- */
 
::-webkit-scrollbar {
    width: 10px;
    background: transparent;
}
 
::-webkit-scrollbar-track {
    background: var(--tertiaryBackgroundColor);
}
 
::-webkit-scrollbar-thumb {
    background: var(--linkColor);
    border: none;
    border-radius: var(--radius-adjust);
}
/* firefox support */
:root,
#side-bar {
    scrollbar-color: var(--linkColor) var(--tertiaryBackgroundColor);
    scrollbar-width: thin;
}
 
/*---- HEADER ----*/
 
#header {
    z-index: 4;
    background: var(--primaryBackgroundColor);
}
 
#page-title,
#header h2 {
    display: none;
}
 
#header h1 {
    margin-left: 0;
    padding: 0;
    float: none;
    width: 100%;
}
#header h1 a {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    vertical-align: middle;
    font-size: 3.25rem;
    padding: 0.5rem 0.5rem 0;
    margin: auto;
    text-align: center;
    text-shadow: none;
    color: var(--textColor);
    font-family: var(--header-font);
    font-weight: lighter;
}
/* Hide the existing text */
#header h1 span { font-size: 0; display: none; }
#header h1 a::before {
  content: var(--header-title);
}
 
#login-status {
    position: absolute;
    top: 0.4rem;
    right: 3.25em;
    width: max-content;
    font-size: 0.78em;
    text-align: center;
    z-index: 10;
}
#login-status, #login-status a {
    color: var(--textColor);
}
#login-status span.printuser  {
    font-size: 0;
}
#login-status span.printuser img {
    font-size: 0;
    transform: translate(6px, 5px);
}
#login-status a#my-account {
    display: none;
}
#account-topbutton {
    border: none;
    margin-left: -0.1rem;
    padding: 0 0.5rem;
}
 
div#account-options {
    right: 0;
    background-color: var(--primaryBackgroundColor);
    width: 10rem;
    border: none;
    border-radius: calc(var(--radius-adjust)*0.3725);
    box-shadow: 0 0 5px 1px var(--shadow);
 
    display: block!important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
#account-topbutton:focus + #account-options,
#account-topbutton:active + #account-options,
#account-options:focus-within {
    opacity: 1;
    pointer-events: all;
}
/* Without this, touchscreen doesn't work */
@media (pointer: coarse) {
    #account-topbutton:hover + #account-options,
    #account-options:hover {
        opacity: 1;
        pointer-events: all;
    }
}
 
div#account-options li a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
    padding: 0.25rem 0;
}
div#account-options li a:hover,
div#account-options li a:focus {
    text-decoration: none;
    background-size: 100% 100%;
    color: var(--textColor);
}
div#account-options li:first-of-type a {
    border-radius: calc(var(--radius-adjust)*0.3725) calc(var(--radius-adjust)*0.3725) 0 0;
}
div#account-options li:last-of-type a {
    border-radius: 0 0 calc(var(--radius-adjust)*0.3725) calc(var(--radius-adjust)*0.3725);
}
 
div#search-top-box {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    z-index: 31;
}
div#search-top-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; right: 0.05rem;
    background-color: var(--linkColor);
    pointer-events: none;
    z-index: 32;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cmetadata/%3E%3Cpath d='M505 443 405 343c-4-4-10-7-17-7h-16a208 208 0 1 0-36 36v16c0 7 3 13 7 17l100 100c9 9 24 9 34 0l28-28c9-10 9-25 0-34zM208 336a128 128 0 1 1 0-256 128 128 0 0 1 0 256z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cmetadata/%3E%3Cpath d='M505 443 405 343c-4-4-10-7-17-7h-16a208 208 0 1 0-36 36v16c0 7 3 13 7 17l100 100c9 9 24 9 34 0l28-28c9-10 9-25 0-34zM208 336a128 128 0 1 1 0-256 128 128 0 0 1 0 256z'/%3E%3C/svg%3E");
    -webkit-mask-size: 1rem;
            mask-size: 1rem;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 1;
    transition: opacity 0.25s ease;
}
div#search-top-box:focus-within::before { opacity: 0; }
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end;
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    position: relative;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    font-family: var(--body-font);
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.1em 0.5em;
    box-sizing: border-box;
    border-radius: var(--radius-adjust);
    border: none;
    box-shadow: 0 0 2px 1.5px var(--shadow);
}
 
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover,
div#search-top-box form input[type="text"]:focus {
    background-color: var(--primaryBackgroundColor)!important;
    color: var(--textColor);
    display: inline-block;
    border: none;
    height: 1.6rem;
    width: 9rem;
    transition: width .25s;
    outline: none;
    border-radius: var(--radius-adjust);
    box-shadow: 0 0 2px 1.5px var(--shadow);
}
 
div#search-top-box form input[type="submit"] {
    display: none;
}
 
/*------ Top Bar, unfortunately un-reborn -------*/
 
#top-bar {
    z-index: 9;
    height: auto;
    right: initial;
}
 
#top-bar .mobile-top-bar .open-menu, #side-bar a.close-menu {
    display: none; /* nix the sidebar button in favor of my own */
}
 
#top-bar div.mobile-top-bar {
    display: none;
}
 
#top-bar div[class*=top-bar] {
    font-size: 100%;
    max-width: var(--page-content-width);
    margin: 0 auto;
}
#top-bar div[class*=top-bar] a {
    text-decoration: none;
}
 
#top-bar div[class*=top-bar] ul {
    background: transparent;
    list-style: none;
    margin: 0;
    padding: 0;
 
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    text-align: center;
}
 
#top-bar div[class*=top-bar] > ul > li {
    position: relative;
    flex-grow: 1;
}
#top-bar div[class*=top-bar] > ul > li > a {
    flex-grow: 1;
    line-height:0;
    padding: 1.5rem;
    border-radius: calc(var(--radius-adjust)*0.5);
    transition: background-color var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li > a:hover,
#top-bar div[class*=top-bar] > ul > li.sfhover > a,
#top-bar div[class*=top-bar] > ul > li > a:focus,
#top-bar div[class*=top-bar] > ul > li:focus-within > a {
    background-color: var(--tertiaryBackgroundColor);
}
 
#top-bar div[class*=top-bar] > ul > li > ul {
    visibility: visible;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    display: flex;
    width: max-content;
    min-width: 100%;
    flex-direction: column;
    background: var(--primaryBackgroundColor);
    border-radius: calc(var(--radius-adjust)*0.5);
    box-shadow: 0 0 6px 2px var(--shadow);
 
    transition: opacity var(--link-timing);
}
#top-bar div[class*=top-bar] > ul > li:hover > ul,
#top-bar div[class*=top-bar] > ul > li > ul:hover,
#top-bar div[class*=top-bar] > ul > li:focus-within > ul,
#top-bar div[class*=top-bar] > ul > li > ul:focus-within {
    opacity: 1;
    pointer-events: all;
}
#top-bar div[class*=top-bar] ul li ul::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--primaryBackgroundColor) transparent;
}
 
#top-bar div[class*=top-bar] > ul > li > ul > li {
    position: relative;
    width: auto;
}
 
#top-bar div[class*=top-bar] ul > li > ul > li > a,
#top-bar li ul li.sfhover a:hover,
#top-bar li ul li:hover a:hover {
    height: auto;
    max-height: none;
    padding: 0.4rem;
    width: auto;
    text-align: center;
 
    background: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#top-bar div[class*=top-bar] ul li ul li a:hover,
#top-bar div[class*=top-bar] ul li ul li a:focus {
    background-size: 100% 100%;
}
 
#top-bar div[class*=top-bar] ul li ul li:first-of-type a {
    border-top-left-radius: calc(var(--radius-adjust)*0.5);
    border-top-right-radius: calc(var(--radius-adjust)*0.5);
}
#top-bar div[class*=top-bar] ul li ul li:last-of-type a {
    border-bottom-left-radius: calc(var(--radius-adjust)*0.5);
    border-bottom-right-radius: calc(var(--radius-adjust)*0.5);
}
 
#top-bar div[class*=top-bar] > ul:first-of-type > li:last-of-type > ul {
    right: 0;
    left: auto;
}
 
@media only screen and (max-width: 767px) {
    #top-bar {
        width: 95%;
        margin: 0.1rem auto;
    }
    #top-bar div.mobile-top-bar {
        display: block;
    }
    #top-bar div.top-bar {
        display: none;
    }
}
 
/*---- SIDEBAR ----*/
 
#side-bar {
    display: block;
    box-sizing: border-box;
    background-color: var(--secondaryBackgroundColor);
    border-right: solid 2px var(--borderColor);
}
#side-bar::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
 
#side-bar .side-block {
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
}
 
#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources  {
    background-color: transparent;
}
 
#side-bar .side-block.resources > .collapsible-block {
    color: var(--textColor);
    background-color: var(--tertiaryBackgroundColor);
    border-bottom: none;
    font-family: var(--header-font);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
    text-align: right;
}
 
#side-bar .side-block.media > * {
    display: flex;
    justify-content: space-evenly;
}
 
#side-bar .side-block.media {
    border-bottom: solid 2px var(--borderColor);
}
 
#side-bar .side-block .menu-item > .image {
    display: none;
}
 
#side-bar .heading {
    color: var(--textColor);
    background-color: var(--tertiaryBackgroundColor);
    border-top: solid 2px var(--borderColor);
    border-bottom: none;
 
    font-family: var(--header-font);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 0.1rem 0.3rem;
    margin-top: 0.75rem;
    text-align: right;
}
#side-bar .heading p { margin: 0; }
 
#side-bar div.menu-item, #side-bar div.menu-item > p {
    display: flex;
    flex-basis: auto;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    font-size: 0;
}
 
#side-bar div.menu-item.small { font-size: 0; }
#side-bar div.menu-item.small a { font-size: 0.75rem; }
 
#side-bar div.menu-item a {
    font-weight: normal;
    color: var(--textColor);
    text-decoration: none;
 
    justify-content: center;
    width: auto;
    padding: .2rem .4rem;
    flex-grow: 1;
    font-size: 0.875rem;
    border-bottom: solid 1px var(--linkColor);
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#side-bar div.menu-item a[href="/"],
#side-bar div.menu-item a[href*="/forum:start"],
#side-bar div.menu-item a[href*="scp-series"] {
    padding: .25rem;
    text-align: center;
}
#side-bar div.menu-item a[href="/"],
#side-bar div.menu-item a[href*="/forum:start"] {
    border-bottom: none;
    padding: 0.25em 0;
    font-weight: bold;
    margin-top: 0.5rem;
}
 
#side-bar div.menu-item a:hover,
#side-bar div.menu-item a:focus {
    background-size: 100% 100%;
}
 
iframe.scpnet-interwiki-frame, div.scpnet-interwiki-wrapper {
    width: var(--sidebar-width);
    margin: 0 auto;
}
 
/*---- Sidebar Transition Mechanism----*/
 
#header,
#main-content,
#footer,
#license-area,
#footer-bar {
    position: relative;
    left: 0;
    transition: left var(--sidebar-timing);
}
 
#container:target #header,
#container:target #main-content,
#container:target #u-sb-button,
#container:target #footer,
#container:target #license-area,
#container:target #footer-bar {
    left: var(--sidebar-width);
}
 
/* Sidebar Toggle */
 
#u-mono-structure { display: contents; }
#u-mono-structure > br { display: none; }
 
#u-sb-button {
    position: fixed;
    z-index: 10;
    top: 0; left: 0;
    transition: left var(--sidebar-timing);
 
    display: block;
    height: 2.6rem;
    width: 2.6rem;
    background-color: var(--primaryBackgroundColor);
    color: var(--textColor);
    font-weight: bold;
    font-size: 2rem;
    line-height: 0.8rem;
    text-align: center;
    text-decoration: none;
}  
 
#u-no-more-menu {
    display: none;
}
#container:target #u-no-more-menu {
    display: block;
    position: fixed;
    width: calc(100% - var(--sidebar-width));
    height: 100%;
    top: 0;
    right: 0;
    z-index: 12;
    pointer-events: all;
}
 
/* ---- META-TITLE ---- */
 
.meta-title {
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: none;
    margin: 0.5rem 0;
    color: var(--textColor);
    font-family: var(--header-font);
    font-size: 215%;
}
.meta-title::before,
.meta-title::after {
    content: "";
    flex-grow: 1;
    height: 0.1rem;
    margin: auto auto auto 0.65rem;
    background-color: var(--borderColor);
}
.meta-title::before {
    margin: auto 0.65rem auto auto;
}
 
/* ---- BREADCRUMBS ---- */
 
#breadcrumbs, #page-content .pseudocrumbs {
    font-size: 0.95em;
    line-height: 1.15em;
}
#breadcrumbs a,
#main-content #page-content .pseudocrumbs > a {
    color: var(--textColor);
    padding: 0.05em;
    text-decoration: none;
 
    border-bottom: solid 1px var(--linkColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#breadcrumbs a:hover,
#breadcrumbs a:focus,
#main-content #page-content .pseudocrumbs a:hover,
#main-content #page-content .pseudocrumbs a:focus {
    background-size: 100% 100%;
}
 
#breadcrumbs {
    text-align: center;
    grid-column: 1 / span 2;
    grid-area: page-title;
    width: max-content;
    margin: 0 auto;
 
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
}
 
#page-content .pseudocrumbs { margin: -1.5em 0 -0.15em; }
 
/* ---- TABS ---- */
 
/* ---- YUI TAB BASE ---- */
.yui-navset .yui-nav a,.yui-navset .yui-navset-top .yui-nav a{background-color:inherit;background-image:inherit}.yui-navset .yui-nav a:hover,.yui-navset .yui-nav a:focus{background:inherit;text-decoration:inherit}.yui-navset .yui-nav .selected a,.yui-navset .yui-nav .selected a:focus,.yui-navset .yui-nav .selected a:hover{color:inherit;background:inherit}.yui-navset .yui-nav,.yui-navset .yui-navset-top .yui-nav{border-color:inherit}.yui-navset li{line-height:inherit}
 
/* ---- YUI TAB CUSTOMIZATION ----*/
 
 .yui-navset .yui-nav,
 .yui-navset .yui-navset-top .yui-nav {
     display: flex;
     flex-wrap: wrap;
     width: calc(100% - .125rem);
     margin: 0 auto;
     border-color: var(--linkColor);
     box-shadow: none;
     border-width: 0 1px 2px;
}
 .yui-navset .yui-nav a, /* ---- Link Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav a {
     color: var(--textColor-alt);
    /* ---- Tab Background Colour | [UNSELECTED] ---- */
     background-color: var(--secondaryBackgroundColor);
     border: unset;
     box-shadow: none;
}
 .yui-navset .yui-nav a:hover,
 .yui-navset .yui-nav a:focus {
     color: var(--textColor)!important;
     text-decoration: none;
    /* ---- Tab Background Colour | [HOVER] ---- */
     background-color: var(--linkColor);
}
 .yui-navset .yui-nav li, /* ---- Listitem Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav li {
     position: relative;
     display: flex;
     flex-grow: 2;
     max-width: 100%;
     margin: 0;
     padding: 0;
     background-color: var(--secondaryBackgroundColor);
     border: solid 1px var(--linkColor); border-bottom: none; border-top-width: 2px;
     box-shadow: none;
}
 .yui-navset .yui-nav li a,
 .yui-navset-top .yui-nav li a,
 .yui-navset-bottom .yui-nav li a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
}
 .yui-navset .yui-nav li em{
     border: unset;
}
 .yui-navset .yui-nav a em,
 .yui-navset .yui-navset-top .yui-nav a em {
     padding: .35em .75em;
 
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
}
 .yui-navset .yui-nav .selected, /* ---- Selection Modifier ---- */
 .yui-navset .yui-navset-top .yui-nav .selected {
     flex-grow: 2;
     margin: 0;
     padding: 0;
    /* ---- Tab Background Colour | [SELECTED] ---- */
     background-color: var(--linkColor);
}
 .yui-navset .yui-nav .selected a,
 .yui-navset .yui-nav .selected a em {
     border: none;
}
 .yui-navset .yui-nav .selected a {
     width: 100%;
     color: var(--textColor);
}
 .yui-navset .yui-nav .selected a:focus,
 .yui-navset .yui-nav .selected a:active {
     color: var(--textColor);
     background-color: var(--linkColor);
}
 #page-content .yui-navset .yui-content {
    background-color: var(--primaryBackgroundColor);
    box-shadow: none;
    border: solid 2px var(--borderColor);
}
 .yui-navset .yui-content,
 .yui-navset .yui-navset-top .yui-content {
     padding: .5em;
     border: none;
}
 
/* ---- AYERS INFO BAR ---- */
.info-container {
    --barColour: var(--borderColor);
    --linkColour: var(--primaryBackgroundColor);
}
#page-content .info-container > .collapsible-block > .collapsible-block-folded .collapsible-block-link::before,
#page-content .info-container > .collapsible-block > .collapsible-block-unfolded .collapsible-block-link::before {
    visibility: hidden;
}
 
/* ---- INFO PANE ---- */
 
#page-content .creditRate{
    margin: unset;
    margin-bottom: 4px;
}
#page-content .rate-box-with-credit-button {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-shadow: 0 0 3px 1px var(--shadow);
    border-radius: var(--radius-adjust);
    padding: 0.275rem;
}
#page-content .rate-box-with-credit-button .page-rate-widget-box { border: none; }
 
#page-content a.fa {
    transform: none;
}
#page-content .rate-box-with-credit-button .fa-info {
    border: none;
    color: var(--textColor);
 
    padding-top: 0.25rem;
    padding-bottom: 0.0725rem;
    width: 0.9rem;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
#page-content .rate-box-with-credit-button .fa-info:hover,
#page-content .rate-box-with-credit-button .fa-info:focus {
    background-size: 100% 100%;
}
 
.rate-box-with-credit-button .cancel {
    border: solid 1px var(--primaryBackgroundColor);
}
 
#page-content .creditButtonStandalone {
    margin: 0.125rem 0;
}
#page-content .creditButtonStandalone p a {
    border-radius: 1rem;
    color: var(--textColor);
    text-align: center;
    background: initial;
    box-shadow: 0 0 2px 1px var(--shadow);
    padding: 0.24rem;
 
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 0;
    transition: background-size var(--link-timing);
}
#page-content .creditButtonStandalone p a:hover,
#page-content .creditButtonStandalone p a:hover {
    text-decoration: none;
    background: none;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
 
/* ---- PAGE RATING ---- */
 
.page-rate-widget-box {
    display: inline-block;
    box-shadow: none;
    margin: unset;
    margin-bottom: 4px;
    background-color: var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
    box-shadow: 0 0 3px 1px var(--shadow);
    padding: 0.275rem;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover,
.page-rate-widget-box .cancel a:hover,
.page-rate-widget-box .rateup a:focus,
.page-rate-widget-box .ratedown a:focus,
.page-rate-widget-box .cancel a:focus {
    color: var(--textColor);
    background: unset;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 100%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    border-radius: 0;
}
 
.page-rate-widget-box .rate-points {
    background-color: var(--primaryBackgroundColor) !important;
    color: var(--textColor) !important;
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background-color: var(--primaryBackgroundColor);
    border-top: solid 1px var(--primaryBackgroundColor);
    border-bottom: solid 1px var(--primaryBackgroundColor);
}
 
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a {
    padding: 0 0.25rem;
    margin: 0 0.05rem;
 
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
.page-rate-widget-box .cancel {
    background-color: var(--primaryBackgroundColor);
    border: solid 1px var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
    margin-right: 0.05rem;
    text-transform: uppercase;
}
 
.page-rate-widget-box .cancel a {
    color: var(--textColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
 
/*---- PAGE ELEMENTS ----*/
 
/* h1 et al. Much of this is by Woedenaz */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--header-font);
    color: var(--textColor);
    font-weight: bold;
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    display: flex;
}
h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
}
#page-content h1 {font-size: 2em;}
#page-content h2 {font-size: 1.8em;}
#page-content h3 {font-size: 1.6em;}
#page-content h4 {font-size: 1.4em;}
#page-content h5 {font-size: 1.2em;}
#page-content h6 {font-size: 1em;}
 
#page-content h1 span,
#page-content h2 span,
#page-content h3 span,
#page-content h4 span,
#page-content h5 span,
#page-content h6 span {
    padding: 0 0.1em;
    display: inline-flex;
}
 
#page-content h1 span::before,
#page-content h2 span::before,
#page-content h3 span::before,
#page-content h4 span::before,
#page-content h5 span::before,
#page-content h6 span::before {
    content: "#";
    color: var(--textColor-alt);
    font-size: 70%;
    font-weight: normal;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 0.1em;
}
#page-content h1::after {
    content: "";
    flex-grow: 1;
    height: 0.1rem;
    margin: auto auto auto 0.375rem;
    background-color: var(--borderColor);
}
 
/* horizontal rule */
hr {
    margin: 2rem 0;
    height: 0.1rem;
    background-color: var(--borderColor);
}
 
/* Collapsibles */
#page-content .collapsible-block {
    margin: 0.5em auto;
}
#page-content .collapsible-block-folded .collapsible-block-link::before,
#page-content .collapsible-block-unfolded .collapsible-block-link::before  {
    content: "> ";
    font-weight: bold;
    display: inline-block;
    margin-right: 0.25em;
    color: var(--linkColor);
    transition: color var(--link-timing);
}
#page-content .collapsible-block-folded .collapsible-block-link:hover::before,
#page-content .collapsible-block-unfolded .collapsible-block-link:hover::before,
#page-content .collapsible-block-folded .collapsible-block-link:focus::before,
#page-content .collapsible-block-unfolded .collapsible-block-link:focus::before {
    color: var(--textColor);
}
#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    animation-name: collapsible-arrow-spin;
    animation-duration: 0.15s;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: forwards;
}
@keyframes collapsible-arrow-spin {
    from { transform: rotate(0deg);  }
    to { transform: rotate(90deg); }
}
 
/* Blockquotes and ToC */
 
blockquote, div.blockquote {
    background-color: transparent;
    width: auto;
    border: none;
    border-left: solid 0.175rem var(--linkColor);
    padding: 0.15rem 0.95rem;
    margin: 1rem 0;
    margin-left: 1.5rem;
}
 
#toc {
    background-color: var(--secondaryBackgroundColor);
    border: none;
    padding: 0.15rem 0.95rem;
    border-radius: calc(var(--radius-adjust)*0.75);
    box-shadow: 0 0 4px 1px var(--shadow);
}
 
/* Image Block */
 
.scp-image-block {
    border: none;
    border-radius: var(--radius-adjust);
    box-shadow: 0 0 5px 1px var(--shadow);
    box-sizing: border-box;
}
.scp-image-block.block-left { float: left; }
.scp-image-block.block-right { float: right; }
 
.scp-image-block img {
    border-radius: var(--radius-adjust) var(--radius-adjust) 0 0;
}
.scp-image-block .scp-image-caption {
    background-color: var(--secondaryBackgroundColor);
    box-sizing: border-box;
    border: none;
    border-radius: 0 0 var(--radius-adjust) var(--radius-adjust);
    padding: 0.25rem 0.1rem;
    color: var(--textColor);
    text-align: center;
}
.scp-image-block.block-left { margin-left: 0; margin-right: 1.5rem; }
.scp-image-block.block-right { margin-right: 0; margin-left: 1.5rem; }
@media (max-width: 540px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}
 
/* Tables */
#page-content .wiki-content-table tr th {
    border: solid 1px var(--borderColor);
    color: var(--textColor);
    background-color: var(--tertiaryBackgroundColor);
    /* set border for table title */
}
#page-content .wiki-content-table tr,
#page-content .wiki-content-table tr td {
    border: solid 1px var(--borderColor);
    background-color: var(--primaryBackgroundColor);
    /* set border for table content */
}
#page-content .wiki-content-table tr:nth-child(2n-1),
#page-content .wiki-content-table tr:nth-child(2n-1) td {
    background-color: var(--secondaryBackgroundColor);
}
 
/* Footnotes (& Bibliography, but no one cares) */
a.footnoteref {
    line-height: 0.625rem;
    margin: 0 0.15em;
    position: relative;
    top: -0.625rem;
}
 
.hovertip {
    background-color: var(--primaryBackgroundColor) !important;
    border-radius: calc(var(--radius-adjust)*0.625);
    border: none !important;
    box-shadow: 0 0 5px 1px var(--shadow);
    padding: 0.3rem 0.35rem;
}
.hovertip a:not(.printuser.avatarhover a:first-child) {
    color: var(--textColor);
    padding: 0.1em;
    text-decoration: none;
    border-bottom: solid 2px var(--linkColor);
}
 
.footnote .f-heading {
    font-family: var(--header-font);
}
.footnote .f-footer, .equation .e-footer, .reference .r-footer {
    display: none;
}
 
.footnotes-footer, .bibitems {
    height: auto;
    padding: 0;
    margin: 1.5rem 0;
}
.footnotes-footer .title, .bibitems .title {
    font-family: var(--header-font);
    font-weight: bold;
    display: flex;
    align-items: center;
    text-align: center;
    border-bottom: none;
    margin: 0.5rem 0;
    color: var(--textColor);
}
.footnotes-footer .title::after,
.bibitems .title::after {
    content: "";
    flex-grow: 1;
    height: 0.1rem;
    margin: auto auto auto 0.65rem;
    background-color: var(--borderColor);
}
.footnote-footer, .bibitem {
    margin-bottom: 0.5rem;
    line-height: 1.4rem;
    height: auto;
}
#main-content #page-content .footnotes-footer .footnote-footer a[href="javascript:;"] {
    padding: 0.0625rem;
}
 
/*---- Outside #page-content elements ----*/
 
/* Selection */
::selection {
    background: var(--selectionColor);
    color: var(--textColor);
}
 
/* .owindow */
 
#owindow-1 { padding-bottom: 0.25rem; }
 
.owindow {
    background-color: var(--primaryBackgroundColor);
    border: none;
    box-sizing: border-box;
    border-radius: var(--radius-adjust);
    max-width: calc(100% - 3rem);
}
.owindow .title {
    background-color: var(--secondaryBackgroundColor);
    border-radius: var(--radius-adjust) var(--radius-adjust) 0 0;
}
.owindow h1 {
    font-family: var(--header-font);
    font-weight: bold;
    color: var(--textColor);
}
.owindow a:not(.button-bar.modal-footer a, .printuser.avatarhover a:first-child) {
    color: var(--textColor);
    padding: 0.1em;
    text-decoration: none;
 
    border: none;
    border-bottom: solid 3px var(--linkColor);
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
.owindow a:not(.button-bar.modal-footer a, .printuser.avatarhover a:first-child):hover,
.owindow a:not(.button-bar.modal-footer a, .printuser.avatarhover a:first-child):focus {
    background-size: 100% 100%;
    background-color: transparent;
}
 
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body {
    width: auto;
    height: auto;
    margin: 0.25em;
    display: grid;
    box-sizing: border-box;
 
    grid-template-areas:
        "pfp username"
        "table table"
        "link link";
    grid-template-columns: 80px 1fr;
}
/* fallback */
.content.modal-body > * {
    grid-column: 1 / span 2;
}
 
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > img {
    float: none!important;
    padding: 0!important;
    background-color: var(--primaryBackgroundColor)!important;
    grid-area: pfp;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > img + h1 {
    grid-area: username;
    text-align: center;
    margin: auto;
    word-break: break-all;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > table {
    grid-area: table;
    margin-top: 1em;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > table tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    margin-bottom: 0.25rem;
}
 
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type {
    grid-area: link;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 0.45em;
    text-align: center;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type a {
    flex-grow: 1;
    flex-basis: 12rem;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type > div[style="float:right"] {
    display: contents;
}
#owindow-1.owindow:not(.owait, .confirmation, .error, .osuccess) > div.content.modal-body > div:last-of-type > div[style="float:right"] a {
    order: 4;
}
 
/* modalbox */
#page-content #u-credit-view,
#page-content #u-credit-otherwise {
    max-width: 100vw;
}
#page-content #u-credit-view .modalbox,
#page-content #u-credit-otherwise .modalbox {
    background: var(--primaryBackgroundColor);
    border-radius: var(--radius-adjust);
    border: none;
    box-shadow: none;
}
#page-content .modalbox hr {
    margin: 1.1rem;
}
#page-content .modalbox h2 span { margin: auto; }
#page-content .modalbox h2 span::before { display: none; }
 
/* Loading Screen */
.owindow.owait .content {
    background-image: none;
    padding-top: 0.25rem;
}
.owindow.owait .content::after {
  content: " ";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.9rem auto;
  margin-top: 0.75rem;
  border-radius: 50%;
  border: 0.3rem solid black;
  border-color: var(--linkColor) transparent;
  animation: loading 1.2s linear infinite;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
/*---- Bottom areas Grid-ification ----*/
#main-content {
    display: grid;
    grid-template-areas:
            "action-area-top action-area-top"
            "page-title page-title"
            "page-content page-content"
            "page-info-break page-info-break"
            "page-tags page-options-container"
            "page-tags page-options-container"
            "action-area action-area"
            "ad ad";
    grid-template-columns: 1fr 1fr;
}
#action-area-top {
    grid-area: action-area-top;
}
#page-title {
    grid-area: page-title;
}
#page-content {
    grid-area: page-content;
}
#page-info-break {
    grid-area: page-info-break;
}
div.page-tags {
    grid-area: page-tags;
}
#page-options-container {
    grid-area: page-options-container;
}
#action-area {
    grid-area: action-area;
}
#wad-scp-wiki-below-content {
    grid-area: ad;
}
 
/*--------------*/
 
/* Tags */
#main-content div.page-tags {
    padding: 0;
    margin: 0 2.5rem 0.5rem 0;
}
#main-content div.page-tags::before {
    content: "tags";
    color: var(--textColor-alt);
    font-size: 80%;
    display: block;
    padding: 0 0.25em;
    margin-bottom: 0.25rem;
}
 
#main-content .page-tags span {
    max-width: 100%;
    border-top: none;
    display: flex;
    flex-wrap: wrap;
}
 
#main-content .page-tags a {
    height: 0.9rem;
    width: max-content;
    line-height: 0.9rem;
    font-size: 0.8rem;
    margin: 0.15rem 0.225rem;
    padding: 0.25rem 0.1rem;
 
    color: var(--textColor);
 
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    border-bottom: solid 0.1em var(--linkColor);
    transition: background-size var(--link-timing);
}
#main-content .page-tags a:hover,
#main-content .page-tags a:focus {
    background-size: 100% 100%;
    text-decoration: none;
}
#main-content .page-tags a::before {
    content:"/";
    display: inline-block;
    margin-right: 0.1em;
    color: var(--linkColor);
    transition: color var(--link-timing);
}
#main-content .page-tags a:hover::before,
#main-content .page-tags a:focus::before {
    color: var(--textColor);
}
 
#page-info {
    color: var(--textColor-alt);
    margin: 0;
    font-size: 80%;
    text-align: right;
}
div.page-watch-options {
    font-size: 80%;
    margin: 0.325rem 0 0.75rem;
    line-height: 1.5em;
}
 
#page-options-container a:not(a#more-options-button),
#action-area a:not(#wd-editor-toolbar-panel a, .printuser.avatarhover a:first-child, a.action-area-close.btn.btn-danger, .page-rate-widget-box a) {
    color: var(--textColor);
    text-decoration: none;
 
    border-bottom: solid 2px var(--linkColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#page-options-container a { padding: 0.1em; }
#page-options-container a:not(a#more-options-button):hover,
#action-area a:not(#wd-editor-toolbar-panel a, .printuser.avatarhover a:first-child, a.action-area-close.btn.btn-danger, .page-rate-widget-box a):hover {
    background-size: 100% 100%;
}
 
.page-options-bottom {
    margin: 0;
    text-align: center;
    height: auto;
    line-height: normal;
    width: 100%;
 
    display: flex;
    flex-wrap: wrap;
}
#page-options-container .page-options-bottom > a {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 4rem;
    padding: 0.25rem;
    margin: 0.25rem 0.2rem;
}
 
#page-options-container .page-options-bottom > a#more-options-button,
#action-area > a.action-area-close.btn.btn-danger,
#owindow-1 .button-bar.modal-footer a {
    box-sizing: border-box;
    min-width: 100%;
    padding: 0.5rem 1rem;
    margin-right: 0;
    color: var(--textColor);
    background-color: var(--secondaryBackgroundColor);
    border: solid 2px var(--borderColor);
    border-radius: calc(var(--radius-adjust)*1.5);
    font-family: var(--body-font);
    transition: background-color var(--link-timing);
}
#page-options-container .page-options-bottom > a#more-options-button:hover,
#action-area > a.action-area-close.btn.btn-danger:hover,
#owindow-1 .button-bar.modal-footer a:hover {
    background-color: var(--tertiaryBackgroundColor);
    text-decoration: none;
}    
 
#action-area > a.action-area-close.btn.btn-danger {
    min-width: unset;
    width: max-content;
}
 
/*-------------------*/
 
div.buttons input, input.button, button, file, a.button {
    margin: 0.1rem;
    padding: 0.275em 0.75em;
    cursor: pointer;
    text-decoration: none;
    background-color: var(--secondaryBackgroundColor);
    border: solid 2px var(--borderColor);
    border-radius: var(--radius-adjust);
    color: var(--textColor);
    transition: background-color var(--link-timing);
}
div.buttons input:hover, input.button:hover, button:hover, file:hover, a.button:hover {
    background-color: var(--tertiaryBackgroundColor);
    color: var(--textColor);
}
 
/*---- EDITBOX ----*/
 
form#edit-page-form table.form #edit-page-title,
#edit-page-textarea,
#edit-page-comments {
    color: var(--textColor);
    background-color: var(--primaryBackgroundColor);
    border: solid 1px var(--borderColor);
}
table.form td div.sub, form div.sub {
    color: var(--textColor-alt);
}
 
form#edit-page-form {
    background-color: var(--primaryBackgroundColor);
    box-shadow: 0 0 3px 1px var(--shadow);
    padding: 1rem 2rem;
    border-radius: var(--radius-adjust);
    border: none;
    max-width: min(calc(var(--page-content-width) + 4rem), 100%);
    margin: 0 auto;
 
    display: grid;
    grid-template-areas:
        "title title"
        "toolbar toolbar"
        "txt txt"
        "help size"
        "bottom bottom"
        "hdn hdn"
        "button button";
    grid-template-columns: 1fr auto;
}
form#edit-page-form table.form { grid-area: title; }
form#edit-page-form #wd-editor-toolbar-panel { grid-area: toolbar; }
form#edit-page-form div:nth-of-type(2) { grid-area: txt; }
form#edit-page-form .change-textarea-size { grid-area: size; }
form#edit-page-form .edit-help-34 { grid-area: help; }
form#edit-page-form table.edit-page-bottomtable { grid-area: bottom; }
form#edit-page-form #edit-page-captcha { grid-area: hdn; }
form#edit-page-form .buttons.alignleft { grid-area: button; }
 
/* Title area*/
form#edit-page-form table.form {
    margin: 0 0 0.5em 0!important;
    width: 100%;
    font-family: var(--header-font);
    font-size: 1.2em;
}
form#edit-page-form table.form tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
form#edit-page-form table.form td {
    text-align: center;
    min-width: 6em;
    flex-shrink: 1;
    flex-grow: 1;
}
form#edit-page-form table.form td:last-of-type {
    flex-grow: 2;
}
form#edit-page-form table.form #edit-page-title {
    width: 100%;
}
 
/* Toolbar */
#wd-editor-toolbar-panel {
    grid-area: toolbar;
    width: 100%;
    display: grid;
    margin: 1.5em auto 0.75em;
    grid-template-columns: repeat(auto-fill, minmax(1.5em, 1fr));
    grid-gap: 0.125em;
}
#wd-editor-toolbar-panel > div,
#wd-editor-toolbar-panel > div > ul {
    display: contents;
}
 
.wd-editor-toolbar-panel ul li:hover ul, .wd-editor-toolbar-panel ul li.sfhover ul {
    background-color: var(--primaryBackgroundColor);
    border: 2px solid var(--borderColor);
}
.wd-editor-toolbar-panel li.hseparator {
    background-color: var(--borderColor);
    margin: 0 auto;
    height: 1.5em;
}
 
/* Edit area */
form#edit-page-form div:nth-of-type(2) { min-width: 100%; }
form#edit-page-form #edit-page-textarea { min-width: inherit; }
 
/* Size buttons + help area */
form#edit-page-form .change-textarea-size {
    float: none;
    padding: 0;
    margin-top: 0.25rem;
    display: flex;
    gap: 0.25rem;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}
form#edit-page-form .change-textarea-size a {
    background-color: var(--primaryBackgroundColor);
    border-width: 1px 1px 2px;
    border-top-color: var(--borderColor);
    border-left-color: var(--borderColor);
    border-right-color: var(--borderColor);
    padding: 3px;
    text-decoration: none;
    display: inline-block;
    width: 1.2rem;
    text-align: center;
}
 
form#edit-page-form .edit-help-34 {
    font-size: 0rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin: 0.25rem 0.5rem 0 0;
}
form#edit-page-form .edit-help-34 a { font-size: 0.625rem; }
 
/* Bottom area */
form#edit-page-form table.edit-page-bottomtable tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--page-content-width)/2.5), 100%), 1fr));
}
form#edit-page-form table.edit-page-bottomtable tr td {
    box-sizing: border-box;
}
form#edit-page-form table.edit-page-bottomtable tr td:nth-of-type(2) {
    display: flex;
    align-items: center;
    padding: 0.75rem!important;
}
form#edit-page-form table.edit-page-bottomtable tr td > div {
    max-width: 100%;
    min-width: 100%;
}
form#edit-page-form table.edit-page-bottomtable tr td > div > #edit-page-comments {
    width: 100%!important;
    min-height: 6em;
}
 
form#edit-page-form #lock-info {
    background-color: var(--primaryBackgroundColor);
    border: none;
    padding: 1em;
    margin: 0;
    border-radius: calc(var(--radius-adjust)*0.5);
    border-bottom: solid 0.2rem var(--linkColor);
    box-sizing: border-box;
    box-shadow: 0 1px 3px 0 var(--shadow);
}
 
/* Save button area */
div.buttons.alignleft {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
.buttons.alignleft > * {
    flex-grow: 1;
}
 
/*-------------------*/
 
#who-rated-page-area br {
    display: none;
}
#who-rated-page-area>div {
    grid-gap: 0.25em;
    display: grid;
    grid-template-columns: repeat(4,1fr auto);
    grid-auto-flow: row;
    justify-items: end;
    max-width: var(--page-content-width);
    margin: 0 auto;
}
#who-rated-page-area>div span.printuser.avatarhover {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
}
#who-rated-page-area>div span:nth-child(3n-1) {
    margin-right: 2rem;
}
 
/*-------------------*/
 
#revision-list .pager, .pager {
    width: max-content;
    margin: 0.75rem auto;
}
#revision-list .pager > *, .pager > * {
    padding: 0.125rem 0.25rem;
    margin: 0.05rem;
}
#revision-list .pager > * > a, .pager > * > a {
    padding: 0.125rem 0.25rem;
}
#revision-list .pager .current {
    font-weight: bold;
    background-color: var(--tertiaryBackgroundColor);
    color: var(--textColor);
    border: 1px solid var(--borderColor);
}
#revision-list .pager .target, #revision-list table.page-history td a {
    border-top-color: var(--borderColor);
    border-left-color: var(--borderColor);
    border-right-color: var(--borderColor);
}
 
#revision-list table.page-history {
    width: 100%;
    border-collapse: collapse;
}
#revision-list table.page-history td {
    padding: 0.375em 0;
}
 
#revision-list table.page-history tr:nth-child(2n-1),
#revision-list table.page-history tr:nth-child(2n-1) td {
    background-color: var(--secondaryBackgroundColor);
}
#revision-list table.page-history tr:nth-child(2n),
#revision-list table.page-history tr:nth-child(2n) td {
    background-color: var(--primaryBackgroundColor);
}
 
#revision-list table.page-history tr td:nth-child(1) {
    width: 4em;
    min-width: max-content;
    text-align: center;
}
#revision-list table.page-history tr td:nth-child(2),
#revision-list table.page-history tr td:nth-child(3) {
    width: 5em;
    min-width: max-content;
    text-align: center;
}
#revision-list table.page-history tr td:nth-child(4) {
    min-width: 4em;
}
#revision-list table.page-history tr td:nth-child(5) {
    padding: 0 0.5em;
}
#revision-list table.page-history tr td:nth-child(6) {
    min-width: 3.25em;
}
#revision-list table.page-history tr:first-child td:last-child {
    text-align: center;
}
 
/*-------------------*/
 
#action-area .page-source {
    border: solid 2px var(--borderColor);
    padding: 1.75em;
    font-size: 0.85rem;
    box-sizing: border-box;
}
 
/*-------------------*/
 
#action-area ul[style*="list-style: none"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
 
/*---- FOOTER & LICENSE-AREA & FOOTER-BAR----*/
#footer {
    display: flex!important;
    justify-content: space-between;
    background-color: var(--primaryBackgroundColor);
    color: var(--textColor-alt);
    font-size: 0rem;
    padding: 0.15rem 0.35rem;
    flex-wrap: wrap;
    grid-gap: 0.125rem 1.5rem;
}
#footer a {
    color: var(--textColor-alt);
    font-size: 0.6rem;
}
#footer a[href*="wikidot.com"]:not(.options a)::before {
   content:"Powered by ";
}
#footer .options a:not(:last-of-type) {
    padding-right: 0.25rem;
    margin-right: 0.25rem;
    border-right: solid 1px var(--borderColor);
}
 
#license-area {
    color: var(--textColor);
    background-color: var(--tertiaryBackgroundColor);
    border-top: solid 2px var(--borderColor);
    font-family: var(--header-font);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem;
    padding-bottom: 0.5rem;
    line-height: 0.8rem;
    text-align: center;
}
#license-area a {
    color: var(--textColor);
 
    border-bottom: solid 3px var(--linkColor);
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#license-area a:hover, #license-area a:focus {
    background-size: 100% 100%;
    text-decoration: none;
}
 
#footer-bar {
    background-color: var(--secondaryBackgroundColor);
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-top: solid 2px var(--borderColor);
    padding: 0.5em 1em;
    box-sizing: border-box;
}
#footer-bar .units {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    display: flex;
}
#footer-bar .units .unit {
    flex-grow: 1;
}
#footer-bar .units .unit h3 a {
    margin: 0 auto;
    color: var(--textColor);
    border-bottom: solid 2px var(--linkColor);
    background-image: linear-gradient(to bottom, var(--linkColor) 0%, var(--linkColor) 100%);
    background-size: 100% 0;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--link-timing);
}
#footer-bar .units .unit h3 a:hover, #footer-bar .units .unit h3 a:focus {
    background-size: 100% 100%;
}
 
/*---- CUSTOM SYNTAX ----*/
 
.monoboxical {
    border-radius: var(--radius-adjust);
    padding: 1em 1.5em;
    border-bottom: solid 0.25rem var(--linkColor);
    box-sizing: border-box;
    box-shadow: 0 1px 3px 0 var(--shadow);
    margin: 0.75rem 0.1rem;
}
 
.header-center {
    padding: 0;
    margin: 0;
    text-align: center;
}
.header-center h1 span,
.header-center h2 span,
.header-center h3 span,
.header-center h4 span,
.header-center h5 span,
.header-center h6 span {
    margin-left: auto;
    margin-right: auto;
}
#page-content .header-center h1::before {
    content: "";
    flex-grow: 1;
    height: 0.1rem;
    margin: auto 0.375rem auto auto;
    background-color: var(--borderColor);
}
 
/* author label compatibility */
#page-content .authorlink-wrapper {
    margin-top: -0.1rem;
    --author-right-adjust: 0.52em;
}
#page-content .authorlink-wrapper .authorbox {
    background-color: var(--primaryBackgroundColor);
    color: var(--textColor);
}
#page-content .authorlink-wrapper .authorbox::before {
    border-bottom-color: var(--primaryBackgroundColor);
}
 
/*--- Motion Accessibility ---*/
@media (prefers-reduced-motion) {
    :root { --link-timing: 0s linear!important; }
}
 
/*---- MOBILE QUERY ----*/
@media only screen and (max-width: 767px) {
    :root {
        --link-timing: .05s ease-out;
    }
 
    #header h1 a {
        font-size: 2.5rem;
        padding-top: 1.45rem;
    }
 
    .meta-title {
        font-size: 200%;
    }
 
    #main-content {
        padding: 1em 1.5em;
        grid-template-areas:
            "action-area-top action-area-top"
            "page-title page-title"
            "page-content page-content"
            "page-tags page-tags"
            "page-info-break page-info-break"
            "page-options-container page-options-container"
            "action-area action-area"
            "ad ad";
    }
 
    #main-content div.page-tags {
        margin: 0.5rem 0 1rem;
        width: 100%;
    }
    #page-options-container {
        margin-top: 2.5rem; margin-bottom: 2rem;
    }
 
    #page-info, div.page-watch-options {
        text-align: left;
    }
 
    #who-rated-page-area>div {
        grid-template-columns: repeat(2,1fr auto);
    }
    #who-rated-page-area>div span:nth-child(3n-1) {
        margin-right: 1rem;
    }
 
    #revision-list table.page-history tr td:nth-child(5) .printuser.avatarhover a:last-of-type {
        display: none;
    }
    #revision-list table.page-history tr td:nth-child(5) {
        width: max-content!important;
    }
 
    #action-area ul[style*="list-style: none"] {
        grid-template-columns: repeat(2, 1fr);
    }
 
    #revision-list table.page-history tr td:nth-child(1):not(tr:first-child td),
    #revision-list table.page-history tr td:nth-child(7):not(tr:first-child td) {
        font-size: 80%!important;
        padding-left: 0.75em;
    }
    #revision-list table.page-history tr td:nth-child(6) { display: none; }
}