theme

≡
MENU

For Newbies

初めての方へ
このサイトに参加する

---

GuideLines

ガイドハブ
サイトルール
ライセンスガイド

---

SCP Series JP

Ⅰ | Ⅱ | Ⅲ

---

SCP Series

Ⅰ | Ⅱ | Ⅲ | Ⅳ | Ⅴ | Ⅵ

---

INT - Hub

---

Tales

JP | EN

---

GoI Formats

JP | EN | Others

SBⅢ
|
Storage

© 犬殴り

topリンク用

FirstSecondThird

1

2

example formatting

Image Block

L1 Heading

L2 Heading

L3 Heading

L4 Heading

L5 Heading

L6 Heading

bold | italic | underline | strikethrough | teletype | ^superscript_subscript

ハイフン4つ"----"で水平線をひくことができます。

---

Block Quote

Nested Block Quote

header	header	header	header	header	header
cell-content	cell-content	cell-content	cell-content	cell-content	cell-content

fake code selector{
fake code property: fake code value;
}

A link (A link you probably visited)

+ A collapsible

Something inside the collapsible

1. numbered list
2. list item
3. list item

• bulleted list
• list item
• list item

how to use

このテーマを使用するには、以下のコードをページの一番上に貼り付けてください。

[[include :1nu:iikanji]]

このテーマは何のために使われるの？

遊び

このタブの使用方法

下記コードをコピペして下さい

[[div_ class="content-body"]]
[[div_ class="tab-buttons"]]
[#u-tab-0 一つ目のタブボタン][#u-tab-1 二つ目のタブボタン][#u-tab-2 三つ目のタブボタン]
[[/div]]
[[div id="u-tab-1"]]
1
[[/div]]
[[div id="u-tab-2"]]
2
[[/div]]

[[div class="tab-container-wrap"]]
[[div class="tab-container"]]

[[div_ class="tab-content"]]
1ページ目内容
[[/div]]

[[div_ class="tab-content"]]
2ページ目内容
[[/div]]

[[div_ class="tab-content"]]
3ページ目内容
[[/div]]

[[/div]]
[[/div]]
[[/div]]

source

--font-color
#333

--background
#fff

--base-color
#c23030

--link-hover-color
#c23030bd0

--title-color
#ed213a - #93291e0

+show code

[[a class="open-side" href="#u-side"]][[span]]≡
[[span class="menu"]]MENU[[/span]][[/span]][[/a]]
[[div id="u-side" class="new-side"]]
[[a href="#close" class="close-side"]][[/a]]
[[div class="side-content"]]
 
[[div class="side-outside"]]
[[span]]For Newbies[[/span]]
[[div class="side-inside"]]
[[[guide-for-newbies|初めての方へ]]]
[[[system:join|このサイトに参加する]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]GuideLines[[/span]]
[[div class="side-inside"]]
[[[guide-hub|ガイドハブ]]]
[[[Site Rules|サイトルール]]]
[[[Licensing Guide|ライセンスガイド]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]SCP Series JP[[/span]]
[[div class="side-inside"]]
[[[scp-series-jp|Ⅰ]]] | [[[scp-series-jp-2|Ⅱ]]] | [[[scp-series-jp-3|Ⅲ]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]SCP Series[[/span]]
[[div class="side-inside"]]
[[[scp-series|Ⅰ]]] | [[[scp-series-2|Ⅱ]]] | [[[scp-series-3|Ⅲ]]] | [[[scp-series-4|Ⅳ]]] | [[[scp-series-5|Ⅴ]]] | [[[scp-series-6|Ⅵ]]]
[[/div]]
[[/div]]
------
[[[scp-international|INT - Hub]]]
------
[[div class="side-outside"]]
[[span]]Tales[[/span]]
[[div class="side-inside"]]
[[[foundation-tales-jp|JP]]] | [[[foundation-tales|EN]]]
[[/div]]
[[/div]]
------
[[div class="side-outside"]]
[[span]]GoI Formats[[/span]]
[[div class="side-inside"]]
[[[goi-formats-jp|JP]]] | [[[goi-formats|EN]]] | [[[international-goi-formats|Others]]]
[[/div]]
[[/div]]
 
[[span class="side-sites"]]
[[a class="n-sites" href="//scp-jp-storage.wikidot.com/"]]SBⅢ[[/a]]
[[span class="center-line"]]|[[/span]]
[[a class="n-sites" href="//scp-jp-storage.wikidot.com/"]]Storage[[/a]]
[[/span]]
 
[[span class="side-links"]]
[[a class="side-twitter" href="https://twitter.com/scpjp_announce"]][[/a]]
[[a class="side-discord" href="http://ja.scp-wiki.net/discord-guideline"]][[/a]]
[[a class="site-other" href="http://scp-jp.wikidot.com/links"]][[/a]]
[[/span]]
[[module ListPages range="." wrapper="no" separate="no"]]
[[a class="side-credit" href="%%site_name%%.wikidot.com"]]© %%site_title%%[[/a]]
[[/module]]
[[/div]]
[[/div]]
[[div_ class="op-buttons"]]
[[a href="#u-top-link" class="op-btn to-top" data-title="page-top"]][[/a]]
[[a href="#footer" class="op-btn to-bottom" data-title="page-bottom"]][[/a]]
[[button source class="op-btn view-source" text=" "]]
[[button history class="op-btn view-history" text=" "]]
[[/div]]
 
[[div_ id="u-top-link"]]
topリンク用
[[/div]]
 
[[module CSS]]
/*
[no title]
Created at 2020
Created by dog_punch
CC BY-SA 3.0
*/
 
@import url(https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap);
:root {
    --font-color: #333;
    --background: #fff;
    --base-color: #c23030;
    --link-hover-color: #c23030bd;
    --title-color: linear-gradient(to right, #ed213a, #93291e);
}
 
body {
    color: var(--font-color);
}
 
a {
    color: var(--base-color);
    transition: .3s;
}
 
a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}
 
.content-body {
    font-family: 'Roboto Mono', 'Noto Sans JP', monospace;
}
 
#side-bar,
#top-bar {
    display: none;
}
 
div#container-wrap {
    background: var(--background);
}
 
#header {
    background: var(--background);
    padding: 0 !Important;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid var(--base-color);
    max-width: none;
    position: fixed;
    top: 0%;
    left: 0%;
    box-shadow: 0 0 5px #5f5f5f;
}
 
#header h2 {
    display: none;
}
 
