From 4ad335133b154b7bf0fb658f305f2d407d194096 Mon Sep 17 00:00:00 2001
From: shyamtala003 <shyamtala003@gmail.com>
Date: Sat, 8 Oct 2022 09:20:09 +0530
Subject: [PATCH] animated background added in hero section

---
 style.css | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/style.css b/style.css
index c572da4..e27cc35 100644
--- a/style.css
+++ b/style.css
@@ -107,29 +107,45 @@ span#notify_toast {
 @media screen and (max-width:380px) {
     .color_maker {
         width: 100%;
-        min-height:100vh;
+        min-height: 100vh;
     }
 
-    .color_maker .gradient_card
-    {
+    .color_maker .gradient_card {
         width: 100%;
-        min-height:100vh;
+        min-height: 100vh;
         box-shadow: none;
     }
 
-    .color_maker .gradient_card::before
-    {
+    .color_maker .gradient_card::before {
         display: none;
     }
 }
 
 .container {
     font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    background: linear-gradient(to right, #6d28d9, #db2777);
+    background: linear-gradient(90deg, #6d28d9,#db2777,#feac5e, #c779d0, #4bc0c8);
+    /* background:linear-gradient(to right, #6d28d9, #db2777); */
+    background-size: 600% 600%;
     padding-inline: 8%;
     overflow-x: hidden;
+    animation: gradient 16s ease infinite;
 }
 
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+
 h1.logo_text {
     padding-block: 1.5rem;
     font-size: 20px;
@@ -150,7 +166,7 @@ main.hero_section {
 }
 
 .hero_section h2:nth-child(2) {
-    color: #c4b5fb;
+    color: #ffffff;
 }
 
 .form {