diff --git a/gradient.css b/gradient.css
index 988a8d2..d452633 100644
--- a/gradient.css
+++ b/gradient.css
@@ -5,197 +5,136 @@
 }
 
 @keyframes red {
-  from {
-    left: -250%;
-    top: -300%;
-  }
+    25% {
+        left: -240%;
+        top : -130%;
+    }
 
-  25% {
-    left: -240%;
-    top: -130%;
-  }
+    50% {
+        left: -100%;
+        top : -120%;
+    }
 
-  50% {
-    left: -100%;
-    top: -120%;
-  }
+    75% {
+        left: -160%;
+        top : -230%;
+    }
 
-  75% {
-    left: -160%;
-    top: -230%;
-  }
-
-  to {
-    left: -250%;
-    top: -300%;
-  }
+    100% {
+        left: -250%;
+        top : -300%;
+    }
 }
 
 @keyframes blue {
-  from {
-    left: -280%;
-    top: -80%;
-  }
+    25% {
+        left: -180%;
+        top : -100%;
+    }
 
-  25% {
-    left: -180%;
-    top: -100%;
-  }
+    50% {
+        left: -120%;
+        top : -250%;
+    }
 
-  50% {
-    left: -120%;
-    top: -250%;
-  }
+    75% {
+        left: -250%;
+        top : -300%;
+    }
 
-  75% {
-    left: -250%;
-    top: -300%;
-  }
-
-  to {
-    left: -280%;
-    top: -80%;
-  }
+    100% {
+        left: -280%;
+        top : -80%;
+    }
 }
 
 @keyframes green {
-  from {
-    left: -180%;
-    top: -100%;
-  }
+    25% {
+        left: -120%;
+        top : -250%;
+    }
 
-  25% {
-    left: -120%;
-    top: -250%;
-  }
+    50% {
+        left: -250%;
+        top : -300%;
+    }
 
-  50% {
-    left: -250%;
-    top: -300%;
-  }
+    75% {
+        left: -280%;
+        top : -80%;
+    }
 
-  75% {
-    left: -280%;
-    top: -80%;
-  }
-
-  to {
-    left: -180%;
-    top: -100%;
-  }
+    100% {
+        left: -180%;
+        top : -100%;
+    }
 }
 
-@keyframes background {
-  from {
-    background-color: #ff5c5c;
-  }
+@keyframes wrap-background {
+    25% {
+        background-color: #9395ff;
+    }
 
-  25% {
-    background-color: #9395ff;
-  }
+    50% {
+        background-color: #fff393;
+    }
 
-  50% {
-    background-color: #fff393;
-  }
+    75% {
+        background-color: #534eff;
+    }
 
-  75% {
-    background-color: #534eff;
-  }
-
-  to {
-    background-color: #ff5c5c;
-  }
+    100% {
+        background-color: #ff5c5c;
+    }
 }
 
-body {
-  height: 100vh;
-  margin: unset;
-  background: #222;
+:is(div, section).gradient {
+    position                 : relative;
+    overflow                 : hidden;
+    animation-duration       : 30s;
+    animation-name           : wrap-background;
+    animation-iteration-count: infinite;
+    background-repeat        : no-repeat;
+    animation-timing-function: ease-in-out;
+    background-color         : #ff5c5c;
 }
 
-main {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+:is(div, section).gradient>div:not(.gradient) {
+    z-index                  : -1000;
+    width                    : 500%;
+    height                   : 500%;
+    position                 : absolute;
+    pointer-events           : none;
+    filter                   : blur(200px);
+    animation-duration       : 12s;
+    background-repeat        : no-repeat;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
 }
 
-#authentication {
-  width: 40vw;
-  margin: auto auto;
+:is(div, section).gradient>div.red {
+    left          : -250%;
+    top           : -300%;
+    animation-name: red;
+    background-image: radial-gradient(circle,
+            rgba(255, 25, 25, 1) 0%,
+            rgba(0, 0, 0, 0) 35%);
 }
 
-#authentication > h1 {
-  margin: unset;
-  color: #fff;
+:is(div, section).gradient>div.blue {
+    left          : -280%;
+    top           : -80%;
+    animation-name: blue;
+    background-image: radial-gradient(circle,
+            rgba(25, 25, 255, 0.6) 0%,
+            rgba(0, 0, 0, 0) 35%);
 }
 
-#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;
-  position: relative;
-  overflow: hidden;
-  animation-duration: 65s;
-  animation-name: background;
-  animation-iteration-count: infinite;
-  background-repeat: no-repeat;
-  animation-timing-function: ease-in-out;
-}
-
-#authentication > h1.header.gradient > div {
-  z-index: -1000;
-  width: 500%;
-  height: 500%;
-  position: absolute;
-  pointer-events: none;
-  animation-duration: 25s;
-  background-repeat: no-repeat;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-}
-
-#authentication > h1.header.gradient > div.red {
-  animation-name: red;
-  background-image: radial-gradient(
-    circle,
-    rgba(255, 25, 25, 1) 0%,
-    rgba(0, 0, 0, 0) 35%
-  );
-}
-
-#authentication > h1.header.gradient > div.blue {
-  animation-name: blue;
-  background-image: radial-gradient(
-    circle,
-    rgba(25, 25, 255, 0.6) 0%,
-    rgba(0, 0, 0, 0) 35%
-  );
-}
-
-#authentication > h1.header.gradient > div.green {
-  animation-name: green;
-  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;
-  }
+:is(div, section).gradient>div.green {
+    left          : -180%;
+    top           : -100%;
+    animation-name: green;
+    background-image: radial-gradient(circle,
+            rgba(25, 255, 25, 1) 0%,
+            rgba(0, 0, 0, 0) 35%);
 }