Link to article: Dirty Hands, Clean Image.
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Emilys+Candy&display=swap');
@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash&display=swap');
@import url('https://fonts.googleapis.com/css?family=Sansita&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: auto; box-shadow: 0 1px 3px rgba(0,0,0,.5); background-color: #F5F5F0; color: black; font-family: "Sansita";}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px #9538a5;font-family: "Emilys Candy"}
.tofrom2 {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px #9538a5; font-family: "Emilys Candy"}
a, a.newpage, a:visited, #interwiki a, #side-bar a {
color: royalblue;
}
.bemail {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: auto; box-shadow: 0 1px 3px rgba(0,0,0,.5); background-color: #F5F5F0; color: black; font-family: "Helvetica";}
.email-example a.collapsible-block-link {font-weight: bold;}
.btofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px royalblue;font-family: "Helvetica"}
.btofrom2 {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px royalblue; font-family: "Helvetica"}
.fancytext {
font-family:"EB Garamond";
font-size:120%;
}
#header-extra-div-1, #header-extra-div-2, #header-extra-div-3 {
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
background-repeat: repeat;
height: 270px;
width: 99.4vw;
position: absolute;
left: calc((-100vw + 100%)/2);
z-index: 2;
pointer-events: none;
}
/* ---- SNOWFALL, adapted from https://github.com/elena-in-code/Css-Snow-Fall-Animation ---- */
#header-extra-div-1 {
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Axmas/sn2.png');
background-size: 230px;
animation: snowOne 83s infinite linear;
filter: blur(1.3px);
}
#header-extra-div-2 {
background-image: url('https://scp-wiki.wdfiles.com/local--files/theme%3Axmas/sn.png');
background-size: 370px;
animation: snowTwo 39s infinite linear;
filter: blur(0.4px);
}
#header-extra-div-3 {
background: url('https://scp-wiki.wdfiles.com/local--files/theme%3Axmas/sn.png');
background-size: 720px;
animation: snowThree 21s infinite linear;
filter: blur(2.4px);
}
@keyframes snowOne{
0%
{
background-position: 0px 0px;
opacity: 0;
}
10%
{
opacity: 0.6;
}
90%
{
opacity: 0.5;
}
100%
{
background-position: 100px 750px;
opacity:0;
}
}
@keyframes snowTwo{
0%
{
background-position: 0px -100px;
opacity: 0;
}
8%
{
opacity: 0.74;
}
90%
{
opacity: 0.65;
}
100%
{
background-position: -50px 700px;
opacity: 0;
}
}
@keyframes snowThree{
0%
{
background-position: 0px 100px;
opacity: 0;
}
13%
{
opacity: 0.9;
}
91%
{
opacity: 0.8;
}
100%
{
background-position: 240px 750px;
opacity: 0;
}
}
color:red;
component:preview
:scp-wiki:theme:black-diamond
[info]
:scp-wiki:component:text-style
[info]
:scp-wiki:info:start
[info]
:scp-wiki:info:end
[info]
:scp-wiki:component:info-cw
[info]
bemail
btofrom
fancytext
ornament1
ornament1