Create the style for the login page

src/routes/login/+page.svelte

@@ -1,19 +1,124 @@
 <script>
+    import "$lib/global.css";
+    import favicon from "$lib/assets/favicon.png";
+
+    let email = $state("");
+    let password = $state("");
+
     const submit = async ()=>{
         console.log("submit");
     }
 </script>
 
 <main>
-    <form class="standardForm" onsubmit={submit}>
-        <label>Email:
-            <input bind:value={email} type="email" required>
-        </label>
+    <a href="/" class="logo">
+        <span class="logo-icon">
+            <img src={favicon} alt="ChatRPG logo" width="35" height="35" />
+        </span>
+        <span class="logo-text">ChatRPG</span>
+    </a>
+
+    <div class="form-glow">
+        <form class="standardForm" onsubmit={submit}>
+            <h2>Welcome Back</h2>
+
+            <label>Email
+                <input bind:value={email} type="email" required>
+            </label>
 
-        <label>Password:
-            <input bind:value={password} type="password" required>
-        </label>
+            <label>Password
+                <input bind:value={password} type="password" required>
+            </label>
 
-        <button>Log In</button>
-    </form>
+            <button type="submit">Log In</button>
+
+            <p>Don't have an account? <a href="/register">Sign up</a></p>
+        </form>
+    </div>
 </main>
+
+<style>
+    main {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1.75rem;
+        padding: 2rem 1rem;
+    }
+
+    a.logo {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        text-decoration: none;
+        color: #e5e5ea;
+        font-weight: 700;
+        font-size: 32px;
+        letter-spacing: -0.5px;
+    }
+
+    a.logo img {
+        width: 48px;
+        height: 48px;
+    }
+
+    a.logo .logo-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    h2 {
+        text-align: center;
+    }
+
+    .form-glow {
+        position: relative;
+        border-radius: 14px;
+        width: min(660px, 100%);
+    }
+
+    .form-glow::before {
+        content: "";
+        position: absolute;
+        inset: -2px;
+        border-radius: 14px;
+        background: conic-gradient(
+            from var(--angle, 0deg),
+            transparent 0%,
+            #c084fc 20%,
+            #5a5aff 40%,
+            transparent 60%
+        );
+        animation: spin-border 10s linear infinite;
+        z-index: 0;
+    }
+
+    .form-glow::after {
+        content: "";
+        position: absolute;
+        inset: 1px;
+        border-radius: 13px;
+        background: #1a1a2e;
+        z-index: 1;
+    }
+
+    .form-glow .standardForm {
+        position: relative;
+        z-index: 2;
+        border-color: transparent;
+        max-width: 660px;
+    }
+
+    @property --angle {
+        syntax: "<angle>";
+        inherits: false;
+        initial-value: 0deg;
+    }
+
+    @keyframes spin-border {
+        to { --angle: 360deg; }
+    }
+</style>