Link to article: fragment:Fandation-11.
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root {
--primcolor: #280033;
--secocolor: white;
--primchara: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Micha%C5%82_Fr%C4%85ckowiak_-_Caving_8.jpg/1200px-Micha%C5%82_Fr%C4%85ckowiak_-_Caving_8.jpg?20220330000823);
--robo: "Roboto Slab";
--rubi: "Rubik";
--header-title: "Fandation Wiki";
--header-subtitle: "";
--sp_header-logo: none;
--sp_header-title-size: 2rem;
--sp_header-height: 3.2rem;
--sp_top-bar-height: 1rem;
--sp_top-bar-gradient-top-color: var(--primcolor);
--sp_top-bar-gradient-bottom-color: var(--primcolor);
--sp_top-bar-link-color: var(--secocolor);
--sp_top-bar-link-hover-color: var(--primcolor);
--sp_top-bar-link-hover-background: var(--secocolor);
--sp_dropdown-link-color: var(--secocolor);
--sp_dropdown-link-hover-color: var(--primcolor);
--sp_dropdown-link-background: var(--primcolor);
--sp_dropdown-link-hover-background: var(--secocolor);
--sp_dropdown-link-border: none;
--sp_rate-module-background: var(--primcolor);
--sp_rate-module-text-color: var(--secocolor);
--sp_rate-module-button-color: var(--secocolor);
--sp_rate-module-button-background: var(--primcolor);
--sp_rate-module-sub-color: var(--secocolor);
--sp_rate-module-button-hover-color: var(--primcolor);
--sp_rate-module-button-hover-background: var(--secocolor);
}
#container {
background-color: var(--primcolor);
overflow-x: hidden;
}
#content-wrap {
background-color: var(--secocolor);
width: fit-content;
padding: 0 3em;
margin: 0 auto;
}
#login-status {
grid-column: 3 / 8;
padding-right: 12px;
color: var(--secocolor);
}
#login-status a {
color: var(--secocolor);
font-weight: bold;
text-decoration: none;
}
#account-topbutton {
border: 1px solid var(--secocolor);
color: var(--primcolor) !important;
background-color: var(--secocolor) !important;
}
#account-topbutton:hover {
border: 1px solid var(--secocolor);
color: var(--secocolor) !important;
background-color: var(--primcolor) !important;
}
#account-options {
margin-right: 12px;
border: none;
background-color: var(--secocolor);
font-weight: bold;
}
#account-options li a:hover {
color: var(--secocolor);
background-color: var(--primcolor);
text-decoration: none;
}
#search-top-box {
flex-direction: row-reverse;
grid-column: 5 / 8;
padding-right: 12px;
}
#search-top-box-form input[type=submit] {
background-color: var(--secocolor);
background-image: none;
color: var(--primcolor);
box-shadow: none;
border: solid 1px var(--secocolor);
border-radius: 0;
transition: 200ms;
}
#search-top-box-form input[type=submit]:hover {
background-color: var(--primcolor);
background-image: none;
border: solid 1px var(--secocolor);
color: var(--secocolor);
box-shadow: none;
}
#header {
grid-template-areas:
". . . . ."
". . . . ."
"h1 . . login login"
"h1 . . search search"
". . . . ."
"top-bar top-bar top-bar top-bar top-bar";
grid-template-columns: repeat(5, 1fr);
background-color: var(--primcolor);
background-image: none;
padding-bottom: 0px;
}
#header h1 {
padding-inline-start: 3rem;
display: flex;
align-items: center;
grid-column: 1 / 4;
}
#header h1 a::before {
font-family: var(--rubi);
font-size: 24px;
color: var(--secocolor);
font-weight: bold;
text-shadow: none;
}
#top-bar {
padding: 0;
}
#top-bar ul li {
flex-grow: 1;
}
#top-bar ul li ul {
border: none;
box-shadow: none;
}
#top-bar > div[class*="top-bar"] {
width: 100vw;
max-width: 100vw;
}
#top-bar .open-menu a {
border: none;
background-color: var(--secocolor);
color: var(--primcolor);
top: 12px;
left: 12px;
border-radius: 0;
}
/* ============ */
/* PAGE PROPER */
/* ============ */
#page-content {
position: relative;
}
#page-content h1 {
font-size: 36px;
font-family: var(--robo);
font-weight: 300;
line-height: 45px;
color: #3a3a3a;
}
#page-content h2 {
font-size: 24px;
font-family: var(--robo);
font-weight: 500;
line-height: 30px;
color: #3a3a3a;
border-bottom: solid 1px #cecdce;
padding: 6px 0;
overflow: auto;
}
body, html {
font-family: var(--rubi);
}
a, a:visited, #interwiki a, #side-bar a, #account-options li a {
color: var(--primcolor);
transition: 200ms;
}
#page-title {
color: #3a3a3a;
font-size: 36px;
font-weight: 300;
line-height: 45px;
font-family: var(--rubi);
padding-top: 0.5em;
}
.page-rate-widget-box, div.page-rate-widget-box {
border-radius: 3px;
box-shadow: none;
text-transform: capitalize;
transition: 200ms;
}
#page-content table {
border-spacing: 0;
float: right;
clear: right;
width: 270px;
margin: 0 0 18px 18px;
}
#page-content td {
padding: 9px;
}
#page-content td p, .searchbox p, .foryou p, .botrightadsect p, .joinbutt p {
margin-block-start: 0;
margin-block-end : 0;
}
#footer {
background: var(--secocolor);
color: black;
margin-top: 2.5rem;
}
#footer a {
color: var(--primcolor);
}
#license-area {
color: var(--secocolor);
}
#license-area a {
font-weight: bold;
color: var(--secocolor);
}
/* ========== */
/* HOME PAGE */
/* ========== */
.searchbox {
margin: auto;
max-width: 80%;
border: 2px solid #f9edd8;
background-color: #280033;
background-image:
radial-gradient(9px circle at 95.8% 46%, var(--secocolor) 50%, transparent 51%),
radial-gradient(15px circle at 95.8% 46%, var(--primcolor) 50%, transparent 51%),
radial-gradient(30px circle at 96% 50%, var(--secocolor) 50%, transparent 51%);
border-radius: 100px;
padding: 6px 12px;
font-size: 16px;
color: #f9edd8;
position: relative;
}
.searchbox:hover {
background-image:
radial-gradient(9px circle at 95.8% 46%, var(--primcolor) 50%, transparent 51%),
radial-gradient(15px circle at 95.8% 46%, var(--secocolor) 50%, transparent 51%),
radial-gradient(30px circle at 96% 50%, var(--primcolor) 50%, transparent 51%);
}
.searchbox::before {
position: absolute;
content: "";
height: 7px;
width: 5px;
background-color: var(--primcolor) ;
top: 65%;
left: 97.3%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.searchbox:hover::before {
background-color: var(--secocolor) ;
}
.foryou {
background-color: #fec601;
font-weight: bold;
font-size: 20px;
padding: 16px 20px;
width: fit-content;
margin: 1rem;
}
.panelese {
display: flex;
background-image: linear-gradient(45deg, var(--primcolor), #700041);
}
.paneler {
flex: calc(100% / 2);
margin: 1em;
padding: 1em;
height; fit-content;
color: white;
}
.pulse {
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes pulse {
0% {filter: drop-shadow(0px 0px 0px green);}
50% {filter: drop-shadow(0px 0px 10px orange);}
100% {filter: drop-shadow(0px 0px 0px green);}
}
.linkbox {
position: relative;
}
.linkbox p {
height: 15px;
margin-block-start: 5px;
margin-block-end: 5px;
}
.linkbox:hover {
text-decoration: underline;
}
.link{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
color:rgba(0,0,0,0.0);
}
.wikinames {
font-weight: bold;
color: #fec601;
text-transform: uppercase;
}
/* ============= */
/* ENTRY PROPER */
/* ============= */
.imagehead, .artname, .boldhead, .charname1, .charname2, .wordname, .endname {
border: solid var(--primcolor);
}
.imagehead, .artname, .boldhead, .charname1, .wordname {
border-width: 1px 1px 0 1px;
}
.imagehead {
border-radius: 3px 3px 0 0;
padding: 0 !important;
background-image: var(--primchara);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
}
.artname, .boldhead, .charname1, .charname2 {
text-align: center;
}
.boldhead {
background-color: var(--primcolor);
color: var(--secocolor);
}
.charname2 {
border-width: 1px 1px 0 0;
}
.charname1 p:nth-child(1), .charname2 p:nth-child(1), .boldhead, .wordname p:nth-child(1), .endname p:nth-child(1) {
font-weight: bold;
}
.endname {
border-width: 1px 1px 1px 1px;
border-radius: 0 0 3px 3px;
}
ul {
list-style: disc;
}
.comment {
background-color: #f2f1f2;
border: solid 1px rgba(206, 205, 206, 0.5);
border-radius: 3px;
padding: 18px;
margin-bottom: 2rem;
font-size: 14px;
}
.comment p {
display: flex;
align-items: center;
}
.comment hr {
margin: 1em 0;
border-top: solid 1px rgba(206, 205, 206, 0.5);
background-color: transparent;
color: transparent;
}
.comment .printuser img {
border-radius: 100%;
}
.comment .printuser > a:first-child img {
background-image: none !important;
padding-left: 0;
margin-right: 1.5rem;
height: 2rem;
width: 2rem;
border: solid 2px rgba(206, 205, 206, 0.5);
}
.comment .printuser > a:first-child img:hover {
border: solid 2px var(--primcolor);
}
.comment .printuser a:nth-child(2) {
display: none;
}
.chain {
border-left: 4px solid rgba(206, 205, 206, 0.5);
padding-left: 24px;
}
/* ==================== */
/* COLLAPSIBLES PROPER */
/* ==================== */
#page-content .collapsible-block-folded {
display: none;
}
#page-content .collapsible-block-unfolded-link {
text-align: right;
}
#page-content .collapsible-block-unfolded a {
color: grey;
font-size: 10px;
}
ul.modal-wrapper {
margin: 0;
padding: 0;
list-style: none;
height: 0;
display: contents;
}
@keyframes fademodal {
99% { visibility: hidden; }
100% { visibility: visible; }
}
ul.modal-wrapper > li {
list-style: none;
position: absolute;
top: -0.1rem;
left: 0;
width: 100%;
height: 100%;
z-index: 9;
transition: opacity 0.15s ease-out;
animation: 0.15s fademodal;
animation-fill-mode: forwards;
}
ul.modal-wrapper > li.unfolded {
visibility: visible;
opacity: 1;
}
ul.modal-wrapper > li.folded {
visibility: hidden;
opacity: 0;
pointer-events: none;
user-select: none;
}
.leftad, .rightad {
top: 5.5rem;
max-width: calc((100vw - 55rem) / 2);
position: fixed;
margin: 0.5em;
width: 100%;
display: block !important;
}
.leftad {
left: 1rem;
}
.rightad {
right: 1rem;
}
.leftads, .rightads {
height: calc(100vh - 8rem);
}
.botrightad {
bottom: 2em;
left: 0.5em;
max-width: calc(100vw - 66px - 9px);
position: fixed;
margin: 0.5em;
display: block !important;
z-index: 10;
width: 100%;
}
.botrightads {
background-color: orange;
border-radius: 100px;
color: var(--secocolor);
display: flex;
align-items: center;
justify-content: right;
padding-right: 3px;
width: fit-content;
}
.botrightadsect {
padding-left: 1em;
}
.animads {
padding-right: 8px;
}
.animads:after {
animation-name: rotate-text;
animation-duration: 30s;
animation-iteration-count: infinite;
content: "";
animation-fill-mode: both;
animation-timing-function: steps(3, end);
}
@keyframes rotate-text {
0% { content: "Wiki Quiz"; }
20% { content: "SCP Dating" ; }
40% { content: "Object Class Test"; }
60% { content: "Critcoin"; }
80% { content: "Series I"; }
100% { content: "AI Chatbot"; }
}
.roundedit {
position: absolute;
border-radius: 100%;
background-color: #f2f1f2;
height: 36px;
width: 36px;
box-shadow: 0 3px 12px 0 #0000004d;
color: var(--primcolor);
display: flex;
align-items: center;
justify-content: center;
left: 102%;
font-weight: bold;
}
.high {
top: 0em;
}
.mid {
top: 3em;
}
.low {
top: 6em;
}
.joindiscord {
background-color: #f2f1f2;
font-weight: bold;
padding: 2px;
margin-top: 1em;
}
.joinspan {
background-image: linear-gradient(to top,rgba(28, 95, 205, 0.1),#0000 54%,#0000 100%);
font-size: 18px;
}
.joinbutt {
border: solid 1px #3a3a3a;
display: flex;
align-items: center;
justify-contents: center;
width: fit-content;
padding: 7px 18px;
border-radius: 3px;
}
.joinbutt:hover {
color: #6d6d6d;
border: solid 1px #6d6d6d;
}
.topad {
top: 4.5rem;
left: 0;
width: 100vw;
position: fixed;
display: block !important;
}
.topads {
background: green;
height: 300px;
}
div#u-adult-warning {
width: 100%;
height: 100%;
overflow: auto;
box-sizing: border-box;
color: black;
text-shadow: none;
background: #fec601;
border: none;
}
#u-adult-warning .choice {
background-color: var(--primcolor);
font-weight: bold;
color: var(--secocolor);
border-radius: 3px;
padding: 3px 5px;
box-shadow: 2px 2px 1px grey;
width: fit-content;
margin: auto;
transition: 200ms;
}
.choice a {
color: var(--secocolor);
text-decoration: none;
}
.choice:hover {
background-color: var(--secocolor) !important;
}
.choice a:hover {
color: var(--primcolor) !important;
}
.unchoice {
text-align: right;
padding-right: 2rem;
padding-top: 1rem;
}
.unchoice2 {
text-align: right;
padding-right: 0rem;
padding-top: 1rem;
}
.unchoice2 a {
color: grey;
font-size: 10px;
}
.unchoice3 {
background-color: white;
height: 1.2rem;
width: 1.2rem;
border-radius: 100%;
text-align: center;
}
#u-adult-warning table {
width: 70%;
float: none;
clear: none;
margin: auto;
}
#u-adult-warning td {
text-align: center;
}
/* ================== */
/* RANDOMIZER PROPER */
/* ================== */
.randMod {
padding-block-end: .001rem;
}
.randMod div[id] {
display: none;
}
div:is(.A, .B, .C, .D, .E, .F) {
display: none;
}
.randMod div:is([id$='0']) ~ div.A {
display: block !important;
}
.randMod div:is([id$='1']) ~ div.B, .randMod div:is([id$='2']) ~ div.B {
display: block !important;
}
.randMod div:is([id$='3']) ~ div.C, .randMod div:is([id$='4']) ~ div.C {
display: block !important;
}
.randMod div:is([id$='5']) ~ div.D, .randMod div:is([id$='6']) ~ div.D {
display: block !important;
}
.randMod div:is([id$='7']) ~ div.E, .randMod div:is([id$='8']) ~ div.E {
display: block !important;
}
.randMod div:is([id$='9']) ~ div.F {
display: block !important;
}
/* ============= */
/* SIZING PROPER */
/* ============= */
@media only screen and (max-width: 450px) {
#page-content table {
width: 100%;
float: none;
clear: none;
margin: 0;
}
#content-wrap {
background-color: var(--secocolor);
width: auto;
padding: 0 1em;
}
.searchbox {
background-image:
radial-gradient(9px circle at 93.8% 46%, var(--secocolor) 50%, transparent 51%),
radial-gradient(15px circle at 93.8% 46%, var(--primcolor) 50%, transparent 51%),
radial-gradient(30px circle at 94% 50%, var(--secocolor) 50%, transparent 51%);
}
.searchbox:hover {
background-image:
radial-gradient(9px circle at 93.8% 46%, var(--primcolor) 50%, transparent 51%),
radial-gradient(15px circle at 93.8% 46%, var(--secocolor) 50%, transparent 51%),
radial-gradient(30px circle at 94% 50%, var(--primcolor) 50%, transparent 51%);
}
.searchbox::before {
left: 95.3%;
}
}
@media only screen and (max-width: 1000px) {
ul.modal-wrapper.leftad, ul.modal-wrapper.rightad, ul.modal-wrapper.botrightad {
display: none !important;
}
}