From b1e87753466ffe5368ae18fa28b37a014b1cc360 Mon Sep 17 00:00:00 2001
From: Denshooter <dennis@konkol.net>
Date: Mon, 3 Feb 2025 23:01:06 +0100
Subject: [PATCH] style: enhance global styles with animated background and
 improved layout

---
 app/globals.css | 201 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 186 insertions(+), 15 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index de0cff5..22ea7f3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,5 @@
+/* app/globals.css */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -5,23 +7,192 @@
 /* Custom Global Styles */
 body {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    /*from to background color*/
-    /*background: -webkit-repeating-radial-gradient(circle, #f0f0f0, #8a8a8a);*/
-
-    background: linear-gradient(120deg, #f5f7fa 0%, #303030 100%);
+    margin: 0;
+    padding: 0;
+    position: relative;
+    min-height: 100vh;
 }
 
-.neumorphism {
-    background-color: #f0f0f0;
-    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
-    transition: box-shadow 0.3s ease, transform 0.3s ease;
+body::before {
+    content: "";
+    position: fixed;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    z-index: -1;
+    background: radial-gradient(circle at 20% 20%, #ff8185, transparent 25%),
+    radial-gradient(circle at 80% 80%, #ffaa91, transparent 25%),
+    radial-gradient(circle at 50% 50%, #fb7fd9, transparent 25%),
+    radial-gradient(circle at 30% 70%, #9b6fff, transparent 25%),
+    radial-gradient(circle at 70% 30%, #ff8edf, transparent 25%);
+    background-size: 200% 200%;
+    animation: bubbleAnimation 60s ease infinite;
 }
 
-.neumorphism:hover {
-    box-shadow: inset 8px 8px 16px #dddddd, inset -8px -8px 16px #ffffff;
-}
-
-.neumorphism:active {
-    translate: 0 0.225em;
-    box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
+@keyframes bubbleAnimation {
+    0% {
+        background-position: 0 0;
+        transform: rotate(0deg) scale(1.5);
+    }
+    2.5% {
+        background-position: 5% 5%;
+        transform: rotate(9deg) scale(1.5);
+    }
+    5% {
+        background-position: 10% 10%;
+        transform: rotate(18deg) scale(1.5);
+    }
+    7.5% {
+        background-position: 15% 15%;
+        transform: rotate(27deg) scale(1.5);
+    }
+    10% {
+        background-position: 20% 20%;
+        transform: rotate(36deg) scale(1.5);
+    }
+    12.5% {
+        background-position: 25% 25%;
+        transform: rotate(45deg) scale(1.5);
+    }
+    15% {
+        background-position: 30% 30%;
+        transform: rotate(54deg) scale(1.5);
+    }
+    17.5% {
+        background-position: 35% 35%;
+        transform: rotate(63deg) scale(1.5);
+    }
+    20% {
+        background-position: 40% 40%;
+        transform: rotate(72deg) scale(1.5);
+    }
+    22.5% {
+        background-position: 45% 45%;
+        transform: rotate(81deg) scale(1.5);
+    }
+    25% {
+        background-position: 50% 50%;
+        transform: rotate(90deg) scale(1.5);
+    }
+    27.5% {
+        background-position: 55% 55%;
+        transform: rotate(99deg) scale(1.5);
+    }
+    30% {
+        background-position: 60% 60%;
+        transform: rotate(108deg) scale(1.5);
+    }
+    32.5% {
+        background-position: 65% 65%;
+        transform: rotate(117deg) scale(1.5);
+    }
+    35% {
+        background-position: 70% 70%;
+        transform: rotate(126deg) scale(1.5);
+    }
+    37.5% {
+        background-position: 75% 75%;
+        transform: rotate(135deg) scale(1.5);
+    }
+    40% {
+        background-position: 80% 80%;
+        transform: rotate(144deg) scale(1.5);
+    }
+    42.5% {
+        background-position: 85% 85%;
+        transform: rotate(153deg) scale(1.5);
+    }
+    45% {
+        background-position: 90% 90%;
+        transform: rotate(162deg) scale(1.5);
+    }
+    47.5% {
+        background-position: 95% 95%;
+        transform: rotate(171deg) scale(1.5);
+    }
+    50% {
+        background-position: 100% 100%;
+        transform: rotate(180deg) scale(1.5);
+    }
+    52.5% {
+        background-position: 95% 95%;
+        transform: rotate(189deg) scale(1.5);
+    }
+    55% {
+        background-position: 90% 90%;
+        transform: rotate(198deg) scale(1.5);
+    }
+    57.5% {
+        background-position: 85% 85%;
+        transform: rotate(207deg) scale(1.5);
+    }
+    60% {
+        background-position: 80% 80%;
+        transform: rotate(216deg) scale(1.5);
+    }
+    62.5% {
+        background-position: 75% 75%;
+        transform: rotate(225deg) scale(1.5);
+    }
+    65% {
+        background-position: 70% 70%;
+        transform: rotate(234deg) scale(1.5);
+    }
+    67.5% {
+        background-position: 65% 65%;
+        transform: rotate(243deg) scale(1.5);
+    }
+    70% {
+        background-position: 60% 60%;
+        transform: rotate(252deg) scale(1.5);
+    }
+    72.5% {
+        background-position: 55% 55%;
+        transform: rotate(261deg) scale(1.5);
+    }
+    75% {
+        background-position: 50% 50%;
+        transform: rotate(270deg) scale(1.5);
+    }
+    77.5% {
+        background-position: 45% 45%;
+        transform: rotate(279deg) scale(1.5);
+    }
+    80% {
+        background-position: 40% 40%;
+        transform: rotate(288deg) scale(1.5);
+    }
+    82.5% {
+        background-position: 35% 35%;
+        transform: rotate(297deg) scale(1.5);
+    }
+    85% {
+        background-position: 30% 30%;
+        transform: rotate(306deg) scale(1.5);
+    }
+    87.5% {
+        background-position: 25% 25%;
+        transform: rotate(315deg) scale(1.5);
+    }
+    90% {
+        background-position: 20% 20%;
+        transform: rotate(324deg) scale(1.5);
+    }
+    92.5% {
+        background-position: 15% 15%;
+        transform: rotate(333deg) scale(1.5);
+    }
+    95% {
+        background-position: 10% 10%;
+        transform: rotate(342deg) scale(1.5);
+    }
+    97.5% {
+        background-position: 5% 5%;
+        transform: rotate(351deg) scale(1.5);
+    }
+    100% {
+        background-position: 0 0;
+        transform: rotate(360deg) scale(1.5);
+    }
 }
\ No newline at end of file