Cyberpunk Theme for PQC Cheatshee
· 1 year ago
bbfe1f288a3f59f3497c3153abe05876754ca390
Parent:
771766c4f
1 file changed +325 −349
- post-quantum-cryptography.html +325 −349
Diff
--- a/post-quantum-cryptography.html +++ b/post-quantum-cryptography.html @@ -10,493 +10,469 @@ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + <style> - /* Inspired by Oswald, Montserrat, Inter */ - @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Montserrat:wght@400;600;700&family=Inter:wght@400;600&display=swap'); - + /* Cyberpunk Theme for PQC Cheatsheet */ + @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap'); + :root { - --font-display: 'Oswald', sans-serif; - --font-heading: 'Montserrat', sans-serif; - --font-body: 'Inter', sans-serif; - - --primary-theme-color: #0A2463; - /* Quantum Blue */ - --accent-color-1: #FF8C00; - /* Bright Orange */ - --accent-color-2: #00C9A7; - /* Electric Teal */ - --text-color-light: #f8f9fa; - --text-color-dark: #212529; - --card-bg: #ffffff; - --page-bg: #f0f2f5; - --border-color: #dee2e6; - - /* Section Specific Themes */ - --section-1-color: #4B0082; - /* Indigo */ - --section-2-color: #228B22; - /* Forest Green */ - --section-3-color: #DC143C; - /* Crimson Red */ - --section-4-color: #708090; - /* Slate Gray */ - --section-5-color: #D92027; - /* Fiery Red */ - --section-6-color: #4169E1; - /* Royal Blue */ - --section-7-color: #9932CC; - /* Dark Orchid */ - --section-8-color: #DAA520; - /* Goldenrod */ - --section-9-color: #4682B4; - /* Steel Blue */ - --section-10-color: #008080; - /* Dark Teal */ - } - + --font-display: 'Orbitron', sans-serif; /* Cyberpunk Display Font */ + --font-heading: 'Rajdhani', sans-serif; /* Techy Heading Font */ + --font-body: 'Rajdhani', sans-serif; /* Techy Body Font */ + --font-mono: 'Share Tech Mono', monospace; /* Monospaced for code/terms */ + + /* Cyberpunk Color Palette - Not too dark base */ + --cyber-bg-primary: #1A1E2C; /* Deep Indigo/Near Black */ + --cyber-bg-secondary: #24293A; /* Darker Slate Blue */ + --cyber-surface: #2E3448; /* Card Background */ + + --cyber-text-primary: #E5E9F0; /* Light Grey/Off-White */ + --cyber-text-secondary: #A3ABB2; /* Muted Grey */ + --cyber-text-heading: #FFFFFF; /* Pure White for main headings */ + + --cyber-accent-primary: #00FFFF; /* Neon Cyan */ + --cyber-accent-secondary: #FF00FF; /* Neon Magenta */ + --cyber-accent-warning: #F7DC6F; /* Neon Yellow */ + --cyber-accent-critical: #FF4136; /* Neon Red */ + + --cyber-border-color: #4C566A; /* Muted Blue-Grey Border */ + --cyber-border-glow: rgba(0, 255, 255, 0.5); /* Cyan Glow */ + + /* Section Specific Accents (using main neons, differentiated by icon/subtle hints) */ + /* We'll use the primary/secondary accents more strategically than a unique color per section */ + --section-1-accent: var(--cyber-accent-primary); + --section-2-accent: #39FF14; /* Neon Lime Green */ + --section-3-accent: var(--cyber-accent-secondary); + --section-4-accent: #7DF9FF; /* Lighter Cyan */ + --section-5-accent: var(--cyber-accent-warning); + --section-6-accent: #00BFFF; /* Deep Sky Blue */ + --section-7-accent: #DA70D6; /* Orchid */ + --section-8-accent: var(--cyber-accent-secondary); + --section-9-accent: var(--cyber-accent-primary); + --section-10-accent: #F7DC6F; /* Neon Yellow again */ + } + body { font-family: var(--font-body); - background-color: var(--page-bg); - color: var(--text-color-dark); + background-color: var(--cyber-bg-primary); + color: var(--cyber-text-primary); line-height: 1.7; - } - + padding-top: 1rem; /* Add some top padding */ + /* Optional: Subtle grid background */ + background-image: + linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); + background-size: 30px 30px; + } + .hero-header { - background: linear-gradient(135deg, var(--primary-theme-color), #1a3f8a); - /* Gradient of Quantum Blue */ - color: var(--text-color-light); - padding: 4rem 1.5rem; + background: var(--cyber-bg-secondary); + color: var(--cyber-text-heading); + padding: 3rem 1.5rem 3rem; text-align: center; margin-bottom: 3rem; - border-bottom: 5px solid var(--accent-color-2); + border-bottom: 3px solid var(--cyber-accent-primary); + box-shadow: 0 0 25px rgba(0, 255, 255, 0.1); + position: relative; + overflow: hidden; } - + .hero-header::before { /* Glitchy line effect */ + content: ''; + position: absolute; + left: 0; + top: 50%; + width: 100%; + height: 2px; + background: var(--cyber-accent-primary); + opacity: 0.3; + animation: glitch-line 5s infinite steps(10); + } + @keyframes glitch-line { + 0%, 100% { transform: translateY(-50%) translateX(0); } + 10% { transform: translateY(-50%) translateX(-5px); } + 20% { transform: translateY(-50%) translateX(5px); } + 30% { transform: translateY(-50%) translateX(-3px); opacity: 0.1;} + 40% { transform: translateY(-50%) translateX(3px); opacity: 0.4;} + 50% { transform: translateY(-50%) translateX(0); opacity: 0.2;} + } + + .hero-header h1 { font-family: var(--font-display); - font-size: 3.8rem; - margin-bottom: 0.75rem; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + font-size: 3.5rem; /* Adjusted for Orbitron */ + margin-bottom: 1rem; + color: var(--cyber-text-heading); + text-shadow: 0 0 10px var(--cyber-accent-primary), 0 0 20px var(--cyber-accent-primary), 0 0 5px #fff; + letter-spacing: 1px; } - + .hero-header h1 .bi { - font-size: 0.8em; - /* Relative to h1 */ + font-size: 0.9em; vertical-align: -0.05em; - /* Fine-tune alignment */ + margin-right: 0.5rem; + filter: drop-shadow(0 0 5px var(--cyber-accent-primary)); } - + .hero-header .lead { font-family: var(--font-heading); - font-size: 1.3rem; + font-weight: 600; + font-size: 1.25rem; max-width: 800px; margin: 0 auto 1rem auto; + color: var(--cyber-text-secondary); opacity: 0.9; } - + .main-section { - background-color: #fff; - padding: 2rem; - margin-bottom: 2.5rem; - border-radius: 8px; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); - border-top: 5px solid var(--primary-theme-color); - /* Default, will be overridden */ + background-color: transparent; /* Sections blend with body */ + padding: 1rem 0; /* Let cards define padding */ + margin-bottom: 3rem; + border-top: none; /* Remove old border */ + border-radius: 0; + box-shadow: none; + } + + .main-section-header { + margin-bottom: 1.5rem; + padding-bottom: 0.75rem; + border-bottom: 2px solid var(--cyber-border-color); + position: relative; } - + .main-section-header::after { /* Neon accent line under header */ + content: ''; + position: absolute; + left: 0; + bottom: -3px; /* Position just below the border */ + width: 100px; /* Width of the accent line */ + height: 3px; + /* background-color assigned by specific section themes */ + } + + .main-section-header h2 { - font-family: var(--font-display); - font-size: 2.6rem; - margin-bottom: 0.5rem; - color: var(--primary-theme-color); - /* Default, overridden */ + font-family: var(--font-heading); + font-weight: 700; + font-size: 2.2rem; + /* Color assigned by specific section themes */ + text-transform: uppercase; + letter-spacing: 1px; } - + .main-section-header h2 .bi { - margin-right: 0.75rem; + margin-right: 0.8rem; vertical-align: -0.1em; + filter: drop-shadow(0 0 3px var(--cyber-accent-secondary)); } - + .main-section-header .btn { - font-family: var(--font-heading); - font-weight: 600; - } - + font-family: var(--font-mono); + font-weight: normal; + text-transform: uppercase; + border-radius: 2px; /* Sharper edges */ + padding: 0.5rem 1rem; + font-size: 0.85rem; + transition: all 0.2s ease; + box-shadow: 0 0 5px rgba(0,0,0,0.3); + } + .main-section-header .btn-expand-all { - background-color: var(--accent-color-2); - border-color: var(--accent-color-2); - color: var(--text-color-light); + background-color: transparent; + border: 1px solid var(--cyber-accent-primary); + color: var(--cyber-accent-primary); } - .main-section-header .btn-expand-all:hover { - background-color: #00a085; - border-color: #00a085; + background-color: var(--cyber-accent-primary); + color: var(--cyber-bg-primary); + box-shadow: 0 0 15px var(--cyber-accent-primary); } - + .main-section-header .btn-collapse-all { - background-color: var(--accent-color-1); - border-color: var(--accent-color-1); - color: var(--text-color-light); + background-color: transparent; + border: 1px solid var(--cyber-accent-secondary); + color: var(--cyber-accent-secondary); } - .main-section-header .btn-collapse-all:hover { - background-color: #d97500; - border-color: #d97500; + background-color: var(--cyber-accent-secondary); + color: var(--cyber-bg-primary); + box-shadow: 0 0 15px var(--cyber-accent-secondary); } - - + /* Section specific themes */ - .introduction-theme { - border-top-color: var(--section-1-color); - } - - .introduction-theme .main-section-header h2 { - color: var(--section-1-color); - } - - .introduction-theme .info-card .card-header { - background-color: var(--section-1-color); - } - - .foundations-theme { - border-top-color: var(--section-2-color); - } - - .foundations-theme .main-section-header h2 { - color: var(--section-2-color); - } - - .foundations-theme .info-card .card-header { - background-color: var(--section-2-color); - } - - .algorithms-theme { - border-top-color: var(--section-3-color); - } - - .algorithms-theme .main-section-header h2 { - color: var(--section-3-color); - } - - .algorithms-theme .info-card .card-header { - background-color: var(--section-3-color); - } - - .hardware-theme { - border-top-color: var(--section-4-color); - } - - .hardware-theme .main-section-header h2 { - color: var(--section-4-color); - } - - .hardware-theme .info-card .card-header { - background-color: var(--section-4-color); - } - - .exploits-theme { - border-top-color: var(--section-5-color); - } - - .exploits-theme .main-section-header h2 { - color: var(--section-5-color); - } - - .exploits-theme .info-card .card-header { - background-color: var(--section-5-color); - } - - .migration-theme { - border-top-color: var(--section-6-color); - } - - .migration-theme .main-section-header h2 { - color: var(--section-6-color); - } - - .migration-theme .info-card .card-header { - background-color: var(--section-6-color); - } - - .geopolitics-theme { - border-top-color: var(--section-7-color); - } - - .geopolitics-theme .main-section-header h2 { - color: var(--section-7-color); - } - - .geopolitics-theme .info-card .card-header { - background-color: var(--section-7-color); - } - - .applications-theme { - border-top-color: var(--section-8-color); - } - - .applications-theme .main-section-header h2 { - color: var(--section-8-color); - } - - .applications-theme .info-card .card-header { - background-color: var(--section-8-color); - } - - - .bitcoin-pqc-theme { - border-top-color: var(--section-9-color); - } - - .bitcoin-pqc-theme .main-section-header h2 { - color: var(--section-9-color); - } - - .bitcoin-pqc-theme .info-card .card-header { - background-color: var(--section-9-color); - } - - .future-theme { - border-top-color: var(--section-10-color); - } - - .future-theme .main-section-header h2 { - color: var(--section-10-color); - } - - .future-theme .info-card .card-header { - background-color: var(--section-10-color); - } - - + .introduction-theme .main-section-header h2 { color: var(--section-1-accent); } + .introduction-theme .main-section-header::after { background-color: var(--section-1-accent); } + .introduction-theme .info-card .card-header { border-top: 2px solid var(--section-1-accent); } + .introduction-theme .info-card .card-header h5 .bi { color: var(--section-1-accent); } + + .foundations-theme .main-section-header h2 { color: var(--section-2-accent); } + .foundations-theme .main-section-header::after { background-color: var(--section-2-accent); } + .foundations-theme .info-card .card-header { border-top: 2px solid var(--section-2-accent); } + .foundations-theme .info-card .card-header h5 .bi { color: var(--section-2-accent); } + + .algorithms-theme .main-section-header h2 { color: var(--section-3-accent); } + .algorithms-theme .main-section-header::after { background-color: var(--section-3-accent); } + .algorithms-theme .info-card .card-header { border-top: 2px solid var(--section-3-accent); } + .algorithms-theme .info-card .card-header h5 .bi { color: var(--section-3-accent); } + + .hardware-theme .main-section-header h2 { color: var(--section-4-accent); } + .hardware-theme .main-section-header::after { background-color: var(--section-4-accent); } + .hardware-theme .info-card .card-header { border-top: 2px solid var(--section-4-accent); } + .hardware-theme .info-card .card-header h5 .bi { color: var(--section-4-accent); } + + .exploits-theme .main-section-header h2 { color: var(--section-5-accent); } + .exploits-theme .main-section-header::after { background-color: var(--section-5-accent); } + .exploits-theme .info-card .card-header { border-top: 2px solid var(--section-5-accent); } + .exploits-theme .info-card .card-header h5 .bi { color: var(--section-5-accent); } + + .migration-theme .main-section-header h2 { color: var(--section-6-accent); } + .migration-theme .main-section-header::after { background-color: var(--section-6-accent); } + .migration-theme .info-card .card-header { border-top: 2px solid var(--section-6-accent); } + .migration-theme .info-card .card-header h5 .bi { color: var(--section-6-accent); } + + .geopolitics-theme .main-section-header h2 { color: var(--section-7-accent); } + .geopolitics-theme .main-section-header::after { background-color: var(--section-7-accent); } + .geopolitics-theme .info-card .card-header { border-top: 2px solid var(--section-7-accent); } + .geopolitics-theme .info-card .card-header h5 .bi { color: var(--section-7-accent); } + + .applications-theme .main-section-header h2 { color: var(--section-8-accent); } + .applications-theme .main-section-header::after { background-color: var(--section-8-accent); } + .applications-theme .info-card .card-header { border-top: 2px solid var(--section-8-accent); } + .applications-theme .info-card .card-header h5 .bi { color: var(--section-8-accent); } + + .bitcoin-pqc-theme .main-section-header h2 { color: var(--section-9-accent); } + .bitcoin-pqc-theme .main-section-header::after { background-color: var(--section-9-accent); } + .bitcoin-pqc-theme .info-card .card-header { border-top: 2px solid var(--section-9-accent); } + .bitcoin-pqc-theme .info-card .card-header h5 .bi { color: var(--section-9-accent); } + + .future-theme .main-section-header h2 { color: var(--section-10-accent); } + .future-theme .main-section-header::after { background-color: var(--section-10-accent); } + .future-theme .info-card .card-header { border-top: 2px solid var(--section-10-accent); } + .future-theme .info-card .card-header h5 .bi { color: var(--section-10-accent); } + + .info-card { - border: 1px solid var(--border-color); - border-radius: 0.5rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + background-color: var(--cyber-surface); + border: 1px solid var(--cyber-border-color); + border-radius: 4px; /* Sharper edges */ + box-shadow: 0 0 10px rgba(0,0,0,0.2), inset 0 0 3px rgba(0, 255, 255, 0.05); /* Inset glow attempt */ height: 100%; - /* For consistent height in rows */ display: flex; flex-direction: column; + transition: all 0.3s ease; } - - .info-card .card-header { - /* Background color set by section theme */ - color: var(--text-color-light); - padding: 0.75rem 1.25rem; - border-bottom: 1px solid var(--border-color); - border-top-left-radius: calc(0.5rem - 1px); - border-top-right-radius: calc(0.5rem - 1px); + .info-card:hover { + border-color: var(--cyber-accent-primary); + box-shadow: 0 0 15px var(--cyber-border-glow), 0 0 5px var(--cyber-border-glow); + transform: translateY(-3px); } - + + .info-card .card-header { + background-color: transparent; /* Header transparent against card bg */ + color: var(--cyber-text-heading); + padding: 0.8rem 1rem; + border-bottom: 1px dashed var(--cyber-border-color); /* Dashed line */ + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .info-card .card-header h5 { - font-family: var(--font-heading); - font-size: 1.2rem; - font-weight: 600; + font-family: var(--font-mono); + font-size: 1.1rem; + font-weight: normal; /* Mono fonts often look better normal weight */ + text-transform: uppercase; margin-bottom: 0; + /* Color comes from section theme via .bi rule */ } - + .info-card .card-header h5 .bi { - margin-right: 0.5rem; + margin-right: 0.6rem; vertical-align: -0.1em; + /* Color set by specific section theme */ + text-shadow: 0 0 5px currentColor; /* Neon glow for icon */ } - + .info-card .card-body { - padding: 1.25rem; + padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; } - + .info-card p.summary { - font-size: 0.95rem; - color: #555; + font-size: 0.9rem; + color: var(--cyber-text-secondary); margin-bottom: 1rem; flex-grow: 1; } - + .details-toggle { - background-color: var(--accent-color-1); - border-color: var(--accent-color-1); - color: var(--text-color-light); - font-family: var(--font-heading); - font-weight: 600; + background-color: transparent; + border: 1px solid var(--cyber-accent-secondary); + color: var(--cyber-accent-secondary); + font-family: var(--font-mono); + text-transform: uppercase; padding: 0.4rem 0.8rem; - font-size: 0.9rem; + font-size: 0.8rem; margin-top: auto; - /* Pushes button to bottom */ + border-radius: 2px; + transition: all 0.2s ease; } - + .details-toggle:hover { - background-color: #d97500; - border-color: #d97500; + background-color: var(--cyber-accent-secondary); + color: var(--cyber-bg-primary); + box-shadow: 0 0 10px var(--cyber-accent-secondary); } - + .details-toggle .bi { transition: transform 0.25s ease-in-out; } - .details-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } - + .collapse-content { - padding: 1.25rem; - background-color: #fbfdff; - /* Slightly off-white for content area */ - border-top: 1px solid var(--border-color); - border-bottom-left-radius: calc(0.5rem - 1px); - border-bottom-right-radius: calc(0.5rem - 1px); + padding: 1rem; + background-color: rgba(36, 41, 58, 0.5); /* Semi-transparent darker background */ + border-top: 1px solid var(--cyber-border-color); + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + font-size: 0.9rem; } - + .collapse-content h6 { font-family: var(--font-heading); - font-weight: 700; - color: var(--primary-theme-color); + font-weight: 600; + color: var(--cyber-accent-primary); margin-top: 1rem; margin-bottom: 0.5rem; - font-size: 1.05rem; + font-size: 1rem; + text-transform: uppercase; } - + .collapse-content ul, .collapse-content ol { padding-left: 1.2rem; } - + .collapse-content ul li::marker { + color: var(--cyber-accent-primary); /* Neon bullet points */ + } .collapse-content li { - margin-bottom: 0.4rem; + margin-bottom: 0.5rem; + color: var(--cyber-text-secondary); } - + .collapse-content li strong { + color: var(--cyber-text-primary); + } + + .term { - background-color: #e9ecef; + background-color: rgba(0, 255, 255, 0.1); /* Faint cyan bg */ padding: 0.2em 0.4em; - border-radius: 3px; - font-weight: 600; - color: var(--primary-theme-color); + border-radius: 2px; + font-family: var(--font-mono); + color: var(--cyber-accent-primary); cursor: help; + border: 1px dashed rgba(0, 255, 255, 0.3); } - + .styled-list { list-style: none; padding-left: 0; } - .styled-list li { padding-left: 2em; position: relative; margin-bottom: 0.5em; } - .styled-list li::before { - content: "\F28A"; - /* bi-check2-circle */ - font-family: "bootstrap-icons"; - color: var(--accent-color-2); + content: "»"; /* Using a text character for cyberpunk feel */ + font-family: var(--font-mono); + color: var(--cyber-accent-primary); position: absolute; left: 0; - top: 1px; - font-size: 1.1em; + top: -2px; /* Adjust alignment */ + font-size: 1.2em; + text-shadow: 0 0 5px var(--cyber-accent-primary); } - + /* Callout Box Styles */ .callout { padding: 1rem 1.25rem; margin: 1.5rem 0; - border-left-width: 5px; - border-left-style: solid; - border-radius: 0.3rem; + border: 1px solid; /* Border color set by type */ + border-left-width: 4px; + border-radius: 3px; position: relative; + background-color: rgba(46, 52, 72, 0.7); /* Semi-transparent surface */ + box-shadow: inset 0 0 10px rgba(0,0,0,0.3); } - .callout h5 { font-family: var(--font-heading); font-weight: 700; margin-top: 0; - margin-bottom: 0.5rem; + margin-bottom: 0.75rem; display: flex; align-items: center; - font-size: 1.1rem; + font-size: 1.05rem; + text-transform: uppercase; + letter-spacing: 0.5px; } - .callout h5 .bi { - font-size: 1.2em; - margin-right: 0.5em; + font-size: 1.3em; + margin-right: 0.6em; + text-shadow: 0 0 5px currentColor; } - + .callout-security-alert { - border-left-color: var(--section-5-color); - /* Fiery Red */ - background-color: #ffebee; - /* Light Red */ - color: #c62828; - /* Dark Red */ + border-color: var(--cyber-accent-critical); + color: #FFCCCB; /* Light red text */ } - - .callout-security-alert h5 { - color: var(--section-5-color); - } - + .callout-security-alert h5 { color: var(--cyber-accent-critical); } + .callout-deep-dive { - border-left-color: var(--section-2-color); - /* Forest Green */ - background-color: #e8f5e9; - /* Light Green */ - color: #2e7d32; - /* Dark Green */ + border-color: var(--cyber-accent-primary); + color: #D1F2EB; /* Light cyan text */ } - - .callout-deep-dive h5 { - color: var(--section-2-color); - } - + .callout-deep-dive h5 { color: var(--cyber-accent-primary); } + .callout-future-watch { - border-left-color: var(--section-9-color); - /* Steel Blue */ - background-color: #e3f2fd; - /* Light Blue */ - color: #1565c0; - /* Dark Blue */ - } - - .callout-future-watch h5 { - color: var(--section-9-color); + border-color: var(--cyber-accent-secondary); + color: #FADADD; /* Light magenta text */ } - + .callout-future-watch h5 { color: var(--cyber-accent-secondary); } + .callout-key-definition { - border-left-color: var(--section-4-color); - /* Slate Gray */ - background-color: #f5f5f5; - /* Light Gray */ - color: #424242; - /* Dark Gray */ - } - - .callout-key-definition h5 { - color: var(--section-4-color); + border-color: var(--cyber-accent-warning); + color: #FEF9E7; /* Light yellow text */ } - - + .callout-key-definition h5 { color: var(--cyber-accent-warning); } + footer { - background-color: var(--primary-theme-color); - color: #bdc3c7; - /* Lighter grey for footer text on dark bg */ - padding: 3rem 1.5rem; + background-color: var(--cyber-bg-secondary); + color: var(--cyber-text-secondary); + padding: 2.5rem 1.5rem; text-align: center; margin-top: 3rem; + border-top: 2px solid var(--cyber-accent-primary); + box-shadow: 0 -5px 15px rgba(0, 255, 255, 0.05); } - footer p { margin-bottom: 0.25rem; + font-family: var(--font-mono); } - footer a { - color: var(--accent-color-2); + color: var(--cyber-accent-primary); text-decoration: none; - font-weight: 600; + font-weight: normal; + transition: color 0.2s ease, text-shadow 0.2s ease; } - footer a:hover { - color: var(--text-color-light); + color: var(--cyber-text-heading); + text-shadow: 0 0 8px var(--cyber-accent-primary); text-decoration: underline; } </style> + </head> <body>