Link to article: The Nineties Page.
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kranky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barriecito&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
:root {
--bung: "Bungee Shade";
--conc: "Concert One";
--kran: "Kranky";
--barr: "Barriecito";
--shri: "Shrikhand";
--header-title: "The Nineties Page";
--header-subtitle: "It's fucking radical, dude.";
--sp_header-logo: none;
--sp_header-title-size: 4rem;
--sp_header-subtitle-size: 1rem;
--sp_header-height: 20rem;
--sp_top-bar-height: 2rem;
--sp_top-bar-gradient-top-color: #fedc01;
--sp_top-bar-gradient-bottom-color: #fedc01;
--sp_top-bar-link-color: #6e05ae;
--sp_top-bar-link-hover-color: #ffe403;
--sp_top-bar-link-hover-background: #6e05ae;
--sp_dropdown-link-color: #6e05ae;
--sp_dropdown-link-hover-color: #ffe403;
--sp_dropdown-link-background: #ffe403;
--sp_dropdown-link-hover-background: #6e05ae;
--sp_dropdown-link-border: none;
--sp_rate-module-background: #4551c7;
--sp_rate-module-text-color: white;
--sp_rate-module-button-color: black
--sp_rate-module-button-background: #ffe552;
--sp_rate-module-sub-color: white;
--sp_rate-module-button-hover-color: #ffe552;
--sp_rate-module-button-hover-background: #fd77ac;
--sp_hovertip-background: linear-gradient(80deg, #01cfff 15%, #fee604 15% 79%, #01cfff 79%);
--sp_hovertip-border: 0.1em solid black;
}
#login-status {
padding-right: 12px;
font-family: var(--shri);
font-size: clamp(1rem, 0.643rem + 0.952vw, 1.5rem);
color: #7eff86;
text-stroke: 1px black;
-webkit-text-stroke: 1px black;
}
#login-status a, #login-status ul a {
color: #ffec85;
font-size: clamp(1rem, 0.643rem + 0.952vw, 1.5rem);
text-stroke: 1px black;
-webkit-text-stroke: 1px black;
}
#account-options {
margin-top: 3px;
margin-right: 12px;
text-align: center;
border: none;
border-color: transparent;
background-color: var(--yellow);
width: fit-content;
}
#account-topbutton {
font-size: 80%;
border: none;
margin-left: 0;
transition: 200ms;
}
#account-topbutton:hover {
color: #7eff86;
}
#account-options li a {
text-transform: capitalize;
background: orange;
transition: 200ms;
}
#account-options li a:hover {
background: purple;
color: yellow;
text-decoration: none;
}
#search-top-box {
align-items: flex-start;
flex-direction: row-reverse;
flex-wrap: wrap;
padding: 8px 12px 0 0;
font-family: var(--bung);
font-size: 1.2rem;
}
#search-top-box-form input[type=submit] {
background-color: white;
background-image: none;
color: #0000a1;
border: 0.15em dotted #0000a1;
box-shadow: none;
border-radius: 0;
transition: 200ms;
}
#search-top-box-form input[type=submit]:hover {
background-color: #0000a1;
border: 0.15em dotted #0000a1;
background-image: none;
color: white;
box-shadow: none;
}
#header {
grid-template-areas:
". . login login login"
". . . . search"
"h1 h1 h1 h1 h1"
"h2 h2 h2 h2 h2"
". . . . ."
"top-bar top-bar top-bar top-bar top-bar";
grid-template-columns: repeat(5, 1fr);
background-color: #01abaa;
background-image: conic-gradient(at 52% 52%, transparent 6deg, #683697 6deg 40deg, #ff0147 40deg 130deg, #fedc01 130deg 210deg, transparent 210deg), linear-gradient(45deg, #01abaa 25%, transparent 25%), linear-gradient(315deg, #01abaa 25%, transparent 25%), linear-gradient(45deg, transparent 24%, #018b8e 25%, #018b8e 45%, transparent 45%), linear-gradient(315deg, transparent 24%, #018b8e 25%, #018b8e 45%, transparent 45%);
background-size: 100% 100%, 2em 2em, 2em 2em, 2em 2em, 2em 2em;
background-repeat: no-repeat, repeat, repeat, repeat, repeat;
position: relative;
box-shadow: 0px 4px 4px grey;
}
#header h1, #header h2 {
padding-inline-start: 0;
text-align: center;
z-index: 2;
}
#header h1 a, #header h2 span {
text-shadow: none;
}
#header h1 a::before {
background-image: linear-gradient(-45deg, #01b9ec, #fee451);
background-clip: text;
color: transparent;
font-family: var(--shri);
font-weight: 100;
text-stroke: 2px black;
-webkit-text-stroke: 2px black;
}
#header h2 span::before {
display:none;
}
#header-extra-div-1, #header-extra-div-2 {
position: absolute;
background-image: repeating-linear-gradient(35deg, pink 35px 40px, #ff95cc 40px 47px);
width: 30rem;
height: 10rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#header-extra-div-1 {
background-image: repeating-linear-gradient(35deg, pink 35px 40px, #ff95cc 40px 47px);
clip-path: polygon(86% 0, 0 70%, 100% 100%);
z-index: 1;
}
#header-extra-div-2 {
background-image: linear-gradient(80deg, red, #02ac83);
clip-path: polygon(96% 7%, 4% 49%, 83% 100%);
z-index: 0;
}
#top-bar {
font-family: var(--barr);
max-width: 100%;
font-size: 1rem;
}
#top-bar ul li {
flex-grow: 1;
}
#top-bar ul li a {
transition: 200ms;
}
#top-bar div[class*="top-bar"] > ul {
justify-content: center;
}
#top-bar ul li ul {
border-width: 0 0;
box-shadow: none;
}
#top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a {
line-height: 2;
text-align: center;
}
#top-bar .open-menu a {
border: 0.1em dotted #4551c7;
border-radius: 0;
background-color: #ee9ca2;
color: #4551c7;
transition: 200ms;
}
#top-bar .open-menu a:hover {
background-color: #4551c7;
color: #ee9ca2;
}
#side-bar {
background-color: rgba(1, 207, 255, 0.5);
}
#side-bar .heading, #interwiki .heading {
margin: 0.6rem 0 0.5rem;
padding: 0;
color: #004a83;
height: 1rem;
display: flex;
justify-content: space-around;
align-items: center;
border: none;
font-family: var(--bung);
}
#side-bar .menu-item {
display: flex;
}
#side-bar .menu-item a {
flex-grow: 1;
text-align: center;
font-family: var(--shri);
font-weight: 100;
}
#side-bar .heading::before, #side-bar .heading::after, #interwiki .heading::before, #interwiki .heading::after {
content: "";
height: 1px;
box-sizing: border-box;
margin: 0.1rem 0.5rem 0;
border-bottom: 5px double #004a83;
flex: 1 1 0;
}
#side-bar .side-block.media, #side-bar .side-block.resources, #side-bar .side-block, #interwiki .side-block {
border: 0.1em dotted #ab0000;
border-radius: 0;
background-color: rgba(255,229,1,0.8);
box-shadow: none;
backdrop-filter: blur(2px);
}
#container {
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
overflow: hidden;
}
.marginal:nth-child(odd){
transform: rotate(0.5deg);
}
.marginal:nth-child(even){
transform: rotate(-0.5deg);
}
.marginal:nth-child(3n){
transform: rotate(1deg);
}
.marginal:nth-child(7n){
transform: rotate(0deg);
}
#page-content .printuser a:nth-child(2){
display: none;
}
#page-content .printuser img.small{
background-image: none !important;
width: 100%;
height: 100%;
padding: 0;
}
#page-title {
display: none;
}
.marginal {
margin: 20px 0;
}
.heed{
width: 100%;
font-size: clamp(1.5rem, 0.286rem + 1.905vw, 2rem);
text-align: center;
font-family: var(--conc);
}
.haad {
width: 100%;
text-align: center;
font-family: var(--conc);
font-size: 1rem;
border-top: 0.2em orange dashed;
}
.hood {
font-family: var(--conc);
font-size: 1.2rem;
}
.highlightee {
background: rgba(255,255,0,0.4);
}
.highlightees {
text-decoration: underline double red;
}
.highlighteer {
text-decoration: underline wavy blue;
}
h1 {
font-family: var(--kran);
color: #4551c7;
font-size: clamp(2rem, 0.571rem + 3.81vw, 4rem);
}
.intro {
font-family: var(--conc);
font-size: clamp(1.2rem, 0.286rem + 1.905vw, 1.5rem);
}
.intro p {
line-height: 1;
}
a {
color: #0104b8 ;
}
a:visited {
color: #21af00;
}
.page-rate-widget-box {
border-radius: 0;
box-shadow: none;
}
#action-area, #page-info {
color: purple;
}
#page-info, .page-watch-options, .page-options-bottom {
text-align: center;
}
.page-options-bottom {
margin: 0;
}
.page-options-bottom a, .owindow .button-bar a {
border: 0.2em dotted #0000a1;
background-color: white;
color: #0000a1;
text-decoration: none;
transition: 200ms;
font-family: var(--conc);
font-size: 1rem;
}
.page-options-bottom a:hover, .owindow .button-bar a:hover {
border: 0.2em dotted #0000a1;
background: #0000a1;
color: white;
}
#lock-info {
color: var(--cacao);
}
#footer {
margin-top: 0px;
background-image: linear-gradient(90deg, var(--cherry) 1vw, var(--caramel) 1vw 2vw, var(--cyan) 2vw 3vw);
margin: 0;
padding-left: 3vw;
padding-top: 6px;
}
.art1, .art2, .art3, .art4, .art5, .art6, .art7, .art8, .art9, .art10 {
position: relative;
}
.art1:after, .art2:after, .art3:after, .art4:after, .art5:after, .art6:after, .art7:after, .art8:after, .art9:after, .art10:after {
content: "";
position: absolute;
translate(-50%, -50%);
}
.art1:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle1.png");
height: 312px;
width: 300px;
top: 50%;
left: 102%;
}
.art2:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle2.png");
height: 312px;
width: 300px;
top: 30%;
left: -40%;
}
.art3:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle3.png");
height: 246px;
width: 300px;
top: 60%;
left: 100%;
}
.art4:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle4.png");
height: 380px;
width: 380px;
top: 50%;
left: -50%;
}
.art5:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle5.png");
height: 380px;
width: 380px;
top: 40%;
left: 100%;
}
.art6:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle6.png");
height: 380px;
width: 380px;
top: 30%;
left: -50%;
}
.art7:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle7.png");
height: 300px;
width: 300px;
top: 70%;
left: 100%;
}
.art8:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle8.png");
height: 300px;
width: 300px;
top: 50%;
left: -40%;
}
.art9:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle9.png");
height: 380px;
width: 380px;
top: 40%;
left: 100%;
}
.art10:after {
background-image: url("https://scp-wiki.wikidot.com/local--files/the-nineties-page/doodle10.png");
height: 300px;
width: 300px;
top: 50%;
left: -40%;
}
@media only screen and (max-width: 450px) {
.heed, .haad {
text-align: right;
width: 70%;
}
}
@media only screen and (max-width: 700px) {
.art1:after, .art2:after, .art3:after, .art4:after, .art5:after, .art6:after, .art7:after, .art8:after, .art9:after, .art10:after {
display: none;
}
}
margin:300px
:scp-wiki:component:sigma-plus
[info]
:scp-wiki:component:toggle-sidebar
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
intro
art1
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art2
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art3
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art4
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art5
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art6
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art7
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art8
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art9
marginal
heed
haad
highlightee
highlighteer
highlightees
hood
art10
marginal
heed
haad
highlightee
highlighteer
highlightees
hood