diff --git a/index.html b/index.html
index 97a8e6c..ad45256 100755
--- a/index.html
+++ b/index.html
@@ -1,110 +1,902 @@
 <!DOCTYPE html>
 <html lang="sv">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-  <!-- Facebook -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
 
-  <meta property="og:title" content="Databasen" />
-  <meta property="og:locale" content="sv" />
-  <meta property="og:description" content="Digitalt Självförsvar" />
-  <meta property="og:url" content="https://databasen.net/" />
-  <meta property="og:site_name" content="Databasen" />
-  <meta property="og:type" content="webpage" />
-  <meta property="og:image" content="https://databasen.net/opening.jpeg" />
-  <!-- Twitter Card -->
+    <!-- Facebook -->
 
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:title" content="Databasen" />
-  <meta name="twitter:description" content="Digitalt Självförsvar" />
-  <meta name="twitter:image" content="https://databasen.net/opening.jpeg" />
-  <title>Databasen - Digitalt Självförsvar</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
+    <meta property="og:title" content="Databasen" />
+    <meta property="og:locale" content="sv" />
+    <meta property="og:description" content="Digitalt Självförsvar" />
+    <meta property="og:url" content="https://databasen.net/" />
+    <meta property="og:site_name" content="Databasen" />
+    <meta property="og:type" content="webpage" />
+    <meta property="og:image" content="https://databasen.net/opening.jpeg" />
 
-    /* 👇 MANUALLY ADJUST THIS COLOR to match your image */
-    body {
-      background-color: #6C12FD;  /* ← change this to match your image's vibe */
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: system-ui, -apple-system, sans-serif;
-    }
+    <!-- Twitter Card -->
 
-    .image-container {
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-    }
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Databasen" />
+    <meta name="twitter:description" content="Digitalt Självförsvar" />
+    <meta name="twitter:image" content="https://databasen.net/opening.jpeg" />
 
