From f4d53d0a58249aa80984cf2b6f5b16e71b0d9f1c Mon Sep 17 00:00:00 2001
From: Ben de Roo <ben@de-roo.org>
Date: Tue, 30 Dec 2025 11:02:34 +0100
Subject: [PATCH] Update index.php

---
 index.php | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)
diff --git a/index.php b/index.php
index 3b239f5..8428601 100644
--- a/index.php
+++ b/index.php
@@ -4,18 +4,34 @@
     <meta charset="UTF-8">
     <meta name="robots" content="noindex">
     <title>ben zijn betere homesite</title>
-    <link rel="stylesheet" href="style.css">
+
     <style>
         body {
             display: flex;
             flex-direction: column;
-            align-items: center;  /* horizontaal midden */
-            justify-content: center; /* verticaal midden */
-            min-height: 100vh; /* scherm volledig gebruiken */
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
             margin: 0;
             font-family: 'Courier New', Courier, monospace;
-            background-color: rgba(36, 93, 164, 1);
-            color: #ffffff; /* wit voor goed contrast */
+            color: #ffffff;
+
+            /* 🌈 ANIMATED BACKGROUND */
+            background: linear-gradient(
+                120deg,
+                #245da4,
+                #1b3a6f,
+                #0f2027,
+                #2c5364
+            );
+            background-size: 400% 400%;
+            animation: bgFade 15s ease infinite;
+        }
+
+        @keyframes bgFade {
+            0%   { background-position: 0% 50%; }
+            50%  { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
 
         h1 {
@@ -27,23 +43,24 @@
         }
 
         li {
-            list-style: none; /* bullets weg */
+            list-style: none;
             margin: 5px 0;
         }
 
         a {
-            text-decoration: none; /* onderstreping weg */
-            color: #00ffff; /* mooie cyan kleur */
+            text-decoration: none;
+            color: #00ffff;
             font-size: 18px;
             transition: color 0.2s;
         }
 
         a:hover {
             text-decoration: underline;
-            color: #000000; /* hover kleur verandert naar oranje */
+            color: #000000;
         }
     </style>
 </head>
+
 <body>
     <h1>voor alle dieren in de dierentuin</h1>
     <ul>
