*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
height: 100%;
font-family: 'Courier New', Courier, monospace;
color: white;
background: black;
overflow-x: hidden;
}
body.loaded { overflow-y: auto; }
.boot-screen {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background: black;
color: #0f0;
display: flex; align-items: center; justify-content: center;
font-size: 18px; z-index: 9999;
animation: flicker 2s infinite;
}
@keyframes flicker {
0%,100% {opacity:1;} 50% {opacity:0.5;}
}
body {
display: flex; flex-direction: column;
position: relative; min-height: 100vh;
padding: 40px 16px;
background-image:
radial-gradient(circle at 25% 30%, rgba(40, 180, 40, 0.25), transparent 70%),
radial-gradient(circle at 75% 60%, rgba(140, 0, 180, 0.25), transparent 70%),
linear-gradient(135deg, #010101, #000000);
background-size: 300% 300%, 300% 300%, 200% 200%;
background-blend-mode: screen, screen, normal;
animation: toxicFlow 20s ease-in-out infinite;
}
@keyframes toxicFlow {
0% {background-position:0% 0%,100% 100%,50% 50%;}
50% {background-position:100% 50%,0% 100%,60% 40%;}
100% {background-position:0% 0%,100% 100%,40% 60%;}
}
.reflection-overlay {
position: fixed; top: 0; left: 0;
width: 100%; height: 300%;
pointer-events: none;
background:
radial-gradient(ellipse at top center, rgba(255,255,255,0.05), transparent 80%),
linear-gradient(120deg, rgba(255,255,255,0.03) 10%, rgba(255,255,255,0.01) 60%, transparent 90%);
mix-blend-mode: screen; z-index:2;
transform: translateY(0);
}
.terminal {
max-width: 1000px; margin: 60px auto;
padding: 0 16px; white-space: pre-wrap;
/* UPDATED a-channel from 1 to 0.5 */
text-shadow: 1px 0 rgba(255, 0, 0, 0.5), -1px 0 rgba(0, 255, 255, 0.5);
filter: contrast(1.2) brightness(1.05);
position: relative; z-index:3;
display: none;
}
body.loaded .terminal { display: block; }
.line {
opacity: 0;
animation: fadeLine 0.3s ease-in forwards;
}
@keyframes fadeLine { to { opacity: 1; } }
.prompt { color: #0f0; }
.cursor {
display:inline-block; width:10px; height:18px;
background-color: white; margin-left:4px;
animation: blink 1s step-start infinite;
}
@keyframes blink { 50% { background-color: transparent; } }
.lineskip { margin-bottom: 12px; }
pre.ascii-art {
font-family: monospace;
color: #0f0;
margin-bottom: 16px;
line-height: 1.1;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 14px;
text-align: center;
}
.glitch {
animation: glitch-anim 11.5s infinite;
}
/* UPDATED a-channel from 1 to 0.5 */
@keyframes glitch-anim {
0%, 10.9% { text-shadow: none; transform: none; }
11.1% { text-shadow: 2px 0 rgba(255, 0, 0, 0.5), -3px 0 rgba(0, 255, 255, 0.5); transform: translate(-1px, 1px) scale(1.01); }
11.4% { text-shadow: -3px 0 rgba(255, 0, 0, 0.5), 4px 0 rgba(0, 255, 255, 0.5); transform: translate(2px, -2px) scale(0.99); }
12.0% { text-shadow: 5px 0 rgba(255, 0, 0, 0.5), -4px 0 rgba(0, 255, 255, 0.5); transform: translate(-2px, 1px) scale(1.02); }
12.4% { text-shadow: -2px 0 rgba(255, 0, 0, 0.5), 3px 0 rgba(0, 255, 255, 0.5); transform: translate(1px, -2px) scale(1.0); }
12.5%, 100% { text-shadow: none; transform: none; }
}
a { color: #0f0; text-decoration: none; }
a:hover { text-decoration: underline; }
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 12px;
}
.section-heading {
font-size: 15px;
}
.text-center {
text-align: center;
}
.read-more-btn {
background-color: transparent;
border: 1px solid #0f0;
color: #0f0;
padding: 5px 10px;
margin-top: 8px;
cursor: pointer;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
display: inline-block;
}
.read-more-btn:hover {
background-color: rgba(0, 255, 0, 0.1);
}
.ascii-art-container {
display: grid;
}
.ascii-art-container > .ascii-art {
grid-area: 1 / 1;
margin: 0;
}
.glitch .ascii-art-2 {
opacity: 0;
}
.glitch .ascii-art-1 {
animation: hide-art 11.5s infinite;
}
.glitch .ascii-art-2 {
animation: show-art 11.5s infinite;
}
@keyframes hide-art {
0%, 11.0% { opacity: 1; }
11.1%, 12.4% { opacity: 0; }
12.5%, 100% { opacity: 1; }
}
@keyframes show-art {
0%, 11.0% { opacity: 0; }
11.1%, 12.4% { opacity: 1; }
12.5%, 100% { opacity: 0; }
}
.red-glitch {
color: #ff0000;
}
@media (max-width: 768px) {
body {
padding: 24px 16px;
}
.terminal {
font-size: 14px;
}
.cursor {
height: 16px;
}
.grid-2col {
grid-template-columns: 1fr;
gap: 24px;
}
pre.ascii-art {
font-size: 7px;
}
}
[ BOOTING ISCARIOT SYSTEM... ]