#login-status {
    top: 2px
}
 
#login-status {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    font-size: 0
}
 
#login-status .printuser {
    margin: 0;
    background-color: none;
    position: absolute;
    top: 13px;
    right: 0px;
    width: 28px;
    padding: 0;
}
 
#login-status .printuser img.small {
    background: none !Important;
    margin: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 100px;
    box-shadow: 0 0 3px #3f3f3f;
}
 
#login-status [id] {
    font-size: .72rem
}
 
#login-status>a[href="javascript:;"] {
    font-size: 0;
    font-weight: bold;
    margin: 0;
    text-align: center;
    text-decoration: none;
    background: none;
    width: 21.8px;
    position: absolute;
    top: 13px;
    height: 21px;
    right: 30px;
    border: none;
}
 
#login-status>a[href="javascript:;"]:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 1.3rem;
    margin: 4px 3px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    transform: translate(0, 0);
}
 
#login-status #account-topbutton:before {
    content: "\f013";
    color: var(--base-color)
}
 
#login-status .login-status-sign-in {
    right: 35px !Important;
}
 
#login-status .login-status-sign-in:before {
    content: "\f13e";
    color: var(--base-color)
}
 
#login-status .login-status-create-account {
    right: 11px !Important;
    margin: 0 0 .25rem;
}
 
div#login-status a.login-status-create-account {
    right: 11px;
}
 
#login-status .login-status-create-account:before {
    content: "\f067";
    color: var(--base-color)
}
 
#login-status #my-account {
    display: none
}
 
#login-status a strong {
    position: absolute;
    top: 0;
    right: 2.25rem;
    font-family: var(--bauhaus);
    font-size: 1rem;
    white-space: nowrap
}
 
#login-status #account-topbutton:not(:focus):not(:focus-within):not(:hover):not(:active)+#account-options {
    display: none !important
}
 
#header #login-status #account-topbutton+#account-options:focus,
#header #login-status #account-topbutton+#account-options:focus-within,
#header #login-status #account-topbutton+#account-options:hover,
#header #login-status #account-topbutton+#account-options:active {
    display: block !important
}
 
#account-options ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}
 
#account-options ul>li {
    flex-grow: 1;
    text-align: center;
    width: 40%
}
 
