diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d64e540
--- /dev/null
+++ b/index.html
@@ -0,0 +1,929 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Emilia Marigold</title>
+    <style>
+        /* --- CSS STYLES --- */
+
+        :root
+        {
+            /* Your Specific Palette */
+            --color-home: #ff6b6b;
+            --color-projects: #ffd700;
+            --color-contact: #6bce6b;
+            --color-coolsites: #6cbfff;
+            --color-blog: #d4a5ff;
+
+            /* Base Light Theme Colors */
+            --bg-body: #d4d4d4;
+            --bg-content: #e5eaf5;
+            --text-main: #333333;
+            --text-secondary: #666666;
+            --nav-bg: #e5eaf5;
+            --nav-shadow: 0 4px 15px rgba(0,0,0,0.15);
+
+            /* Rainbow Animation Settings */
+            --rainbow-speed: 10s;
+        }
+
+        [data-theme="dark"]
+        {
+            --bg-body: #1a1a1a;
+            --bg-content: #2d2d2d;
+            --text-main: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --nav-bg: #252525;
+            --nav-shadow: 0 4px 15px rgba(0,0,0,0.5);
+
+            /* Updated Palette for Dark Mode */
+            --color-home: #ff6b6b;
+            --color-projects: #ffd700;
+            --color-contact: #6bce6b;
+            --color-coolsites: #6cbfff;
+            --color-blog: #d4a5ff;
+        }
+
+        *
+        {
+            box-sizing: border-box;
+            transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg-body);
+            color: var(--text-main);
+            line-height: 1.6;
+            background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/5d/Marigold_Field_20020400_11.jpg');
+        }
+
+        /* --- NAVIGATION STYLES (Reverted to Single Colors, Added Rainbow Border) --- */
+        .navbar
+        {
+            position: fixed;
+            top: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1000;
+            display: flex;
+            outline: none;
+            align-items: center;
+            gap: 10px;
+            padding: 15px 25px;
+            background-color: var(--nav-bg);
+            box-shadow: var(--nav-shadow);
+            transition: all 0.4s ease;
+            white-space: nowrap;
+        }
+
+        .nav-btn
+        {
+            text-decoration: none;
+            color: inherit;
+            padding: 10px 25px;
+            font-weight: 600;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            border: 2px solid transparent; /* Default: transparent border */
+            cursor: pointer;
+            position: relative;
+        }
+
+        /* Base colors for buttons (Single Colors on Hover) */
+        .btn-home { color: var(--color-home); }
+        .btn-home:hover
+        {
+            background-color: var(--color-home);
+            color: #ffffff;
+        }
+
+        .btn-projects { color: var(--color-projects); }
+        .btn-projects:hover
+        {
+            background-color: var(--color-projects);
+            color: #ffffff;
+        }
+
+        .btn-contact { color: var(--color-contact); }
+        .btn-contact:hover
+        {
+            background-color: var(--color-contact);
+            color: #ffffff;
+        }
+
+        .btn-coolsites { color: var(--color-coolsites); }
+        .btn-coolsites:hover
+        {
+            background-color: var(--color-coolsites);
+            color: #ffffff;
+        }
+
+        .btn-blog { color: var(--color-blog); }
+        .btn-blog:hover
+        {
+            background-color: var(--color-blog);
+            color: #ffffff;
+        }
+
+        /*
+           RAINBOW OUTLINE LOGIC FOR NAVBAR
+           When hovering a nav button, we add a gradient border
+        */
+        .nav-btn:hover {
+            /* Create a pseudo-element for the rainbow border */
+            border: 2px solid transparent;
+            background-clip: padding-box; /* Keeps bg inside border */
+        }
+
+        /* Apply Rainbow Border on Hover via specific hover classes */
+        .nav-btn.btn-home:hover {
+            border-image: linear-gradient(45deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
+            border-width: 2px;
+            box-shadow: 0 0 10px var(--color-home);
+        }
+
+        .nav-btn.btn-projects:hover {
+            border-image: linear-gradient(45deg, var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog), var(--color-home)) 1;
+            border-width: 2px;
+            box-shadow: 0 0 10px var(--color-projects);
+        }
+
+        .nav-btn.btn-contact:hover {
+            border-image: linear-gradient(45deg, var(--color-contact), var(--color-coolsites), var(--color-blog), var(--color-home), var(--color-projects)) 1;
+            border-width: 2px;
+            box-shadow: 0 0 10px var(--color-contact);
+        }
+
+        .nav-btn.btn-coolsites:hover {
+            border-image: linear-gradient(45deg, var(--color-coolsites), var(--color-blog), var(--color-home), var(--color-projects), var(--color-contact)) 1;
+            border-width: 2px;
+            box-shadow: 0 0 10px var(--color-coolsites);
+        }
+
+        .nav-btn.btn-blog:hover {
+            border-image: linear-gradient(45deg, var(--color-blog), var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites)) 1;
+            border-width: 2px;
+            box-shadow: 0 0 10px var(--color-blog);
+        }
+
+        /* --- THEME TOGGLE STYLES --- */
+        .theme-toggle-container {
+            display: flex;
+            align-items: center;
+            margin-left: 15px;
+            padding-left: 15px;
+            border-left: 2px solid rgba(128,128,128,0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            padding-right: 10px;
+        }
+
+        .theme-toggle-container:hover {
+            border-left-color: var(--color-contact);
+            background-color: rgba(0,0,0,0.05);
+            box-shadow: 0 0 10px var(--color-contact);
+        }
+
+        .theme-label {
+            font-size: 0.8rem;
+            margin-right: 10px;
+            font-weight: bold;
+            color: var(--text-main);
+            transition: color 0.3s ease;
+        }
+
+        .theme-toggle-container:hover .theme-label {
+            color: var(--color-coolsites);
+        }
+
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 50px;
+            height: 26px;
+        }
+
+        .switch input { opacity: 0; width: 0; height: 0; }
+
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+        }
+
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 20px; width: 20px;
+            left: 3px; bottom: 3px;
+            background-color: white;
+            transition: .4s;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+
+        body[data-theme="dark"] .slider { background-color: #777; }
+        body[data-theme="dark"] .slider:before { transform: translateX(24px); }
+
+        .icon-sun { position: absolute; left: 5px; top: 5px; font-size: 14px; color: #FFD700; opacity: 0; transition: opacity 0.3s; }
+        .icon-moon { position: absolute; right: 5px; top: 5px; font-size: 16px; color: #8A2BE2; opacity: 1; transition: opacity 0.3s; }
+        body[data-theme="dark"] .icon-sun { opacity: 1; }
+        body[data-theme="dark"] .icon-moon { opacity: 0; }
+
+        /* --- MAIN CONTENT --- */
+        .content-container {
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-top: 250px;
+        }
+
+        h1, h2 { color: var(--text-main); transition: color 0.3s ease; }
+        h1 { font-size: 3.5rem; margin-bottom: 10px; }
+        p { color: var(--text-secondary); margin-bottom: 20px; transition: color 0.3s ease; }
+
+        .section {
+            margin-bottom: 80px;
+            padding: 40px;
+            background: var(--bg-content);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            transition: all 0.4s ease;
+        }
+
+        /* Section Hover Effect */
+        .section:hover {
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+            border: 2px solid rgba(128,128,128,0.1);
+        }
+
+        .card {
+            background: var(--bg-content);
+            border: 1px solid rgba(128,128,128,0.2);
+            height: 150px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+            border-color: var(--color-coolsites);
+        }
+
+        /* --- CONTACT SECTION STYLES --- */
+        .contact-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 40px;
+        }
+        @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
+
+        .contact-section-title {
+            font-size: 1.5rem;
+            margin-bottom: 20px;
+            border-bottom: 2px solid var(--text-secondary);
+            padding-bottom: 10px;
+            display: inline-block;
+            color: var(--text-main);
+            transition: color 0.3s ease;
+        }
+
+        .contact-section-title:hover {
+            color: var(--color-contact);
+        }
+
+        .info-list { list-style: none; padding: 0; margin-bottom: 30px; }
+
+        .info-item {
+            margin-bottom: 15px;
+            padding: 15px;
+            background-color: rgba(0,0,0,0.03);
+            border: 1px solid rgba(0,0,0,0.05);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: all 0.3s ease;
+        }
+        body[data-theme="dark"] .info-item { background-color: rgba(255,255,255,0.05); }
+
+        .info-item:hover {
+            transform: translateX(5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
+            border: 2px solid transparent; /* Prepare for rainbow border */
+            /* Apply rainbow border to contact items */
+            border-image: linear-gradient(90deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
+        }
+
+        .info-label {
+            font-weight: bold;
+            font-size: 0.85rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: var(--text-secondary);
+            display: block;
+            margin-bottom: 8px;
+            transition: color 0.3s ease;
+        }
+
+        .info-value {
+            font-size: 1.05rem;
+            color: var(--text-main);
+            word-break: break-all;
+            font-family: monospace;
+            transition: all 0.3s ease;
+        }
+
+        /* Copy Icon with Rainbow Effect */
+        .copy-icon {
+            cursor: pointer;
+            font-size: 1.2rem;
+            opacity: 0.7;
+            transition: all 0.3s;
+            background: none;
+            border: none;
+            color: var(--text-main);
+            margin-left: 10px;
+            padding: 5px;
+        }
+
+        .copy-icon:hover {
+            opacity: 1;
+            transform: scale(1.15);
+            background-color: rgba(0,0,0,0.05);
+            color: var(--color-contact);
+            /* Add rainbow border to copy icon on hover */
+            border: 2px solid transparent;
+            border-image: linear-gradient(45deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
+            box-shadow: 0 0 8px var(--color-contact);
+        }
+
+        /* PGP Key Block Styles */
+        .pgp-container {
+            background-color: #f0f0f0;
+            padding: 25px;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 0.85rem;
+            color: #333;
+            position: relative;
+            line-height: 1.6;
+            transition: all 0.4s ease;
+            border: 1px solid rgba(0,0,0,0.1);
+        }
+        body[data-theme="dark"] .pgp-container {
+            background-color: #1e1e1e;
+            color: #d4d4d4;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .pgp-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            border-bottom: 1px solid currentColor;
+            padding-bottom: 10px;
+        }
+
+        .pgp-container:hover {
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+            /* PGP gets a purple/cool sites rainbow */
+            border-image: linear-gradient(45deg, var(--color-coolsites), var(--color-blog), var(--color-home), var(--color-projects)) 1;
+            border-width: 2px;
+        }
+
+        .pgp-text { white-space: pre-wrap; font-weight: 500; transition: color 0.3s ease; }
+
+        .action-btn {
+            padding: 8px 16px;
+            background-color: var(--text-main);
+            color: white;
+            border: none;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+        }
+        body[data-theme="dark"] .action-btn { background-color: var(--text-main); }
+
+        .action-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            background-color: var(--color-contact);
+            border: 2px solid transparent;
+            border-image: linear-gradient(90deg, var(--color-contact), var(--color-coolsites), var(--color-blog)) 1;
+        }
+
+        /* --- COOL SITES GRID STYLES (Enhanced) --- */
+        .sites-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .site-card {
+            padding: 25px;
+            text-align: center;
+            border: 1px solid rgba(128,128,128,0.2);
+            transition: all 0.4s ease;
+            cursor: pointer;
+            background-color: var(--bg-content);
+            height: auto;
+            min-height: 120px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .site-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+            /* Site Cards get a full Rainbow Outline */
+            border: 2px solid transparent;
+            border-image: linear-gradient(45deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog), var(--color-home)) 1;
+            color: var(--color-coolsites);
+        }
+
+        .site-card.animating-text::after {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.2) 100%);
+            pointer-events: none;
+            z-index: 1;
+            mix-blend-mode: overlay;
+        }
+
+        /* Site Card Text Rainbow on Hover */
+        .site-card.animating-text h2,
+        .site-card.animating-text p,
+        .site-card.animating-text .site-name,
+        .site-card.animating-text .site-icon {
+            color: transparent;
+            background-clip: text;
+            -webkit-background-clip: text;
+            background-image: linear-gradient(
+                90deg,
+                var(--color-home),
+                var(--color-projects),
+                var(--color-contact),
+                var(--color-coolsites),
+                var(--color-blog),
+                var(--color-home)
+            );
+            background-size: 400%;
+            animation: rainbow-wrap var(--rainbow-speed) linear infinite;
+        }
+
+        .site-icon { font-size: 2.5rem; margin-bottom: 10px; transition: color 0.3s ease; z-index: 2; position: relative;}
+        .site-name { font-size: 1.2rem; font-weight: 600; transition: color 0.3s ease; z-index: 2; position: relative; }
+
+        footer {
+            text-align: center;
+            padding: 50px;
+            background-color: var(--bg-body);
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            border-top: 1px solid rgba(0,0,0,0.1);
+            transition: border-color 0.3s ease;
+        }
+
+        footer:hover {
+            border-top-color: var(--color-contact);
+            box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
+        }
+
+        /* --- KEYFRAMES FOR INFINITE RAINBOW --- */
+        @keyframes rainbow-wrap {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+    </style>
+</head>
+<body>
+
+    <!-- Floating Navigation Bar -->
+    <nav class="navbar">
+        <a href="#home" class="nav-btn btn-home" data-text="home">home</a>
+        <a href="#projects" class="nav-btn btn-projects" data-text="projects">projects</a>
+        <a href="#contact" class="nav-btn btn-contact" data-text="contact me">contact me</a>
+        <a href="#cool-sites" class="nav-btn btn-coolsites" data-text="cool sites">cool sites</a>
+        <a href="#blog" class="nav-btn btn-blog" data-text="blog">blog</a>
+
+        <!-- Dark Mode Toggle -->
+        <div class="theme-toggle-container" id="theme-toggle">
+            <span class="theme-label" id="theme-text">Light</span>
+            <label class="switch">
+                <input type="checkbox" id="theme-switch">
+                <span class="slider">
+                    <span class="icon-sun">☀</span>
+                    <span class="icon-moon">☾</span>
+                </span>
+            </label>
+        </div>
+    </nav>
+
+    <main class="content-container">
+
+        <!-- Hero Section -->
+        <section id="home">
+             <div class="card" style="height: 250px; font-size: 2rem;">
+                <h1>Emilia Marigold</h1>
+
+                <p>Welcome to my digital garden. I design, I code, and I build cool things.</p>
+             </div>
+        </section>
+
+        <!-- Projects Section -->
+        <section id="projects" class="section">
+            <h2>Projects</h2>
+            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+            <div class="sites-grid">
+                <div class="site-card" onclick="window.open('https://example.com', '_blank')">
+                    <div class="site-name">Project One</div>
+                </div>
+                <div class="site-card" onclick="window.open('https://example.com', '_blank')">
+                    <div class="site-name">Project Two</div>
+                </div>
+                <div class="site-card" onclick="window.open('https://example.com', '_blank')">
+                    <div class="site-name">Project Three</div>
+                </div>
+                <div class="site-card" onclick="window.open('https://example.com', '_blank')">
+                    <div class="site-name">Project Four</div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact" class="section">
+            <h2>Contact Me</h2>
+            <p>You can reach out to me via email, Matrix, or check my public key for secure communication.</p>
+
+            <div class="contact-grid">
+                <!-- Contact Info -->
+                <div>
+                    <h3 class="contact-section-title">Messaging</h3>
+
+                    <div class="info-list">
+                        <h4 class="info-label">Email</h4>
+                        <ul>
+                            <li class="info-item">
+                                <span class="info-value">EmiliaMarigold@Protonmail.com</span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                            <li class="info-item">
+                                <span class="info-value">Emilia@Marigold.games</span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                            <li class="info-item">
+                                <span class="info-value">Epochryphon@protonmail.com</span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="info-list">
+                        <h4 class="info-label">Matrix</h4>
+                        <ul>
+                            <li class="info-item">
+                                <span class="info-value">@emilia:digitalthird.space</span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                            <li class="info-item">
+                                <span class="info-value">@epochryphon:matrix.org</span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                            <li class="info-item">
+                                <span class="info-value">@emiliamarigold:matrix.org</span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="info-list">
+                        <h4 class="info-label">Session I.D.</h4>
+                        <ul>
+                            <li class="info-item">
+                                <span class="info-value" style="font-size: 0.95rem;">
+                                    05aa14c6e8412c9b5fa6890b73ac09a4a<br>
+                                    9cb2a8f4166309c8a29f759f5f373f814
+                                </span>
+                                <button class="copy-icon" title="Copy">🔗</button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <!-- PGP Public Key -->
+                <div>
+                    <h3 class="contact-section-title">Security</h3>
+                    <div class="pgp-container">
+                        <div class="pgp-header">
+                            <span>PGP Public Key</span>
+                            <button class="action-btn" onclick="copyPGP()">Copy Key</button>
+                        </div>
+                        <div class="pgp-text" id="pgp-block">
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mDMEaayTBxYJKwYBBAHaRw8BAQdA
+St/IB4hdoodPISaGb5mj2a7FEfFr
+tBMz64raNfaYJRW0L0VtaWxpYSBN
+YXJpZ29sZCA8RW1pbGlhTWFyaWdv
+bGRAcHJvdG9ubWFpbC5jb20+iJYE
+ExYKAD4WIQTwfVpXmIupgTn0bwG9
+SlTYKqPsUgUCaayTBwIbAwUJBaOa
+gAULCQgHAgYVCgkICwIEFgIDAQIe
+AQIXgAAKCRC9SlTYKqPsUjuGAPwK
+WSAAyUkDO+6nmK0ekqvW6haxJfLG
+HC3RAV7RBZ9rjQD/XKJ05a6iH1/I
+UWaFtaP2iFXPTJRjIVvDZH2kbOCW
+Tge4OARprJMHEgorBgEEAZdVAQUB
+AQdArjF9SSY3OzhezxnCSyTFXAoR
+J8OrTKlELgzN9HKSNyADAQgHiH4E
+GBYKACYWIQTwfVpXmIupgTn0bwG9
+SlTYKqPsUgUCaayTBwIbDAUJBaOa
+gAAKCRC9SlTYKqPsUmhdAQDmEkvL
+ewoNDVDnw3wdAV26mot/vU3eHqxm
+0WBqOMk6AAD/dbv641CCRkU2mRlW
+N62pYzDLVSlPBLre
+MC9tQ6zkQg8=
+=7nBx
+
+-----END PGP PUBLIC KEY BLOCK-----
+                        </div>
+                    </div>
+
+                    <p style="margin-top: 20px; font-size: 0.9rem;">
+                        Use this key to encrypt emails sent to me or to verify my signatures.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Cool Sites Section -->
+        <section id="cool-sites" class="section">
+            <h2>Cool Sites</h2>
+            <p>A collection of organizations and platforms that promote digital freedom, privacy, and open source innovation.</p>
+
+            <div class="sites-grid">
+                <div class="site-card fsf" onclick="window.open('https://www.fsf.org', '_blank')">
+                    <div class="site-icon">FSF</div>
+                    <div class="site-name">Free Software Foundation</div>
+                </div>
+                <div class="site-card linux" onclick="window.open('https://www.kernel.org', '_blank')">
+                    <div class="site-icon">🐧</div>
+                    <div class="site-name">Linux</div>
+                </div>
+                <div class="site-card debian" onclick="window.open('https://www.debian.org', '_blank')">
+                    <div class="site-icon">Debian</div>
+                    <div class="site-name">Debian GNU/Linux</div>
+                </div>
+                <div class="site-card antix" onclick="window.open('https://antixlinux.com', '_blank')">
+                    <div class="site-icon">antiX</div>
+                    <div class="site-name">antiX</div>
+                </div>
+                <div class="site-card wikipedia" onclick="window.open('https://www.wikipedia.org', '_blank')">
+                    <div class="site-icon">Wikipedia</div>
+                    <div class="site-name">Wikipedia</div>
+                </div>
+                <div class="site-card aclu" onclick="window.open('https://www.aclu.org', '_blank')">
+                    <div class="site-icon">⚖️</div>
+                    <div class="site-name">ACLU</div>
+                </div>
+                <div class="site-card matrix" onclick="window.open('https://matrix.org', '_blank')">
+                    <div class="site-icon">Matrix</div>
+                    <div class="site-name">Matrix.org</div>
+                </div>
+                <div class="site-card mullvad" onclick="window.open('https://mullvad.net', '_blank')">
+                    <div class="site-icon">🛡️</div>
+                    <div class="site-name">Mullvad VPN</div>
+                </div>
+                <div class="site-card tor" onclick="window.open('https://www.torproject.org', '_blank')">
+                    <div class="site-icon">Onion</div>
+                    <div class="site-name">The Tor Project</div>
+                </div>
+                <div class="site-card graphene" onclick="window.open('https://grapheneos.org', '_blank')">
+                    <div class="site-icon">GrapheneOS</div>
+                    <div class="site-name">GrapheneOS is a degoogled, security hardened android distro. I use it on all my mobile devices.</div>
+                </div>
+                <div class="site-card openbsd" onclick="window.open('https://www.openbsd.org', '_blank')">
+                    <div class="site-icon">OpenBSD</div>
+                    <div class="site-name">OpenBSD is a security-focused, FLOSS software OS, likely the most free highly UNIX like OS available.</div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Blog Section -->
+        <section id="blog" class="section">
+            <h2>Blog</h2>
+            <p>Thoughts on web development, design systems, and the creative process. Latest updates from my desk.</p>
+            <div class="sites-grid">
+                <div class="site-card" style="border-left: 5px solid var(--color-blog);">
+                    <div class="site-icon">📝</div>
+                    <div class="site-name">Latest Post: Minimalism</div>
+                </div>
+                <div class="site-card" style="border-left: 5px solid var(--color-projects);">
+                    <div class="site-icon">💻</div>
+                    <div class="site-name">Tutorial: CSS Grid</div>
+                </div>
+                <div class="site-card" style="border-left: 5px solid var(--color-home);">
+                    <div class="site-icon">📊</div>
+                    <div class="site-name">Review: 2024 Tools</div>
+                </div>
+                <div class="site-card" style="border-left: 5px solid var(--color-coolsites);">
+                    <div class="site-icon">🌿</div>
+                    <div class="site-name">Life Update</div>
+                </div>
+            </div>
+        </section>
+
+        <footer>
+            &copy; <span id="year"></span> Emilia Marigold. Simple, Minimal, Light & Dark.
+        </footer>
+
+    </main>
+
+    <script>
+        /* --- JAVASCRIPT --- */
+
+        const toggleButton = document.getElementById('theme-switch');
+        const themeToggleContainer = document.getElementById('theme-toggle');
+        const body = document.body;
+        const themeText = document.getElementById('theme-text');
+
+        function setTheme(themeName) {
+            body.setAttribute('data-theme', themeName);
+            if (themeName === 'dark') {
+                toggleButton.checked = true;
+                themeText.textContent = "Dark";
+            } else {
+                toggleButton.checked = false;
+                themeText.textContent = "Light";
+            }
+        }
+
+        const currentTheme = localStorage.getItem('theme') || 
+                             (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+        setTheme(currentTheme);
+
+        toggleButton.addEventListener('change', function() {
+            if (this.checked) {
+                setTheme('dark');
+            } else {
+                setTheme('light');
+            }
+        });
+
+        body.addEventListener('click', function() {
+            localStorage.setItem('theme', body.getAttribute('data-theme'));
+        });
+
+        // Theme Toggle Hover Effect for Rainbow
+        themeToggleContainer.addEventListener('mouseenter', () => {
+            themeToggleContainer.classList.add('animating-text');
+            // Add rainbow border to the toggle container
+            const container = themeToggleContainer;
+            container.style.border = "2px solid transparent";
+            container.style.borderImage = "linear-gradient(45deg, var(--color-contact), var(--color-coolsites), var(--color-blog)) 1";
+        });
+        themeToggleContainer.addEventListener('mouseleave', () => {
+            themeToggleContainer.classList.remove('animating-text');
+            themeToggleContainer.style.border = "none";
+        });
+
+        document.getElementById('year').textContent = new Date().getFullYear();
+
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+
+        // --- RAINBOW LOGIC FOR SELECTED OBJECTS ---
+
+        // 1. Navigation Buttons
+        const navButtons = document.querySelectorAll('.nav-btn');
+
+        navButtons.forEach(btn => {
+            btn.addEventListener('mouseenter', () => {
+                btn.classList.add('animating');
+            });
+            btn.addEventListener('mouseleave', () => {
+                btn.classList.remove('animating');
+            });
+        });
+
+        // 2. Site Cards (Cool Sites & Blog)
+        const siteCards = document.querySelectorAll('.site-card');
+
+        siteCards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                card.classList.add('animating-text');
+            });
+            card.addEventListener('mouseleave', () => {
+                card.classList.remove('animating-text');
+            });
+        });
+
+        // 3. Contact Info Items (Text and Icons)
+        const contactItems = document.querySelectorAll('.info-item');
+
+        contactItems.forEach(item => {
+            item.addEventListener('mouseenter', () => {
+                item.classList.add('animating-text');
+                const label = item.querySelector('.info-label');
+                const value = item.querySelector('.info-value');
+                if(label) label.classList.add('animating');
+                if(value) value.classList.add('animating');
+            });
+            item.addEventListener('mouseleave', () => {
+                item.classList.remove('animating-text');
+                const label = item.querySelector('.info-label');
+                const value = item.querySelector('.info-value');
+                if(label) label.classList.remove('animating');
+                if(value) value.classList.remove('animating');
+            });
+        });
+
+        // 4. Copy Icons in Contact Section
+        const copyIcons = document.querySelectorAll('.copy-icon');
+
+        copyIcons.forEach(icon => {
+            icon.addEventListener('mouseenter', () => {
+                icon.style.color = "var(--color-contact)";
+                icon.classList.add('animating');
+                // Apply rainbow gradient to the icon
+                icon.style.backgroundImage = `linear-gradient(90deg, var(--color-home), var(--color-projects), var(--color-contact), var(--color-coolsites), var(--color-blog))`;
+                icon.style.backgroundClip = "text";
+                icon.style.webkitBackgroundClip = "text";
+                icon.style.color = "transparent";
+            });
+            icon.addEventListener('mouseleave', () => {
+                icon.classList.remove('animating');
+                icon.style.backgroundImage = "";
+                icon.style.color = "var(--color-contact)";
+            });
+        });
+
+        // Copy to Clipboard for Contact Info
+        document.querySelectorAll('.copy-icon').forEach(icon => {
+            icon.addEventListener('click', function() {
+                const textToCopy = this.previousElementSibling.innerText;
+                navigator.clipboard.writeText(textToCopy).then(() => {
+                    const originalIcon = this.innerText;
+                    this.innerText = '✅';
+                    this.style.color = 'var(--color-contact)';
+                    // Add temporary rainbow to the checkmark
+                    this.style.backgroundImage = `linear-gradient(90deg, var(--color-home), var(--color-projects), var(--color-contact))`;
+                    this.style.backgroundClip = "text";
+                    this.style.webkitBackgroundClip = "text";
+                    this.style.color = "transparent";
+
+                    setTimeout(() => {
+                        this.innerText = originalIcon;
+                        this.style.backgroundImage = "";
+                        this.style.color = "var(--color-contact)";
+                    }, 2000);
+                });
+            });
+        });
+
+        function copyPGP() {
+            const pgpText = document.getElementById('pgp-block').innerText;
+            navigator.clipboard.writeText(pgpText).then(() => {
+                const btn = document.querySelector('.pgp-container .action-btn');
+                const originalText = btn.innerText;
+                btn.innerText = "Copied!";
+                btn.style.backgroundImage = "linear-gradient(90deg, var(--color-contact), var(--color-coolsites))";
+                btn.style.backgroundClip = "text";
+                btn.style.webkitBackgroundClip = "text";
+                btn.style.color = "transparent";
+                setTimeout(() => {
+                    btn.innerText = originalText;
+                    btn.style.backgroundImage = "";
+                    btn.style.color = "white";
+                }, 2000);
+            });
+        }
+
+    </script>
+
+</body>
+</html>
+
