diff --git a/client-web/gradient.css b/client-web/gradient.css index f2a66c1..30bd889 100644 --- a/client-web/gradient.css +++ b/client-web/gradient.css @@ -1,43 +1,21 @@ -/* Reset default margin and ensure full viewport coverage */ +/* Credit to Manuel Pinto on Codepen for the code! + https://codepen.io/P1N2O/pen/pyBNzX */ body { - margin: 0; - min-height: 100vh; - background: linear-gradient( - 30deg, - #50C878, /* green */ - #7FFFD4, /* aqua */ - #87CEEB, /* light blue */ - #00008B, /* dark blue */ - #800080, /* purple */ - #50C878, /* green */ - #7FFFD4, /* aqua */ - #87CEEB, /* light blue */ - #00008B, /* dark blue */ - #800080, /* purple */ - #50C878 /* green */ - ); - background-size: 1000% 1000%; - animation: gradient 120s ease infinite; + background: linear-gradient(-33deg, #721c7a, #612bd4, #3aa5c5, #30cf7f); + background-size: 400% 400%; + animation: gradient 120s ease infinite; + height: 100vh; } -/* Gradient animation keyframes */ @keyframes gradient { - 0% { - background-position: 0% 50%; - } - 100% { - background-position: 200% 50%; - } + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } } -/* Optional: styling for centered content */ -.content { - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - color: white; - font-family: sans-serif; - font-size: 2rem; - text-shadow: 2px 2px 4px rgba(0,0,0,0.3); -}