#account-options ul>li a {
    transition: all .25s ease-in-out
}
 
#account-options ul>li a:hover {
    background-color: var(--base-color);
    color: var(--background);
    text-decoration: none
}
 
#login-status ul a {
    color: #000
}
 
div#search-top-box {
    top: 18.5px;
    width: 100%;
    right: 70px
}
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end
}
 
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover {
    background-color:  #a61d1d !IMPORTANT;
    display: inline-block;
    height: 1.1rem;
    width: 8rem;
    transition: width .25s;
    outline: none;
    filter: brightness(120%);
}
 
_::-webkit-full-page-media,
_:future,
:root div#search-top-box form input[type="text"] {
    font-size: 16px
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    background-color: var(--base-color);
    color: transparent;
    cursor: pointer;
    display: inline-block;
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    border-radius: 50px;
    box-shadow: none;
    background-position: center;
    background-size: 55%;
    background-repeat: no-repeat;
    background-image: 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");
}
 
div#search-top-box form input[type="submit"] {
    display: none
}
 
#search-top-box-input {
    border: solid 1px var(--background);
    border-radius: 5px
}
 
#header h1 a {
    padding: 0;
    color: var(--base-color);
    text-shadow: none;
    font-family: 'Arapey';
    font-size: 180% !Important;
}
 
#header h1 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}
 
#header h1 a span {
    display: none;
}
 
#header h1 a:before {
    content: 'SCP';
    color: var(--base-color);
    text-shadow: none;
    font-size: 92%;
    font-family: 'Pinyon Script', cursive;
    font-weight: normal;
    margin-right: -13px;
    background: -webkit-linear-gradient(to right, #ed213a, #93291e);
    background: var(--title-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 5px;
}
 
.new-side {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 266px;
    box-sizing: border-box;
    height: 100%;
    min-height: 500px;
    z-index: 20;
    background: var(--base-color);
    overflow-y: auto;
    transition: 0.5s;
    transform: translateX(-266px);
}
 
.new-side:target {
    transform: translateX(0px);
}
 
.side-content {
    text-align: center;
    margin-top: 5em;
}
 
.side-content p {
    margin: 0 !Important;
}
 
.side-content,
.side-content a,
.side-content span {
    color: var(--background);
    text-decoration: none !Important;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    overflow-x: hidden;
}
 
.open-side {
    color: var(--background) !important;
    display: block;
    position: fixed;
    top: 0%;
    left: 0%;
    font-size: 2.1em;
    height: 61px;
    width: 61px;
    font-weight: bold;
    background: var(--base-color) !Important;
    z-index: 12;
    text-align: center;
}
 
.open-side>* {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 2px;
}
 
.open-side>span>span {
    font-size: 9px;
    font-weight: normal;
}
 
#content-wrap {
    position: relative;
    margin: 4.8em auto 0;
}
 
.side-outside {
    transition: 0.5s;
    max-height: 30px;
    overflow: hidden;
}
 
.side-outside:hover {
    max-height: 100px;
}
 
.side-outside a,
.side-outside span {
    transition: .3s;
}
 
