Resolve "As a client I want gamification of the badges, so that users remain engaged."

Closes #50 (closed)

src/main/resources/static/css/userProfile.css

@@ -39,8 +39,11 @@
 }
 
 body {
-    background: linear-gradient(135deg, #d295e9, #53166a);
+    background: linear-gradient(135deg, #f7e8fd, #9914d1);
     height: 100svh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
 }
 main {
     background: linear-gradient(to bottom, #1e1e1e 10%, darkgoldenrod 50%, #1e1e1e 90%);
@@ -52,6 +55,8 @@ main {
     margin-top: 6em;
     padding-inline: 1vw;
     box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
+
+
 }
 .userInfo {
     display: flex;
@@ -259,17 +264,16 @@ header .footerButton:hover {
     margin-block: 5svh;
     display: flex;
     text-align: center;
-    justify-content: left;
-    background: #c45cef;
+    justify-content: center;
+    background: rgba(196, 92, 239, 0.75);
     padding: 2em;
-
-    width: auto;
-    height: auto;
+    flex: 0 0;
     border-radius: 1vw;
     box-shadow: rgba(0, 0, 0, 0.7) 0 0.5svh max(1vw, 1em);
     & h2 {
-        margin-left: 1vw;
+        margin-left: 0;
         margin-right: auto;
+        margin-bottom: 0.5em;
     }
     & form{
         margin-block: auto;
@@ -300,6 +304,8 @@ header .footerButton:hover {
         width: 40vw;
         border-radius: 0.2em;
         padding-inline: 0.4em;
+        border: transparent solid 0.1em;
+        margin-bottom: 1em;
     }
     & button {
         font-size: 1em;
@@ -318,4 +324,39 @@ header .footerButton:hover {
         background-color: var(--accent-border);
         border: 0.1em solid var(--accent-colour);
     }
+}
+.label {
+    position: relative;
+}
+.invalid-tooltip {
+    color: red;
+    width: fit-content;
+    opacity: 0;
+    font-size: 0.6em;
+    text-shadow: red 0 0.2em 1em;
+    transition: 0.3s ease-in-out 1ms;
+    padding:0.1em;
+    position: absolute;
+    right: 0.2em;
+    bottom: 0.2em;
+    height: fit-content;
+}
+.invalid-field {
+    box-shadow: red 0 0 1em;
+    transition: 0.3s ease-in-out 1ms;
+}
+.valid-field {
+    box-shadow: #40ff00 0 0 1em;
+    border: #40ff00 solid 0.1em;
+    transition: 0.3s ease-in-out 1ms;
+}
+
+#invalidLogin {
+    color: red;
+    text-shadow: black 0 0.1em 0.2em;
+    width: auto;
+    height: auto;
+    font-size: 0.6em;
+    opacity: 0;
+    transition: 0.5s ease-in-out 1ms;
 }
\ No newline at end of file