frontend redesign

app/static/animations.css

@@ -1,3 +1,9 @@
+@keyframes blink {
+  0% {
+    opacity: 0;
+  }
+}
+
 @keyframes colorAnimation {
   100%,
   0% {

app/static/global.css

@@ -2,31 +2,33 @@
 @import "./font.css";
 
 :root {
-  --white: #ffffff;
   --yellow: #d3b910;
   --cyan: #0dd2e8;
   --green: #06e00a;
   --pinkish: #d506e0;
   --red: #e8180d;
-  --blue: #0536fc;
+  --blue: #2036f9;
 
-  --dark-one: #000000;
-  --dark-two: #050505;
-  --dark-three: #121212;
-  --dark-four: #101010;
-  --dark-fife: #3a3b3c;
-  --dark-six: #c0c0c0;
+  --white-1: #ffffff;
+  --white-2: #bfbfbf;
+  --white-3: #5f5f5f;
+  --white-4: #0f0f0f;
 
-  --radius: 8px;
-  /*
-  old shadow animation
-  --def-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
-    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
-    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
-  */
-  --text-shadow: 0px 10px 20px rgba(90, 90, 90, 0.8);
+  --black-1: #000000;
+  --black-2: #050505;
+  --black-3: #111111;
+  --black-4: #3a3b3c;
+
+  --size-1: 8px;
+  --size-2: 16px;
+  --size-3: 18px;
+  --size-4: 20px;
+  --size-5: 24px;
+  --size-6: 30px;
+  --size-7: 50px;
+
+  --text-shadow: 0px 5px 20px rgba(90, 90, 90, 0.8);
   --box-shadow: rgba(20, 20, 20, 0.19) 0px 10px 20px, rgba(30, 30, 30, 0.23) 0px 6px 6px;
-  --border-color: #2f2f2f;
 }
 
 * {
@@ -35,7 +37,7 @@
 }
 
 body {
-  background: var(--dark-one);
+  background: var(--black-1);
   font-family: "Ubuntu", sans-serif;
   overflow-x: hidden;
   height: 100vh;
@@ -44,7 +46,6 @@ body {
 
 ::selection {
   background: rgba(100, 100, 100, 0.5);
-  text-decoration: underline;
 }
 
 ::-webkit-scrollbar {
@@ -54,16 +55,45 @@ body {
 
 ::-webkit-scrollbar-track {
   border-radius: 10px;
-  background: #181818;
+  background: var(--black-1);
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background: #282828;
+  background: var(--black-2);
 }
 
-.glitch {
-  animation-name: colorAnimation;
-  animation-iteration-count: infinite;
-  animation-duration: 10s;
+a {
+  font-weight: 900;
+  color: var(--white-1);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration: underline;
+  text-shadow: var(--text-shadow);
+}
+
+i .nf {
+  font-weight: 900;
+}
+
+ul {
+  list-style: inside;
+  margin: 12px 0 12px 0;
+}
+
+li + li {
+  margin-top: 10px;
+}
+
+input {
+  background: var(--black-3);
+  border: none;
+  outline: none;
+  font-size: var(--size-4);
+  padding: 10px;
+  border: solid 1px var(--black-4);
+  color: var(--white-1);
 }