Update index.php

index.php

@@ -17,17 +17,16 @@ if(isset($_GET['theme'])) {
 <meta name="robots" content="noindex">
 <title>betere homesite</title>
 <style>
-/* Algemene styles */
 html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    overflow: auto; /* scrollen altijd mogelijk */
+    overflow: auto;
     font-family: monospace, monospace;
     color: #a9b594b3;
     background: linear-gradient(120deg, #245da4, #291451, #1e0f27, #b71b8dff);
     background-size: 400% 400%;
-    animation: bgFade 7s ease infinite;
+    animation: bgFade 10s ease infinite;
     transition: background 0.3s, color 0.3s;
 }
 
@@ -43,7 +42,6 @@ h1 {
     color: #ffffff;
 }
 
-/* Theme toggle knop */
 #themeToggle {
     position: fixed;
     top: 10px;
@@ -65,7 +63,6 @@ h1 {
     color: #000;
 }
 
-/* Content */
 ul {
     list-style: none;
     padding: 0;
@@ -77,7 +74,7 @@ ul {
 
 li {
     margin: 10px 0;
-    transition: all 0.2s ease;
+    transition: none; /* direct effect bij hover */
 }
 
 li:hover {
@@ -93,7 +90,7 @@ a {
     color: #00ffff;
     font-size: 18px;
     text-decoration: none;
-    transition: all 0.2s ease;
+    transition: none; /* direct kleuren bij hover */
     backdrop-filter: blur(5px);
     box-shadow: 0 4px 10px rgba(0,0,0,0.3);
 }
@@ -119,15 +116,14 @@ body.hacker li:hover {
     transform: scale(1.05) translateY(-5px);
 }
 
-/* Matrix canvas */
+/* Matrix rain canvas */
 #matrix {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 0;
-    pointer-events: none;
+    z-index: 1;
 }
 </style>
 </head>
@@ -179,7 +175,7 @@ const columns = Math.floor(width / fontSize);
 const drops = Array(columns).fill(1);
 
 function drawMatrix() {
-    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
+    ctx.fillStyle = "rgba(0, 0, 0, 0.08)"; 
     ctx.fillRect(0, 0, width, height);
 
     ctx.fillStyle = "#00ff00";