-    .image-wrapper {
-      max-width: 100%;
-      max-height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+    <title>Databasen · Digitalt Självförsvar</title>
+    <style>
+        /* ─── Reset & Base ─── */
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
 
-    /* 👇 REPLACE 'your-image.jpg' with your actual image path */
-    .centered-image {
-      display: block;
-      max-width: 100%;
-      max-height: 80vh;
-      width: auto;
-      height: auto;
-      object-fit: contain;
-      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
-      border-radius: 4px;
-    }
+        :root {
+            --bg-primary: #0b0419;
+            --bg-secondary: #130825;
+            --bg-terminal: rgba(18, 6, 38, 0.92);
+            --border-color: rgba(120, 60, 200, 0.35);
+            --text-primary: #e0d4f5;
+            --text-green: #72f0a8;
+            --text-cyan: #7ad0f0;
+            --text-purple: #b87df0;
+            --text-dim: #8a7a9e;
+            --glow-green: rgba(114, 240, 168, 0.15);
+            --glow-cyan: rgba(122, 208, 240, 0.12);
+            --glow-purple: rgba(184, 125, 240, 0.20);
+            --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
+            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        }
 
-    /* optional subtle caption */
-    .info {
-      position: fixed;
-      bottom: 16px;
-      left: 0;
-      right: 0;
-      text-align: center;
-      font-size: 12px;
-      color: rgba(255, 255, 255, 0.5);
-      background: rgba(0, 0, 0, 0.3);
-      width: fit-content;
-      margin: 0 auto;
-      padding: 4px 12px;
-      border-radius: 20px;
-      backdrop-filter: blur(4px);
-      pointer-events: none;
-      font-family: monospace;
-    }
+        html {
+            font-size: 16px;
+            -webkit-text-size-adjust: 100%;
+        }
 
-    @media (max-width: 640px) {
-      .image-container {
-        padding: 12px;
-      }
-      .info {
-        font-size: 10px;
-        bottom: 10px;
-      }
-    }
-  </style>
+        body {
+            min-height: 100vh;
+            min-height: 100dvh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--bg-primary);
+            background-image:
+                radial-gradient(ellipse at 20% 50%, rgba(90, 30, 150, 0.25) 0%, transparent 70%),
+                radial-gradient(ellipse at 80% 20%, rgba(60, 20, 120, 0.20) 0%, transparent 60%),
+                radial-gradient(ellipse at 50% 100%, rgba(40, 10, 80, 0.30) 0%, transparent 50%);
+            background-attachment: fixed;
+            padding: 1.25rem;
+            font-family: var(--font-mono);
+            color: var(--text-primary);
+            line-height: 1.6;
+        }
+
+        /* subtle animated grain overlay */
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            opacity: 0.035;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+            background-size: 256px 256px;
+            pointer-events: none;
+        }
+
+        /* scan-line effect */
+        body::after {
+            content: '';
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            pointer-events: none;
+            background: repeating-linear-gradient(0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 0, 0, 0.03) 2px,
+                    rgba(0, 0, 0, 0.03) 4px);
+        }
+
+        /* ─── Terminal Window ─── */
+        .terminal {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            max-width: 820px;
+            background: var(--bg-terminal);
+            border-radius: 1.25rem;
+            border: 1px solid var(--border-color);
+            box-shadow:
+                0 20px 60px rgba(0, 0, 0, 0.7),
+                0 0 0 1px rgba(120, 60, 200, 0.10) inset,
+                0 0 40px rgba(120, 60, 200, 0.06);
+            backdrop-filter: blur(6px);
+            -webkit-backdrop-filter: blur(6px);
+            overflow: hidden;
+            transition: box-shadow 0.3s ease;
+        }
+
+        .terminal:hover {
+            box-shadow:
+                0 24px 72px rgba(0, 0, 0, 0.8),
+                0 0 0 1px rgba(140, 80, 220, 0.20) inset,
+                0 0 60px rgba(120, 60, 200, 0.10);
+        }
+
+        /* ─── Title Bar ─── */
+        .terminal-titlebar {
+            display: flex;
+            align-items: center;
+            padding: 0.7rem 1.25rem;
+            background: rgba(255, 255, 255, 0.03);
+            border-bottom: 1px solid rgba(120, 60, 200, 0.15);
+            gap: 0.75rem;
+            user-select: none;
+            flex-wrap: wrap;
+        }
+
+        .titlebar-dots {
+            display: flex;
+            gap: 0.5rem;
+            flex-shrink: 0;
+        }
+
+        .titlebar-dots span {
+            display: block;
+            width: 0.75rem;
+            height: 0.75rem;
+            border-radius: 50%;
+            transition: opacity 0.2s ease;
+        }
+
+        .titlebar-dots span:nth-child(1) {
+            background: #ff5f56;
+        }
+        .titlebar-dots span:nth-child(2) {
+            background: #ffbd2e;
+        }
+        .titlebar-dots span:nth-child(3) {
+            background: #27c93f;
+        }
+
+        .titlebar-dots span:hover {
+            opacity: 0.7;
+        }
+
+        .titlebar-path {
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            letter-spacing: 0.02em;
+            flex: 1;
+            text-align: center;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-family: var(--font-mono);
+        }
+
+        .titlebar-path .highlight {
+            color: var(--text-cyan);
+        }
+
+        .titlebar-icon {
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            flex-shrink: 0;
+            opacity: 0.6;
+            letter-spacing: 0.04em;
+        }
+
+        /* ─── Terminal Body ─── */
+        .terminal-body {
+            padding: 2rem 1.75rem 2.25rem;
+            position: relative;
+        }
+
+        /* ─── Header / Logo ─── */
+        .terminal-header {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            font-size: 1.8rem;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+            color: var(--text-primary);
+            text-shadow: 0 0 30px var(--glow-purple);
+            font-family: var(--font-mono);
+        }
+
+        .logo-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 2.6rem;
+            height: 2.6rem;
+            border-radius: 0.5rem;
+            background: linear-gradient(135deg, rgba(120, 60, 200, 0.25), rgba(80, 30, 150, 0.15));
+            border: 1px solid rgba(120, 60, 200, 0.25);
+            font-size: 1.4rem;
+            flex-shrink: 0;
+            color: var(--text-purple);
+        }
+
+        .logo-text {
+            background: linear-gradient(135deg, #e0d4f5 0%, #b87df0 50%, #7ad0f0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+
+        .logo-prompt {
+            color: var(--text-green);
+            font-size: 1rem;
+            font-weight: 400;
+            opacity: 0.7;
+            -webkit-text-fill-color: var(--text-green);
+            background: none;
+            margin-left: 0.2rem;
+        }
+
+        .subhead {
+            margin-top: 0.3rem;
+            font-size: 0.8rem;
+            color: var(--text-dim);
+            letter-spacing: 0.06em;
+            font-family: var(--font-mono);
+        }
+
+        .subhead .accent {
+            color: var(--text-cyan);
+        }
+
+        .subhead .cursor-blink {
+            display: inline-block;
+            width: 0.45rem;
+            height: 0.9rem;
+            background: var(--text-green);
+            vertical-align: text-bottom;
+            margin-left: 0.15rem;
+            animation: blink 1s step-end infinite;
+            border-radius: 1px;
+        }
+
+        @keyframes blink {
+            0%,
+            100% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0;
+            }
+        }
+
+        /* ─── Flyer (responsive to image shape) ─── */
+        .flyer-wrapper {
+            position: relative;
+            margin: 0.5rem auto 2rem;
+            max-width: 580px;
+            border-radius: 0.75rem;
+            overflow: hidden;
+            box-shadow:
+                0 8px 32px rgba(0, 0, 0, 0.5),
+                0 0 0 1px rgba(120, 60, 200, 0.20),
+                0 0 40px rgba(120, 60, 200, 0.05);
+            transition: transform 0.25s ease, box-shadow 0.3s ease;
+            background: #0d0420;
+        }
+
+        .flyer-wrapper:hover {
+            transform: scale(1.005);
+            box-shadow:
+                0 12px 48px rgba(0, 0, 0, 0.6),
+                0 0 0 1px rgba(140, 80, 220, 0.30),
+                0 0 60px rgba(120, 60, 200, 0.08);
+        }
+
+        /* Image adapts to its own natural aspect ratio – no forced shape */
+        .flyer-wrapper img {
+            display: block;
+            width: 100%;
+            height: auto;
+            background: linear-gradient(135deg, #1a0830, #2d0f4a);
+            transition: filter 0.3s ease;
+        }
+
+        /* fallback – shows if image fails or is missing */
+        .flyer-wrapper .flyer-fallback {
+            display: none;
+            width: 100%;
+            min-height: 200px;
+            background: linear-gradient(135deg, #1a0830, #2d0f4a, #1a0830);
+            background-size: 200% 200%;
+            animation: gradientShift 8s ease-in-out infinite alternate;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            color: var(--text-dim);
+            font-size: 0.85rem;
+            text-align: center;
+            padding: 1.5rem;
+            border: 1px dashed rgba(120, 60, 200, 0.20);
+            font-family: var(--font-mono);
+        }
+
+        .flyer-wrapper img:not([src]),
+        .flyer-wrapper img[src=""] {
+            display: none;
+        }
+
+        .flyer-wrapper img:not([src])+.flyer-fallback,
+        .flyer-wrapper img[src=""]+.flyer-fallback {
+            display: flex;
+        }
+
+        @keyframes gradientShift {
+            0% {
+                background-position: 0% 50%;
+            }
+            100% {
+                background-position: 100% 50%;
+            }
+        }
+
+        .flyer-badge {
+            position: absolute;
+            top: 0.75rem;
+            right: 0.75rem;
+            background: rgba(11, 4, 25, 0.75);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            border: 1px solid rgba(120, 60, 200, 0.20);
+            border-radius: 0.4rem;
+            padding: 0.3rem 0.7rem;
+            font-size: 0.55rem;
+            letter-spacing: 0.08em;
+            color: var(--text-dim);
+            text-transform: uppercase;
+            font-family: var(--font-mono);
+            pointer-events: none;
+        }
+
+        /* ─── Event Text ─── */
+        .event-text {
+            max-width: 620px;
+            margin: 0 auto 1.75rem;
+            padding: 0 0.25rem;
+        }
+
+        .event-text .prompt-line {
+            display: flex;
+            align-items: baseline;
+            gap: 0.5rem;
+            font-size: 0.85rem;
+            color: var(--text-dim);
+            margin-bottom: 0.4rem;
+            font-family: var(--font-mono);
+        }
+
+        .event-text .prompt-line .symbol {
+            color: var(--text-green);
+            flex-shrink: 0;
+            font-weight: 500;
+        }
+
+        .event-text .prompt-line .path {
+            color: var(--text-cyan);
+            font-size: 0.7rem;
+        }
+
+        .event-text .content {
+            font-size: 0.95rem;
+            line-height: 1.8;
+            color: var(--text-primary);
+            font-family: var(--font-sans);
+            background: rgba(255, 255, 255, 0.02);
+            padding: 1.25rem 1.5rem;
+            border-radius: 0.6rem;
+            border-left: 2px solid rgba(120, 60, 200, 0.20);
+            border: 1px solid rgba(120, 60, 200, 0.08);
+            backdrop-filter: blur(2px);
+            -webkit-backdrop-filter: blur(2px);
+        }
+
+        .event-text .content strong {
+            color: var(--text-green);
+            font-weight: 600;
+        }
+
+        .event-text .content .highlight-cyan {
+            color: var(--text-cyan);
+        }
+
+        .event-text .content .highlight-purple {
+            color: var(--text-purple);
+        }
+
+        /* ─── Footer / Command line ─── */
+        .terminal-footer {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-between;
+            gap: 0.75rem 1.25rem;
+            padding-top: 1.25rem;
+            border-top: 1px solid rgba(120, 60, 200, 0.10);
+            margin-top: 0.25rem;
+            font-size: 0.7rem;
+            color: var(--text-dim);
+            font-family: var(--font-mono);
+        }
+
+        .footer-left {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            flex-wrap: wrap;
+        }
+
+        .footer-left .cmd {
+            display: flex;
+            align-items: center;
+            gap: 0.35rem;
+            background: rgba(255, 255, 255, 0.03);
+            padding: 0.2rem 0.7rem;
+            border-radius: 0.3rem;
+            border: 1px solid rgba(120, 60, 200, 0.08);
+        }
+
+        .footer-left .cmd .prompt {
+            color: var(--text-green);
+        }
+
+        .footer-left .cmd .text {
+            color: var(--text-primary);
+        }
+
+        .footer-left .cmd .cursor {
+            display: inline-block;
+            width: 0.4rem;
+            height: 0.7rem;
+            background: var(--text-green);
+            animation: blink 1s step-end infinite;
+            border-radius: 1px;
+            opacity: 0.6;
+        }
+
+        .footer-right {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            flex-wrap: wrap;
+        }
+
+        .footer-right .tag {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+            padding: 0.15rem 0.6rem;
+            border-radius: 0.3rem;
+            background: rgba(120, 60, 200, 0.10);
+            border: 1px solid rgba(120, 60, 200, 0.08);
+            color: var(--text-dim);
+            font-size: 0.6rem;
+            letter-spacing: 0.04em;
+        }
+
+        .footer-right .tag .dot {
+            display: inline-block;
+            width: 0.4rem;
+            height: 0.4rem;
+            border-radius: 50%;
+            background: var(--text-green);
+            animation: pulse-dot 1.8s ease-in-out infinite;
+        }
+
+        @keyframes pulse-dot {
+            0%,
+            100% {
+                opacity: 1;
+                transform: scale(1);
+            }
+            50% {
+                opacity: 0.3;
+                transform: scale(0.7);
+            }
+        }
+
+        .footer-right .tag .dot.cyan {
+            background: var(--text-cyan);
+        }
+
+        /* ─── Responsive ─── */
+        @media (max-width: 700px) {
+            body {
+                padding: 0.75rem;
+            }
+
+            .terminal-body {
+                padding: 1.25rem 1rem 1.5rem;
+            }
+
+            .terminal-titlebar {
+                padding: 0.5rem 0.9rem;
+            }
+
+            .titlebar-path {
+                font-size: 0.55rem;
+            }
+            .titlebar-icon {
+                font-size: 0.55rem;
+            }
+            .titlebar-dots span {
+                width: 0.6rem;
+                height: 0.6rem;
+            }
+
+            .logo {
+                font-size: 1.35rem;
+                gap: 0.4rem;
+            }
+            .logo-icon {
+                width: 2.1rem;
+                height: 2.1rem;
+                font-size: 1.1rem;
+            }
+            .logo-prompt {
+                font-size: 0.8rem;
+            }
+
+            .subhead {
+                font-size: 0.65rem;
+            }
+            .subhead .cursor-blink {
+                width: 0.35rem;
+                height: 0.7rem;
+            }
+
+            .flyer-wrapper {
+                max-width: 100%;
+                border-radius: 0.5rem;
+                margin: 0.25rem auto 1.5rem;
+            }
+
+            /* fallback min-height smaller on mobile */
+            .flyer-wrapper .flyer-fallback {
+                min-height: 150px;
+                font-size: 0.7rem;
+                padding: 1rem;
+            }
+
+            .flyer-badge {
+                font-size: 0.45rem;
+                padding: 0.2rem 0.5rem;
+                top: 0.5rem;
+                right: 0.5rem;
+            }
+
+            .event-text .prompt-line {
+                font-size: 0.7rem;
+                gap: 0.3rem;
+            }
+            .event-text .prompt-line .path {
+                font-size: 0.6rem;
+            }
+            .event-text .content {
+                font-size: 0.85rem;
+                padding: 1rem 1rem;
+                line-height: 1.7;
+            }
+
+            .terminal-footer {
+                font-size: 0.6rem;
+                flex-direction: column;
+                align-items: stretch;
+                gap: 0.5rem;
+                padding-top: 1rem;
+            }
+
+            .footer-left,
+            .footer-right {
+                justify-content: center;
+                width: 100%;
+            }
+
+            .footer-left .cmd {
+                padding: 0.15rem 0.5rem;
+                font-size: 0.6rem;
+            }
+            .footer-right .tag {
+                font-size: 0.5rem;
+                padding: 0.1rem 0.4rem;
+            }
+            .footer-right .tag .dot {
+                width: 0.3rem;
+                height: 0.3rem;
+            }
+        }
+
+        @media (max-width: 420px) {
+            .terminal-body {
+                padding: 0.9rem 0.65rem 1.25rem;
+            }
+
+            .logo {
+                font-size: 1.1rem;
+            }
+            .logo-icon {
+                width: 1.8rem;
+                height: 1.8rem;
+                font-size: 0.9rem;
+            }
+            .logo-prompt {
+                font-size: 0.65rem;
+            }
+
+            .event-text .content {
+                font-size: 0.78rem;
+                padding: 0.8rem 0.8rem;
+                line-height: 1.6;
+            }
+
+            .terminal-titlebar {
+                padding: 0.35rem 0.65rem;
+                gap: 0.4rem;
+            }
+            .titlebar-dots span {
+                width: 0.5rem;
+                height: 0.5rem;
+            }
+            .titlebar-path {
+                font-size: 0.45rem;
+            }
+
+            .flyer-wrapper {
+                border-radius: 0.4rem;
+            }
+
+            .flyer-wrapper .flyer-fallback {
+                min-height: 120px;
+                font-size: 0.6rem;
+                padding: 0.75rem;
+            }
+
+            .flyer-badge {
+                font-size: 0.4rem;
+                padding: 0.15rem 0.4rem;
+                top: 0.35rem;
+                right: 0.35rem;
+            }
+
+            .footer-left .cmd {
+                font-size: 0.5rem;
+                padding: 0.1rem 0.4rem;
+            }
+            .footer-right .tag {
+                font-size: 0.45rem;
+                padding: 0.1rem 0.35rem;
+            }
+            .event-text .prompt-line {
+                font-size: 0.6rem;
+            }
+            .event-text .prompt-line .path {
+                font-size: 0.5rem;
+            }
+        }
+
+        /* ─── Utility ─── */
+        .text-center {
+            text-align: center;
+        }
+
+        .mt-1 {
+            margin-top: 0.5rem;
+        }
+
+        .mb-1 {
+            margin-bottom: 0.5rem;
+        }
+
+        /* ─── Scrollbar (optional polish) ─── */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(120, 60, 200, 0.30);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(120, 60, 200, 0.50);
+        }
+
+        /* ─── Selection ─── */
+        ::selection {
+            background: rgba(120, 60, 200, 0.35);
+            color: #fff;
+        }
+
+        /* ─── Image loading state ─── */
+        .flyer-wrapper img {
+            transition: opacity 0.4s ease;
+        }
+        .flyer-wrapper img:not([src]),
+        .flyer-wrapper img[src=""] {
+            opacity: 0;
+        }
+        .flyer-wrapper img:not([src])+.flyer-fallback,
+        .flyer-wrapper img[src=""]+.flyer-fallback {
+            display: flex;
+            opacity: 1;
+        }
+        .flyer-wrapper img[src]:not([src=""]) {
+            opacity: 1;
+        }
+        .flyer-wrapper img[src]:not([src=""]):not(.loaded) {
+            opacity: 0;
+        }
+        .flyer-wrapper img.loaded {
+            opacity: 1;
+        }
+
+        /* show fallback while loading */
+        .flyer-wrapper .flyer-fallback {
+            display: flex;
+        }
+        .flyer-wrapper img.loaded+.flyer-fallback {
+            display: none;
+        }
+        .flyer-wrapper img:not([src])+.flyer-fallback,
+        .flyer-wrapper img[src=""]+.flyer-fallback {
+            display: flex;
+        }
+        .flyer-wrapper img[src]:not([src=""]):not(.loaded)+.flyer-fallback {
+            display: flex;
+        }
+        .flyer-wrapper img[src]:not([src=""]).loaded+.flyer-fallback {
+            display: none;
+        }
+
+        /* ensure fallback shows when image fails */
+        .flyer-wrapper img.error+.flyer-fallback {
+            display: flex !important;
+        }
+        .flyer-wrapper img.error {
+            display: none;
+        }
+    </style>
 </head>
 <body>
-  <div class="image-container">
-    <div class="image-wrapper">
-      <!-- 👇 CHANGE 'your-image.jpg' to your actual image file path -->
-      <img class="centered-image" src="opening.jpeg" alt="Centered image">
-    </div>
-  </div>
-  <div class="info"><pre>╶┬╮╭─╮╶┬╴╭─╮╭╮ ╭─╮╭─╮╭─╴╭╮╷
- ││├─┤ │ ├─┤├┴╮├─┤╰─╮├╴ │╰┤
-╶┴╯╵ ╵ ╵ ╵ ╵╰─╯╵ ╵╰─╯╰─╴╵ ╵
-  </pre></div>
+
+    <div class="terminal" role="main" aria-label="Terminal fönster">
+
+        <!-- ─── Title Bar ─── -->
+        <div class="terminal-titlebar">
+            <div class="titlebar-dots">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </div>
+            <div class="titlebar-path">
+                <span class="highlight">●</span> databasen ~ <span class="highlight">/evenemang/digitalt-sjalvforsvar</span>
+            </div>
+            <div class="titlebar-icon">⎔</div>
+        </div>
+
+        <!-- ─── Body ─── -->
+        <div class="terminal-body">
+
+            <!-- Header / Logo -->
+            <header class="terminal-header">
+                <div class="logo" aria-label="Databasen">
+                    <span class="logo-icon" aria-hidden="true">⁂</span>
+                    <span class="logo-text">Databasen</span>
+                    <span class="logo-prompt">$</span>
+                </div>
+                <div class="subhead">
+                    <span class="accent">└─</span> event :: <span class="accent">Digitalt Självförsvar</span>
+                    <span class="cursor-blink" aria-hidden="true"></span>
+                </div>
+            </header>
+
+            <!-- Flyer – now works with ANY aspect ratio -->
+            <div class="flyer-wrapper">
+                <!--
+                ═══════════════════════════════════════════════════════════
+                DUMMY BILD – ersätt src med din egen flyer-bild.
+                Fungerar med både liggande (horisontell) och stående (vertikal).
+                ═══════════════════════════════════════════════════════════
+                -->
+                <img
+                src="https://www.databasen.net/opening.jpeg"
+                alt="Flyer för Digitalt Självförsvar – ersätt med din bild"
+                loading="lazy"
+                decoding="async"
+                onload="this.classList.add('loaded')"
+                onerror="this.classList.add('error')"
+                />
+                <!-- fallback om bilden inte laddas -->
+                <div class="flyer-fallback" aria-hidden="true">
+                    <span style="font-size:2rem;margin-bottom:0.5rem;opacity:0.4;">🖼</span>
+                    <span style="font-weight:400;letter-spacing:0.04em;">[ flyer placeholder ]</span>
+                    <span style="font-size:0.65rem;opacity:0.5;margin-top:0.25rem;">ersätt med din bild</span>
+                </div>
+                <div class="flyer-badge">📌 flyer</div>
+            </div>
+
+            <!-- Event Text (exakt som angivet) -->
+            <div class="event-text">
+                <div class="prompt-line">
+                    <span class="symbol">❯</span>
+                    <span class="path">~/evenemang/</span>
+                    <span style="color:var(--text-dim);font-size:0.7rem;">— info —</span>
+                </div>
+                <div class="content">
+                    <strong>Torsdag 25 juni</strong> bjuder <span class="highlight-purple">Databasen</span> in till en kväll om <span class="highlight-cyan">digitalt självförsvar</span>.
+                    Det blir information, workshop och samtal om beteende och identitet online, datainsamling och mycket mer.
+                    Kvällen är en första träff av flera, och tillsammans sätter vi riktningen framåt. <br />
+                    <span style="display:inline-block;margin-top:0.5rem;padding:0.2rem 0.7rem;background:rgba(114,240,168,0.06);border:1px solid rgba(114,240,168,0.10);border-radius:0.3rem;font-size:0.8rem;color:var(--text-green);">
+                        ✦ Ingen anmälan behövs
+                    </span>
+                </div>
+            </div>
+
+            <!-- Footer / CLI -->
+            <footer class="terminal-footer">
+                <div class="footer-left">
+                    <span class="cmd">
+                        <span class="prompt">$</span>
+                        <span class="text">cat flyer.md</span>
+                        <span class="cursor" aria-hidden="true"></span>
+                    </span>
+                    <span style="opacity:0.4;font-size:0.55rem;">|</span>
+                    <span style="font-size:0.6rem;opacity:0.5;">v1.0</span>
+                </div>
+                <div class="footer-right">
+                    <span class="tag">
+                        <span class="dot" aria-hidden="true"></span>
+                        aktiv
+                    </span>
+                    <span class="tag">
+                        <span class="dot cyan" aria-hidden="true"></span>
+                        #digitaltsjalvforsvar
+                    </span>
+                    <span class="tag" style="border-color:rgba(184,125,240,0.15);">
+                        <span style="color:var(--text-purple);">⬢</span>
+                        databasen
+                    </span>
+                </div>
+            </footer>
+
+        </div><!-- /terminal-body -->
+    </div><!-- /terminal -->
+
+    <!-- small script to handle image loading state -->
+    <script>
+        (function() {
+            const img = document.querySelector('.flyer-wrapper img');
+            if (img) {
+                if (img.complete && img.naturalWidth > 0) {
+                    img.classList.add('loaded');
+                }
+                img.addEventListener('error', function() {
+                    this.classList.add('error');
+                });
+            }
+        })();
+    </script>
+
 </body>
 </html>
