diff --git a/public/login.html b/public/login.html
index 417e318fddcfa7d061c51089c0fc9e326dcc5cb7..85b837274eb304328e995406ec7fa9cf1af5cfe2 100644
--- a/public/login.html
+++ b/public/login.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
- <link rel="stylesheet" href="styles/login.css">
+ <link rel="stylesheet" href="styles/login®ister.css">
</head>
<body>
<div class="login-container">
diff --git a/public/register.html b/public/register.html
index 1775610c8bfaa44ee1cf8d467d7c30278274b72d..5d73ed02487a0574d22f37a5cb5a325c56a98c35 100644
--- a/public/register.html
+++ b/public/register.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
- <link rel="stylesheet" href="styles/register.css">
+ <link rel="stylesheet" href="styles/login®ister.css">
<script>
function validatePassword() {
var password = document.getElementById('password').value;
diff --git a/public/styles/login®ister.css b/public/styles/login®ister.css
new file mode 100644
index 0000000000000000000000000000000000000000..e1580bb17b7e58238cbf315a450686942ab81866
--- /dev/null
+++ b/public/styles/login®ister.css
@@ -0,0 +1,93 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: linear-gradient(135deg, #ff7e5f, #feb47b);
+}
+
+/* Container for the form */
+.container {
+ width: 100%;
+ max-width: 450px;
+ padding: 40px;
+ background-color: white;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ border-radius: 12px;
+ text-align: center;
+ box-sizing: border-box;
+}
+
+/* Heading */
+h2 {
+ font-size: 28px;
+ margin-bottom: 30px;
+ color: #333;
+ font-weight: 600;
+}
+
+/* Input fields */
+input {
+ width: 100%;
+ padding: 15px;
+ margin: 10px 0;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ font-size: 16px;
+ transition: all 0.3s ease-in-out;
+}
+
+/* Focus state for inputs */
+input:focus {
+ outline: none;
+ border-color: #ff7e5f;
+ box-shadow: 0 0 5px rgba(255, 126, 95, 0.6);
+}
+
+/* Submit button */
+button {
+ width: 100%;
+ padding: 15px;
+ background-color: #ff7e5f;
+ color: white;
+ font-size: 18px;
+ font-weight: 500;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+/* Hover effect for button */
+button:hover {
+ background-color: #feb47b;
+}
+
+/* Forgot password and other links */
+a {
+ color: #ff7e5f;
+ font-size: 14px;
+ text-decoration: none;
+ transition: color 0.3s ease;
+}
+
+a:hover {
+ color: #feb47b;
+}
+
+/* Error message */
+.error-message {
+ color: #ff4d4d;
+ font-size: 14px;
+ margin-top: 10px;
+}
+
+/* Responsive design */
+@media (max-width: 600px) {
+ .container {
+ padding: 30px;
+ }
+}
\ No newline at end of file