first init

gradient.css

@@ -0,0 +1,201 @@
+@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+* {
+  font-family: "Commissioner", sans-serif;
+}
+
+@keyframes red {
+  from {
+    left: -250%;
+    top: -300%;
+  }
+
+  25% {
+    left: -240%;
+    top: -130%;
+  }
+
+  50% {
+    left: -100%;
+    top: -120%;
+  }
+
+  75% {
+    left: -160%;
+    top: -230%;
+  }
+
+  to {
+    left: -250%;
+    top: -300%;
+  }
+}
+
+@keyframes blue {
+  from {
+    left: -280%;
+    top: -80%;
+  }
+
+  25% {
+    left: -180%;
+    top: -100%;
+  }
+
+  50% {
+    left: -120%;
+    top: -250%;
+  }
+
+  75% {
+    left: -250%;
+    top: -300%;
+  }
+
+  to {
+    left: -280%;
+    top: -80%;
+  }
+}
+
+@keyframes green {
+  from {
+    left: -180%;
+    top: -100%;
+  }
+
+  25% {
+    left: -120%;
+    top: -250%;
+  }
+
+  50% {
+    left: -250%;
+    top: -300%;
+  }
+
+  75% {
+    left: -280%;
+    top: -80%;
+  }
+
+  to {
+    left: -180%;
+    top: -100%;
+  }
+}
+
+@keyframes background {
+  from {
+    background-color: #ff5c5c;
+  }
+
+  25% {
+    background-color: #9395ff;
+  }
+
+  50% {
+    background-color: #fff393;
+  }
+
+  75% {
+    background-color: #534eff;
+  }
+
+  to {
+    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: 80px;
+  padding-bottom: 0.3ex;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.8em;
+}
+
+#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;
+  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;
+  }
+}