Update content for html

1 files changed, 393 insertions, 44 deletions

diff --git a/style.css b/style.css
index 4d428726..9f6569b8 100644
--- a/style.css
+++ b/style.css
@@ -1,101 +1,450 @@
 @font-face {
     font-family: 'text';
-    src: url("./text.ttf") format("truetype");
+    src: url('./text.ttf') format('truetype');
 }
 
 @font-face {
     font-family: 'heading';
-    src: url("./heading.ttf") format("truetype");
+    src: url('./heading.ttf') format('truetype');
 }
 
 @font-face {
     font-family: 'code';
-    src: url("./code.ttf") format("truetype");
+    src: url('./code.ttf') format('truetype');
 }
 
 @font-face {
     font-family: 'handnotes';
-    src: url("./handnotes.ttf") format("truetype");
+    src: url('./handnotes.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'typewriter';
+    src: url('./typewriter.ttf') format('truetype');
+}
+
+:root {
+    --bg-void: #05030a;
+    --bg-deep: #0f0620;
+    --bg-electric: #1f0e3f;
+    --neon-cyan: #2ef7ff;
+    --neon-magenta: #ff2fa9;
+    --neon-lime: #8eff58;
+    --neon-gold: #ffd866;
+    --text-main: #d8fcff;
+    --text-muted: #9be9f4;
+    --panel-bg: rgba(6, 12, 31, 0.82);
+    --panel-border: rgba(46, 247, 255, 0.5);
+    --panel-shadow: 0 0 22px rgba(46, 247, 255, 0.24), 0 0 70px rgba(255, 47, 169, 0.14);
+    --rfx-scroll: 0px;
 }
 
 html {
-    background-color: #f0f0f0;
-    background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),
-                      linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);
-    background-size: 20px 20px;
-    background-position: 0 0, 10px 10px;
+    min-height: 100%;
+    background-color: var(--bg-void);
+    background-image:
+        radial-gradient(circle at 10% 18%, rgba(255, 47, 169, 0.3), rgba(255, 47, 169, 0) 32%),
+        radial-gradient(circle at 88% 12%, rgba(46, 247, 255, 0.26), rgba(46, 247, 255, 0) 30%),
+        radial-gradient(circle at 50% 120%, rgba(142, 255, 88, 0.12), rgba(142, 255, 88, 0) 45%),
+        linear-gradient(160deg, var(--bg-void), var(--bg-deep) 40%, var(--bg-electric));
+    background-size: cover;
+    color: var(--text-main);
 }
 
 body {
     font-family: text, sans-serif;
-    background: #ffffff;
-    max-width: 1200px;
-    padding: 20px;
-    margin: 20px auto;
-    border: 5px solid #dddddd;
-    border-radius: 15px;
+    color: var(--text-main);
+    max-width: 980px;
+    margin: 1.3rem auto;
+    padding: 1.3rem 1.6rem;
+    border: 1px solid var(--panel-border);
+    border-radius: 12px;
+    background: var(--panel-bg);
+    box-shadow: var(--panel-shadow);
     word-wrap: break-word;
+    overflow-x: hidden;
+    transform-origin: 50% 0%;
+    animation: body-boot 0.8s ease-out forwards;
+}
+
+body.rfx-boot {
+    opacity: 0.02;
+}
+
+html.rfx-ready body {
+    opacity: 1;
+}
+
+body > :not(#rfx-stars):not(.rfx-overlay-grid):not(.rfx-overlay-scanlines):not(.rfx-vignette) {
+    position: relative;
+    z-index: 2;
 }
 
