Edited: Login and Signup pages are now styled, Added: App logo

public/css/global.css

@@ -0,0 +1,20 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
+
+body {
+  font-family: "Open Sans", serif;
+  background-color: var(--clr-primary);
+}
+
+a,
+p,
+label,
+h1 {
+  color: white;
+}
+
+a,
+p,
+label,
+div {
+  font-size: 14px;
+}

public/css/login.css

@@ -0,0 +1,62 @@
+.signin {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+}
+
+body {
+  background-color: var(--clr-secondary);
+}
+
+.signin .header-form {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+
+.signin .header-form img {
+  height: 5rem;
+  margin-bottom: 2rem;
+}
+
+.signin form {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: var(--clr-tertiary);
+  gap: .5rem;
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+}
+
+.signin form input {
+  background-color: var(--clr-secondary);
+  caret-color: white;
+  color: white;
+  padding: .3rem;
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border);
+  width: 15rem;
+}
+
+.signin form input[type="submit"] {
+  background-color: var(--clr-green);
+  color: white;
+}
+
+.signin .error {
+  width: 17rem;
+  padding: 1rem;
+  background-color: var(--clr-danger-muted);
+  border-radius: var(--border-radious);
+  border: var(--borderWidth-thin) solid var(--clr-border-danger);
+  margin-bottom: 1rem;
+  color: white;
+}
+
+.signin small.error {
+  width: 15rem;
+}

public/css/main.css

@@ -0,0 +1,13 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+main {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 0 var(--container-size);
+}

public/css/vars.css

@@ -0,0 +1,13 @@
+:root {
+  --container-size: 5vw;
+  --clr-primary: #010409;
+  --clr-secondary: #0d1117;
+  --clr-tertiary: #151b23;
+  --clr-green: #238636;
+  --clr-danger-muted: #f851491a;
+
+  --border-radious: 5px;
+  --borderWidth-thin: max(1px, 0.0625rem);
+  --clr-border: #3d444db3;
+  --clr-border-danger: #f8514966;
+}