body::before,
body::after,
#container::before,
#container::after,
#content-wrap::before,
#content-wrap::after {
content: "";
position: fixed;
top: -50px;
left: calc(var(--random-left, 0) * 100%);
width: var(--size, 8px);
height: var(--size, 8px);
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
opacity: var(--opacity, 0.6);
animation: snowfall var(--duration, 10s) linear infinite;
z-index: 9999;
pointer-events: none;
}
body::before { --random-left: 0.1; --size: 6px; --duration: 8s; --opacity: 0.7; }
body::after { --random-left: 0.3; --size: 10px; --duration: 12s; --opacity: 0.5; }
#container::before { --random-left: 0.5; --size: 7px; --duration: 9s; --opacity: 0.8; }
#container::after { --random-left: 0.7; --size: 5px; --duration: 11s; --opacity: 0.6; }
#content-wrap::before { --random-left: 0.2; --size: 9px; --duration: 13s; --opacity: 0.4; }
#content-wrap::after { --random-left: 0.8; --size: 8px; --duration: 7s; --opacity: 0.9; }
@keyframes snowfall {
0% {
transform: translate(0, 0) rotate(0deg);
opacity: var(--opacity);
}
100% {
transform: translate(var(--x-move, 30px), 100vh) rotate(360deg);
opacity: 0;
}
}
body {
opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
background-color: rgb(15, 23, 42);
color: rgb(200, 214, 255);
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
#main-content::before,
#main-content::after,
#side-bar::before,
#side-bar::after {
content: "";
position: fixed;
top: -50px;
left: calc(var(--random-left, 0) * 100%);
width: var(--size, 6px);
height: var(--size, 6px);
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
opacity: var(--opacity, 0.5);
animation: snowfall var(--duration, 9s) linear infinite;
z-index: 9999;
pointer-events: none;
}
#main-content::before { --random-left: 0.4; --size: 5px; --duration: 10s; --opacity: 0.6; }
#main-content::after { --random-left: 0.6; --size: 7px; --duration: 14s; --opacity: 0.4; }
#side-bar::before { --random-left: 0.9; --size: 8px; --duration: 8s; --opacity: 0.7; }
#side-bar::after { --random-left: 0.05; --size: 9px; --duration: 11s; --opacity: 0.5; }
#container {
background-color: rgb(10, 18, 35);
background-image: radial-gradient(circle, rgba(30, 58, 138, 0.1) 50%, transparent 0);
}
h0, h1, h2, h3, h4, h5, h6, #page-title {
color: rgb(144, 195, 255);
}
a, a:link, a.newpage {
color: rgb(125, 185, 255);
}
a:hover, a:focus {
color: rgb(173, 216, 255);
}
a:visited {
color: rgb(100, 160, 255);
}
.whiteblock {
background-color: rgb(30, 41, 59);
color: rgb(224, 231, 255);
border: 1px solid rgb(59, 130, 246);
}
.blackblock {
background-color: rgb(8, 14, 30);
color: rgb(200, 214, 255);
border: 1px solid rgb(37, 99, 235);
}
.lightblock {
background-color: rgb(29, 41, 70);
color: rgb(216, 228, 255);
border: 1px solid rgb(59, 130, 246);
}
.darkblock {
background-color: rgb(12, 20, 38);
color: rgb(191, 219, 254);
border: 1px solid rgb(37, 99, 235);
}
blockquote, .light-styled-quote, .dark-styled-quote, .white-styled-quote, .black-styled-quote {
background-color: rgb(18, 32, 64);
color: rgb(200, 214, 255);
border-left-color: rgb(59, 130, 246);
}
table.wiki-content-table th {
background-color: rgb(12, 20, 38);
border-color: rgb(59, 130, 246) !important;
color: rgb(144, 195, 255);
}
table.wiki-content-table td {
background-color: rgb(15, 23, 42);
border-color: rgb(59, 130, 246) !important;
color: rgb(200, 214, 255);
}
.light-titleblock, .dark-titleblock, .white-titleblock, .black-titleblock {
background-color: rgb(18, 32, 64);
color: rgb(191, 219, 254);
border-color: rgb(59, 130, 246);
}
.light-titlebox, .dark-titlebox, .white-titlebox, .black-titlebox {
background-color: rgb(18, 32, 64);
color: rgb(191, 219, 254);
border-color: rgb(59, 130, 246);
}
#header {
background-color: rgb(8, 14, 30);
}
#top-bar {
background-color: rgb(12, 20, 38);
border-bottom-color: rgb(59, 130, 246);
}
.footer-wikiwalk-nav {
color: rgb(173, 216, 255);
}