-h1, h2, h3 {
+#rfx-stars,
+.rfx-overlay-grid,
+.rfx-overlay-scanlines,
+.rfx-vignette {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+#rfx-stars {
+    z-index: 0;
+    overflow: hidden;
+}
+
+#rfx-stars .star {
+    position: absolute;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 6px rgba(46, 247, 255, 0.75), 0 0 12px rgba(255, 47, 169, 0.28);
+    animation: twinkle var(--twinkle-speed, 3.8s) ease-in-out infinite;
+}
+
+.rfx-overlay-grid {
+    z-index: 0;
+    opacity: 0.24;
+    background-image:
+        linear-gradient(rgba(46, 247, 255, 0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(46, 247, 255, 0.1) 1px, transparent 1px),
+        linear-gradient(0deg, rgba(255, 47, 169, 0.15), rgba(255, 47, 169, 0));
+    background-size: 48px 48px, 48px 48px, 100% 100%;
+    background-position:
+        0 calc(var(--rfx-scroll) * -0.06),
+        calc(var(--rfx-scroll) * 0.03) 0,
+        0 0;
+}
+
+.rfx-overlay-scanlines {
+    z-index: 1;
+    opacity: 0.2;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0.06) 0px,
+        rgba(255, 255, 255, 0.02) 1px,
+        rgba(0, 0, 0, 0.2) 2px,
+        rgba(0, 0, 0, 0) 4px
+    );
+    mix-blend-mode: screen;
+    animation: scanline-shift 8s linear infinite;
+}
+
+.rfx-vignette {
+    z-index: 1;
+    background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.52) 100%);
+}
+
+h1,
+h2,
+h3 {
+    display: inline-block !important;
     font-family: heading, serif;
-    color: #6ca0dc;
+    font-weight: normal;
+    margin-top: 1.1rem;
+    margin-bottom: 0.2rem;
+    color: var(--neon-cyan);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    text-shadow:
+        0 0 4px rgba(46, 247, 255, 0.9),
+        0 0 11px rgba(46, 247, 255, 0.7),
+        0 0 22px rgba(255, 47, 169, 0.35);
+}
+
+h1 {
+    color: var(--neon-lime);
+}
+
+h1::after,
+h2::after,
+h3::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 2px;
+    margin-top: 2px;
+    background: linear-gradient(90deg, rgba(255, 47, 169, 0.05), rgba(46, 247, 255, 0.9), rgba(255, 47, 169, 0.05));
+    box-shadow: 0 0 7px rgba(46, 247, 255, 0.6);
+}
+
+h1.glitch,
+h2.glitch,
+h3.glitch {
+    position: relative;
+    animation: glitch-shake 0.22s steps(2, end) 1;
+}
+
+h1.glitch::before,
+h1.glitch::after,
+h2.glitch::before,
+h2.glitch::after,
+h3.glitch::before,
+h3.glitch::after {
+    content: attr(data-rfx-text);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+h1.glitch::before,
+h2.glitch::before,
+h3.glitch::before {
+    color: var(--neon-magenta);
+    transform: translate(-2px, 0);
+    opacity: 0.7;
+    clip-path: inset(0 0 48% 0);
+}
+
+h1.glitch::after,
+h2.glitch::after,
+h3.glitch::after {
+    color: var(--neon-cyan);
+    transform: translate(2px, 0);
+    opacity: 0.72;
+    clip-path: inset(58% 0 0 0);
+}
+
+p,
+span {
+    color: var(--text-main);
+    text-shadow: 0 0 7px rgba(46, 247, 255, 0.1);
+}
+
+p.header,
+p.footer {
+    font-family: handnotes, sans-serif;
+    letter-spacing: 0.04em;
+    color: var(--text-muted);
 }
 
 a {
-    font-family: code, monospace;
+    color: var(--neon-cyan);
     text-decoration: none;
-    color: #8e44ad;
-    padding: 0 0 0 0;
+    transition: color 0.18s ease-in-out, text-shadow 0.18s ease-in-out, transform 0.18s ease-in-out;
 }
 
 a:hover {
-    text-decoration: underline;
+    color: var(--neon-gold);
+    text-shadow: 0 0 8px rgba(255, 216, 102, 0.8), 0 0 18px rgba(255, 47, 169, 0.45);
+    transform: translateY(-1px);
+}
+
+a.textlink {
+    display: inline-block;
+    margin: 0.05rem 0;
 }
 
 a.textlink:before {
-    content: "⇒ ";
+    content: '>>';
+    color: var(--neon-magenta);
+    letter-spacing: -0.05em;
+    margin-right: 0.45rem;
+    text-shadow: 0 0 6px rgba(255, 47, 169, 0.8);
+}
+
+a.textlink.link-pulse {
+    animation: link-pulse 0.3s ease-out 1;
+}
+
+ul {
+    list-style: none;
+    padding-left: 0.7rem;
+    margin: 0.7rem 0;
+}
+
+li {
+    margin: 0.28rem 0 0.28rem 1rem;
+    color: var(--text-main);
+    text-shadow: 0 0 5px rgba(46, 247, 255, 0.26);
+}
+
+li:before {
+    content: '::';
+    color: var(--neon-lime);
+    margin-right: 0.45rem;
+    text-shadow: 0 0 6px rgba(142, 255, 88, 0.75);
 }
 
 .quote {
+    color: #a9f5ff;
     font-style: italic;
+    text-shadow: 0 0 8px rgba(46, 247, 255, 0.45);
 }
 
 .quote:before {
-    content: "« ";
-    padding-left: 2px;
+    content: '[';
+    color: var(--neon-magenta);
 }
 
 .quote:after {
-    content: " »";
-    padding-right: 2px;
+    content: ']';
+    color: var(--neon-magenta);
 }
 
-ul {
-    list-style: none;
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
+pre {
+    font-family: code, monospace;
+    font-size: 0.95rem;
+    background: linear-gradient(180deg, rgba(5, 11, 30, 0.9), rgba(10, 17, 44, 0.92));
+    border: 1px solid rgba(46, 247, 255, 0.4);
+    border-left: 4px solid var(--neon-magenta);
+    color: #9afcff;
+    padding: 0.9rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    box-shadow: inset 0 0 20px rgba(46, 247, 255, 0.12), 0 0 16px rgba(255, 47, 169, 0.18);
 }
 
-li:before {
-    content: "★";
-    padding-right: 5px;
-    color: #9b59b6;
+span.inlinecode {
+    font-family: code, monospace;
+    color: #a7f9ff;
+    border: 1px solid rgba(46, 247, 255, 0.45);
+    border-radius: 4px;
+    background: rgba(9, 20, 43, 0.88);
+    padding: 0.07rem 0.26rem;
+    box-shadow: inset 0 0 8px rgba(46, 247, 255, 0.2), 0 0 8px rgba(46, 247, 255, 0.13);
 }
 
 img {
-    max-width: 90%;
+    max-width: 92%;
+    display: block;
+    margin: 1rem auto;
+    border: 1px solid rgba(46, 247, 255, 0.45);
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(46, 247, 255, 0.28), 0 0 30px rgba(255, 47, 169, 0.18);
+    filter: saturate(1.12) contrast(1.08);
 }
 
-pre {
-    font-family: code, monospace;
-    padding: 20px;
-    border: 1px solid #dddddd;
-    border-radius: 15px;
+.rfx-reveal {
+    opacity: 0;
+    transform: translateY(14px) scale(0.99);
+    animation: reveal-up 0.78s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
+    animation-delay: var(--rfx-delay, 0ms);
 }
 
-span.inlinecode {
-    font-family: code, monospace;
-    border: 1px solid #999999;
-    border-radius: 2px;
+.rfx-cursor-burst {
+    position: fixed;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 1px solid var(--neon-cyan);
+    box-shadow: 0 0 8px rgba(46, 247, 255, 0.95), 0 0 16px rgba(255, 47, 169, 0.6);
+    pointer-events: none;
+    z-index: 4;
+    transform: translate(-50%, -50%);
+    animation: cursor-burst 0.45s ease-out forwards;
+}
+
+@keyframes body-boot {
+    0% {
+        transform: translateY(10px) scale(0.98);
+        filter: blur(3px);
+    }
+    100% {
+        transform: translateY(0) scale(1);
+        filter: blur(0);
+    }
+}
+
+@keyframes twinkle {
+    0%,
+    100% {
+        opacity: 0.18;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.92;
+        transform: scale(1.28);
+    }
+}
+
+@keyframes scanline-shift {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(6px);
+    }
+}
+
+@keyframes glitch-shake {
+    0% {
+        transform: translate(0, 0);
+    }
+    25% {
+        transform: translate(-1px, 0);
+    }
+    50% {
+        transform: translate(1px, 0);
+    }
+    75% {
+        transform: translate(-1px, 0);
+    }
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+@keyframes reveal-up {
+    0% {
+        opacity: 0;
+        transform: translateY(14px) scale(0.99);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes cursor-burst {
+    0% {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(0.5);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(2.2);
+    }
+}
+
+@keyframes link-pulse {
+    0% {
+        text-shadow: 0 0 0 rgba(255, 216, 102, 0);
+    }
+    100% {
+        text-shadow: 0 0 14px rgba(255, 216, 102, 0.8);
+    }
+}
+
+@media (max-width: 800px) {
+    body {
+        margin: 0.4rem;
+        padding: 0.9rem;
+        border-radius: 9px;
+    }
+
+    h1,
+    h2,
+    h3 {
+        letter-spacing: 0.07em;
+        text-wrap: balance;
+    }
+}
+
+html.reduce-motion *,
+html.reduce-motion *::before,
+html.reduce-motion *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0ms !important;
+}
+
+html.reduce-motion #rfx-stars .star:nth-child(n + 32) {
+    display: none;
 }