Account creation and login now works

style.css

@@ -11,7 +11,17 @@
     --button-margin: 0.4rem;
     --icon-button-height: 3.4rem;
     --button-height: 2.4rem;
-    --border-width: 0.09rem
+    --border-width: 0.09rem;
+
+    --big-default: rgb(207 207 207);
+    --big-red: rgb(202 0 0);
+    --big-green: rgb(25 189 0);
+}
+.red {
+    color: var(--big-red);
+}
+.mininote {
+    font-size: 80%;
 }
 html {
     font-size: max(16px, calc(100vw / 120));
@@ -38,6 +48,7 @@ button, input {
     background-color: rgba(255, 255, 255, 0.05);
     margin: var(--button-margin);
     padding: var(--button-margin);
+    padding-left: calc(var(--button-margin) * 2);
     height: var(--button-height);
     display: flex;
     cursor: pointer;
@@ -148,4 +159,53 @@ hr {
     border-bottom: var(--border-width) solid var(--light-border-color);
     width: 60%;
     margin-left: 20%;
+}
+
+
+
+#notification-container {
+    position: fixed;
+    top: 2vw;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1500;
+    display: flex;
+    flex-direction: column;
+    gap: 1vw;
+    pointer-events: none;
+    align-items: center;
+}
+
+.notification {
+    background: rgba(10, 10, 14, 0.7);
+    backdrop-filter: blur(1rem);
+    -webkit-backdrop-filter: blur(1rem);
+    border: 0.1rem solid var(--light-border-color);
+    border-radius: 0.8rem;
+    padding: 1rem 2rem;
+    color: var(--text-color);
+    font-size: 1.1rem;
+    text-align: center;
+    box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.5);
+
+    opacity: 0;
+    transform: translateY(-5vw);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.notification.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.notification.info {
+    border-color: var(--big-default);
+}
+
+.notification.error {
+    border-color: var(--big-red);
+}
+
+.notification.success {
+    border-color: var(--big-green);
 }