Link to article: A Brief History of Y AI - Offset 8.
:root {
--header-title: "𝕐 AI";
--header-subtitle: "A subsidiary of Terblanche Enterprises LLC";
--main-content-width: 100vw;
--main-content-side-margin: 0;
--main-content-top-margin: 0;
--really-ease-out: 0, 0.99, 0, 1;
--kinda-ease-out: 0.32, 0.83, 0.31, 0.82;
--basalt-background-color: 250, 250, 247;
--logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1-black.png);
}
#header {
position: fixed;
}
body {
background-image: linear-gradient(to bottom, #fafaf7 0%, #fafaf7 95%, black 95.01%, black 100%);
}
@media (max-width: 768px) {
.y-ai-hero .y-ai-title {
font-size: 23vw;
top: 30%;
}
.y-ai-hero .y-ai-subtitle {
top: 50%;
}
}
#page-title {
display: none !important;
}
.y-ai-hero {
width: 100vw;
height: 100vh;
position: relative;
font-family: 'Times New Roman', serif;
}
.y-ai-title {
position: absolute;
top: 40%;
left: 50%;
translate: -50% -50%;
font-size: 15vw;
}
.y-ai-subtitle {
position: absolute;
top: 65%;
left: 50%;
translate: -50% -50%;
font-size: 200%;
text-align: center;
}
#page-content {
font-family: 'Times New Roman', serif;
}
#page-content h2 {
font-family: 'Times New Roman', serif;
font-size: 400%;
margin: 10vh auto;
text-align: center
}
#page-content p, #page-content li {
width: min(1000px, 90%);
margin: auto;
font-size: 200%;
line-height: 1.8;
margin-bottom: 1lh;
}
.short-line {
width: 30%;
margin: auto;
height: 0;
border-top: 1px solid black;
font-size: 200%;
line-height: 1.8;
margin-bottom: 1lh;
}
#page-content img {
margin: auto;
display: block;
}
#page-content * {
animation-name: misalign;
animation-fill-mode: both;
animation-duration: 240s;
animation-delay: 1s;
}
*:nth-child(4n+1) {
--rot: 1deg;
}
*:nth-child(4n+2) {
--rot: -1deg;
}
*:nth-child(4n+3) {
--rot: -2.4deg;
}
*:nth-child(4n+4) {
--rot: 1.5deg;
}
p {
--rot: -2deg;
}
#header {
--rot: 3deg;
}
a {
--rot: -4deg;
}
@keyframes misalign {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(var(--rot));
}
}
.list-pages-box, .list-pages-item {
transform: none !important;
}
.ohfuck {
color: black;
transform: none !important;
}
#page-content .ohfuck.ohfuck.ohfuck p {
line-height: var(--lh);
width: 100vw;
}
.final-solution {
padding: 10%;
padding-top: 100vh;
background-color: black;
color: white;
transform: none !important;
width: 120%;
margin-left: -10%;
}
.final-solution * {
transform: none !important;
}
:root:root:root #page-content .final-solution p {
width: 70%;
margin-bottom: 12vh;
}
.ohfuck > div {
margin-bottom: -20px;
}
.final-line {
}
#page-content .flicker1 {
animation-name: a-flicker-1;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes a-flicker-1 {
0% { font-size: 100%; }
90% { font-size: 100%; }
90.00001% { font-size: 0; }
100% { font-size: 0; }
}
#page-content .flicker2 {
animation-name: a-flicker-2;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
font-size: 0;
}
@keyframes a-flicker-2 {
0% { font-size: 0; }
90% { font-size: 0; }
90.00001% { font-size: 100%; }
100% { font-size: 100%; }
}
:root .licensebox .collapsible-block-link {
color: white;
}
.list-pages-box {
margin-bottom: -50px;
}
#page-info-break {
height: 50px;
margin-top: -20px;
}
#page-options-container, #page-info-break {
background-color: white;
}
#footer, #action-area, #page-info-break, #page-options-container {
filter: invert(1);
}
font-size: 100%; float: right;
--lh: 1.2;
--lh: 1;
--lh: 0.9;
--lh: 0.8;
--lh: 0.6; font-weight: bold;
--lh: 0.3; font-weight: bold;
--lh: 0.1; white-space: break-word; font-family: sans-serif; font-weight: 900;
text-align: center; margin: auto; font-size: 250%; margin-bottom: 40vw;
height: 100vh
display: flex; justify-content: center; margin-bottom: 100px;
y-ai-hero
y-ai-title
y-ai-subtitle
ohfuck
final-solution
final-line