:root {
--fade-in-delay: 0.1s;
--fade-in-delay-typing: 4s;
--typing-speed: 6s;
/* Header */
--logo-image: url("");
--header-title: "THE SIMULACRA";
--header-subtitle: "我还在看着你呢。";
--white-monochrome: 0,0,0;
--pale-gray-monochrome: 118,0,197;
--light-gray-monochrome: 243,243,243;
--gray-monochrome: 207,135,255;
--black-monochrome: 217,203,158;
--bright-accent: 243,243,243;
--medium-accent: 153,0,255;
--dark-accent: 243, 243, 243;
--dark-gray-monochrome: 153, 0, 255;
--link-color: 69, 226, 50;
--hover-link-color: 20, 230, 0;
--visited-link-color: 69, 226, 50;
--header-h1-font-size:250%;
--header-h2-font-size:190%;
--hdtt-color-11:rgb(var(--darkest-blue));
--hdtt-color-22:rgb(var(--swatch-text-general));
--hdtt-flcl-11:yellow;
--hdtt-flcl-22:purple;
}
--header-height-on-desktop: 9rem;
#extrac-div-1 {
position: fixed;
width: 100vw;
height: 100vh;
pointer-events: none;
background: repeating-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0));
background-size: auto 8px;
opacity: 0.7;
}
#extrac-div-2 {
position: fixed;
width: 100vw;
height : 4rem;
top: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(153, 0, 255) 0%,rgba(153, 0, 255) 50%,rgba(153, 0, 255) 51%,rgba(153, 0, 255) 100%);
opacity : .1;
animation: scanm 2s linear infinite;
}
@keyframes scanm {
0% { top: -1rem; opacity : .05;}
25% { top: 50%; opacity: .03;}
37.5% { top: 75%; opacity: 0.06;}
50% { top: 100%; opacity: .03;}
100% { top: 100%;}
}
#extrac-div-3 {
position: fixed;
width: 100vw;
height: 100vh;
pointer-events: none;
background-image: radial-gradient(circle, rgb(17, 167, 0) 0%, rgb(156, 243, 146) 60%, rgb(216, 222, 215) 100%);
opacity: 0.25;
mix-blend-mode: color-dodge;
background-repeat: no-repeat;
background-size: cover;
z-index: 30;
}
#page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); }
#page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); }
#page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); }
#page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); }
#page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); }
#page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); }
#page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); }
#page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); }
#page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); }
#page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); }
#page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); }
#page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); }
#page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); }
#page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); }
#page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); }
#page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); }
#skrollr-body {
background-image:
radial-gradient(circle, rgb(var(--black-monochrome)) 50%, transparent 0);
background-repeat: repeat;
background-size: 0.25em 0.25em;
width: 100%;
height: 7.5rem;
}
#side-bar .side-block div a img {
filter: grayscale(100%);
}
#header::before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-image: var(--logo-image);
opacity: 1;
}
body::after {
content: "";
background-image: url("");
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.5;
z-index: -1;
}
a:hover::after {
content: " _";
}
.titleblock {
background-color: rgb(var(--dark-gray-monochrome));
color:rgb(var(--white-monochrome));
padding: 0.5rem 1rem 0.10rem;
margin: 1.5rem 0rem 0.5rem 0rem;
box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
border: solid rgb(var(--bright-accent)) 2px;
border-radius: 0px;
}
.page-rate-widget-box {
background: none;
border: none;
background-color: purple;
border-left: 0.25rem solid white;
border-right: 0.25rem solid white;
border-top: 0.25rem solid rgba(var(--pale-accent));
border-bottom: 0.25rem solid rgba(var(--pale-accent));
border-radius: 5px;
background-image: linear-gradient(to right, green 10% , purple 90%);
opacity: 0.7;
}
.titlebox{
color: rgb(var(--dark-gray-monochrome));
position: relative;
top: -1.6rem;
background-color: rgb(var(--bright-accent));
padding: 0.25rem 1rem;
line-height: 0.1rem;
border-radius: 2px;
opacity: 0.95;
}
