no bitches?????????????????

gradient.css

@@ -5,11 +5,6 @@
 }
 
 @keyframes red {
-  from {
-    left: -250%;
-    top: -300%;
-  }
-
     25% {
         left: -240%;
         top : -130%;
@@ -25,18 +20,13 @@
         top : -230%;
     }
 
-  to {
+    100% {
         left: -250%;
         top : -300%;
     }
 }
 
 @keyframes blue {
-  from {
-    left: -280%;
-    top: -80%;
-  }
-
     25% {
         left: -180%;
         top : -100%;
@@ -52,18 +42,13 @@
         top : -300%;
     }
 
-  to {
+    100% {
         left: -280%;
         top : -80%;
     }
 }
 
 @keyframes green {
-  from {
-    left: -180%;
-    top: -100%;
-  }
-
     25% {
         left: -120%;
         top : -250%;
@@ -79,17 +64,13 @@
         top : -80%;
     }
 
-  to {
+    100% {
         left: -180%;
         top : -100%;
     }
 }
 
-@keyframes background {
-  from {
-    background-color: #ff5c5c;
-  }
-
+@keyframes wrap-background {
     25% {
         background-color: #9395ff;
     }
@@ -102,100 +83,58 @@
         background-color: #534eff;
     }
 
-  to {
+    100% {
         background-color: #ff5c5c;
     }
 }
 
-body {
-  height: 100vh;
-  margin: unset;
-  background: #222;
-}
-
-main {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-#authentication {
-  width: 40vw;
-  margin: auto auto;
-}
-
-#authentication > h1 {
-  margin: unset;
-  color: #fff;
-}
-
-#authentication > h1.header {
-  width: 100%;
-  height: 60px;
-  padding-bottom: 0.3ex;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#authentication > h1.header.gradient {
-  z-index: -2000;
+:is(div, section).gradient {
     position                 : relative;
     overflow                 : hidden;
-  animation-duration: 65s;
-  animation-name: background;
+    animation-duration       : 30s;
+    animation-name           : wrap-background;
     animation-iteration-count: infinite;
     background-repeat        : no-repeat;
     animation-timing-function: ease-in-out;
+    background-color         : #ff5c5c;
 }
 
-#authentication > h1.header.gradient > div {
+:is(div, section).gradient>div:not(.gradient) {
     z-index                  : -1000;
     width                    : 500%;
     height                   : 500%;
     position                 : absolute;
     pointer-events           : none;
-  animation-duration: 25s;
+    filter                   : blur(200px);
+    animation-duration       : 12s;
     background-repeat        : no-repeat;
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }
 
-#authentication > h1.header.gradient > div.red {
+:is(div, section).gradient>div.red {
+    left          : -250%;
+    top           : -300%;
     animation-name: red;
-  background-image: radial-gradient(
-    circle,
+    background-image: radial-gradient(circle,
             rgba(255, 25, 25, 1) 0%,
-    rgba(0, 0, 0, 0) 35%
-  );
+            rgba(0, 0, 0, 0) 35%);
 }
 
-#authentication > h1.header.gradient > div.blue {
+:is(div, section).gradient>div.blue {
+    left          : -280%;
+    top           : -80%;
     animation-name: blue;
-  background-image: radial-gradient(
-    circle,
+    background-image: radial-gradient(circle,
             rgba(25, 25, 255, 0.6) 0%,
-    rgba(0, 0, 0, 0) 35%
-  );
+            rgba(0, 0, 0, 0) 35%);
 }
 
-#authentication > h1.header.gradient > div.green {
+:is(div, section).gradient>div.green {
+    left          : -180%;
+    top           : -100%;
     animation-name: green;
-  background-image: radial-gradient(
-    circle,
+    background-image: radial-gradient(circle,
             rgba(25, 255, 25, 1) 0%,
-    rgba(0, 0, 0, 0) 35%
-  );
-}
-
-#authentication > div.content {
-  height: 300px;
-  background: #1c1b1b;
-}
-
-@media (max-height: 400px) {
-  #authentication {
-    width: 80vw;
-    margin: 25vh auto;
-  }
+            rgba(0, 0, 0, 0) 35%);
 }