.side-outside:hover span {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-outside a:hover {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-content a {
    transition: .3s !important;
}
 
.side-content a:hover {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-inside {
    display: block;
    padding: 4px 0;
}
 
.side-inside a {
    transition: .3s;
}
 
.side-inside a:hover {
    color: rgba(255, 255, 255, .7);
}
 
.new-side hr {
    margin: 0.3em auto;
    height: 0.5px;
    width: 10px;
    background-color: rgba(255, 255, 255, .3);
}
 
.new-side:target .side-content>.side-outside,
.new-side:target .side-content>a,
.new-side:target .side-content>p {
    opacity: 0;
    animation-name: two;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: .2s;
}
 
@keyframes two {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
 
.new-side .close-side {
    display: block;
    position: absolute;
    top: 10px;
    right: 5px;
    font-size: 2.5em;
    text-decoration: none;
    color: var(--background);
}
 
.new-side .close-side:after {
    font-family: FontAwesome;
    content: '\f00d';
}
 
.side-sites {
    width: 70%;
    display: flex;
    height: 45px;
    border-bottom: 0.5px solid rgba(255, 255, 255, .3);
    border-top: 0.5px solid rgba(255, 255, 255, .3);
    justify-content: space-around;
    align-items: center;
    margin: 5px auto 0 auto;
    position: relative;
}
 
.side-sites a {
    font-size: 90%;
    transition: .3s;
}
 
.side-sites a:hover {
    color: rgba(255, 255, 255, .7) !Important;
}
 
.side-sites * {
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 1;
}
 
span.center-line {
    display: inline-block;
    font-size: 70%;
    color: rgba(255, 255, 255, .3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.new-side::-webkit-scrollbar {
    width: 5px;
    height: 9px;
    border: none;
}
 
.new-side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .6);
}
 
.new-side::-webkit-scrollbar-track {
    background: none;
}
 
.side-links {
    width: 70%;
    margin: 0 auto;
    display: flex;
    height: 45px;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
 
.side-links a {
    flex-basis: 100%;
    flex-shrink: 1;
    flex-grow: 1;
    font-size: 110%;
}
 
.side-twitter:before {
    content: '\f099';
    font-family: FontAwesome;
}
 
.side-discord:before {
    content: '\f0c0';
    font-family: FontAwesome;
    font-weight: normal;
}
 
.site-other:before {
    content: '\f0c1';
    font-family: FontAwesome;
}
 
a.side-credit {
    display: inline-block;
    font-size: 80% !important;
}
 
@media (max-height:515px) {
    .side-content {
        margin-top: 1em;
    }
}
 
#page-title {
    font-size: 235%;
    color: var(--base-color);
    border-bottom: none;
    text-align: center;
    margin: 0;
    padding: 25px 0;
    font-family: 'Major Mono Display', 'Noto Sans JP', monospace;
    font-weight: 100;
}
 
.tab-container-wrap {
    display: flex;
    overflow-X: hidden;
    width: 100%;
}
 
.tab-container {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    transition: 1.5s cubic-bezier(0.35, -0.18, 0.65, 1.21);
}
 
#u-tab-1:target~.tab-container-wrap .tab-container {
    transform: translateX(-100%);
}
 
#u-tab-2:target~.tab-container-wrap .tab-container {
    transform: translateX(-200%);
}
 
#u-tab-3:target~.tab-container-wrap .tab-container {
    transform: translateX(-300%);
}
 
#u-tab-4:target~.tab-container-wrap .tab-container {
    transform: translateX(-400%);
}
 
.tab-content {
    width: 100%;
    flex: 1 0 100%;
    box-sizing: border-box;
    padding: 0 3px;
    mask-image: linear-gradient(0deg, red, transparent 100%);
}
 
div[id^="u-tab"] {
    position: fixed;
    pointer-events: none;
    color: transparent;
    top: 0%;
}
 
.tab-buttons {
    display: flex;
    justify-content: center;
}
 
.tab-buttons a {
    color: var(--base-color);
    border-bottom: 1px solid var(--base-color);
    display: inline-block;
    height: 30px;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    margin: 0 8px;
    padding: 0 12px;
    text-decoration: none;
    transition: .3s;
    font-family: 'Roboto Mono', 'Noto Sans JP', monospace;
}
 
.tab-buttons a:first-of-type {
    margin-left: 0;
}
 
.tab-buttons a:last-of-type {
    margin-right: 0;
}
 
.tab-buttons a:hover {
    color: #c2303096;
    border-color: #c2303096;
}
 
#main-content {
    margin: 0 3em 0 3em;
    padding: 0.75em;
}
 
.op-buttons {
    position: fixed;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background: var(--base-color);
    box-shadow: 0 0 3px var(--background);
}
 
.op-buttons br {
    display: none;
}
 
.op-btn {
    color: var(--background) !Important;
    padding: 0.8em;
    transition: .3s;
    text-decoration: none !IMPORTANT;
    text-align: center;
    position: relative;
}
 
.op-btn:hover {
    background: #da5050 !important;
}
 
.op-btn:after {
    font-size: 1.9em;
    font-family: FontAwesome;
    font-weight: bold;
}
 
.op-btn:hover:before {
     content: attr(data-title);
     position: absolute;
     top: 10%;
     right: 110%;
     background: rgb(165 17 17 / 80%) !IMPORTANT;
     border: 1.5px solid #fff;
     box-shadow: 0 0 3px #ccc;
     display: inline-block;
     padding: 3px;
     opacity: 1;
     min-width: 7em;
}
 
.view-source:hover:before {
     content: 'view-source';
}
 
.view-history:hover:before {
     content: 'view-history';
}
 
.to-top:after {
    content: '\f106';
}
 
.to-bottom:after {
    content: '\f107';
}
 
.view-source:after {
    content: '\f15c';
    font-weight: normal;
}
 
.view-history:after {
    content: '\f1da';
    font-weight: normal;
}
 
.op-btn:first-of-type {
    border-radius: 5px 5px 0 0;
}
 
.op-btn:last-of-type {
    border-radius: 0 0 5px 5px;
}
 
#main-content,
#content-wrap {
    position: static;
}
 
#u-top-link {
    position: absolute;
    font-size: 0%;
    pointer-events: none;
    top: -100px;
    left: 0%;
    right: 0%;
}
 
* {
    -webkit-scroll-behavior: smooth;
    scroll-behavior: smooth;
}
 
@media (max-width: 767px) and (min-width: 581px) {
    div#main-content {
        margin: 0 0.5em 0 0.5em !important;
    }
}
 
@media (max-width: 479px) {
    div#main-content {
        margin: 0 !Important;
    }
}
 
h1 {
    color: var(--base-color);
    font-family: 'Major Mono Display', 'Noto Sans JP', monospace;
    font-weight: 100;
}
 
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Mono', 'Noto Sans JP', monospace;
}
 
blockquote,
div.blockquote {
    padding: 10px 20px;
    margin: 0 0 10px;
    border: 1px solid hsl(0, 0%, 87%);
    background: hsl(0, 0%, 100%);
}
 
div.content-body hr {
    border: 0;
    height: 0.5px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
 
table.wiki-content-table th {
    background-color: #ffc8c88c;
}
 
#toc {
    padding: 0.5em 0.5em;
    border: none;
    background-color: var(--base-color);
    border-radius: 8px;
    color: var(--background);
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 1em;
}
 
#toc a {
    color: var(--background);
    text-decoration: none;
    transition: .3s;
}
 
#toc a:hover {
    color: rgba(255, 255, 255, .7);
}
 
.code {
    background: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 87%);
    color: var(--font-color);
    font-family: 'Source Code Pro', monospace;
}
 
ul {
    list-style-type: disc;
}
 
ol {
    counter-reset: item;
    list-style-type: none;
    *list-style-type: decimal;
}
 
ol li {
    border-radius: 4px;
    line-height: 2;
    margin-bottom: 10px;
}
 
ol li:before {
    content: '' counter(item, decimal) '';
    background: var(--base-color);
    border-radius: 30px;
    color: var(--background);
    margin: 0 5px 0 8px;
    padding: 2px 5px;
    counter-increment: item;
    font-size: 0.8em;
}
 
::selection {
    background: var(--base-color);
    color: var(--background);
}
 
::-moz-selection {
    background: var(--base-color);
    color: var(--background);
}
 
.scp-image-block .scp-image-caption {
    background-color: var(--background);
}
 
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    border: none;
}
 
::-webkit-scrollbar-thumb {
    background: rgba(50, 50, 50, 0.25);
}
 
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}
 
.hovertip {
    background: var(--base-color);
    color: var(--background);
    border: none !important;
    border-radius: 6px;
    padding: 1em;
    box-shadow: 0 0 3px var(--background);
}
 
div.page-options-bottom {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
}
 
a.btn-default {
    flex-grow: 1;
    text-align: center;
    margin: 0 2px !Important;
    margin-bottom: 4px !Important;
    color: var(--background);
    padding: 4px 10px;
    background: var(--base-color);
    border: 2px solid #ccc;
    border-radius: 3px;
    transition: 0.5s;
}
 
div#page-options-bottom {
    margin-top: 3px;
}
 
a.btn-default:hover {
    text-decoration: none;
    background: #ae2424;
}
 
#footer {
    font-size: 85%;
    background: var(--base-color);
    color: var(--background);
    padding: 7px 10px;
}
 
#main-content .page-tags span {
    max-width: 100%;
    font-family: Segoe UI4;
    border: none !important
}
 
#main-content .page-tags a {
    font-size: 13px;
    padding: 5px;
    border: 1px solid #ccc;
    height: 20px;
    display: inline-flex;
    align-items: center;
    border-radius: 5px
}
 
#main-content .page-tags a:before {
    content: '#'
}
[[/module]]