Changed around line 1
+ :root {
+ --primary-color: #6c5ce7;
+ --secondary-color: #a29bfe;
+ --background-color: #f5f6fa;
+ --text-color: #2d3436;
+ --shadow-color: rgba(108, 92, 231, 0.2);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Arial', sans-serif;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 20px;
+ }
+
+ .header {
+ text-align: center;
+ margin-bottom: 40px;
+ }
+
+ .highlight {
+ color: var(--primary-color);
+ }
+
+ .container {
+ width: 100%;
+ max-width: 400px;
+ }
+
+ .login-box {
+ background: white;
+ padding: 30px;
+ border-radius: 15px;
+ box-shadow: 0 10px 30px var(--shadow-color);
+ animation: fadeIn 1s ease-in-out;
+ }
+
+ .login-header {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .icons {
+ display: flex;
+ justify-content: center;
+ gap: 15px;
+ margin-top: 10px;
+ }
+
+ .icon {
+ width: 24px;
+ height: 24px;
+ background-size: cover;
+ }
+
+ .user-icon {
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhNSA1IDAgMTAwIDEwIDUgNSAwIDAwMC0xMHptMCA4YTQgNCAwIDExMC04IDQgNCAwIDAxMCA4eiIgZmlsbD0iIzZjNWNlNyIvPjwvc3ZnPg==');
+ }
+
+ .lock-icon {
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDhoLTFWM2EzIDMgMCAwMC0zLTNoLThhMyAzIDAgMDAtMyAzdjVoLTFhMiAyIDAgMDAtMiAydjEwYTIgMiAwIDAwMiAyaDEyYTIgMiAwIDAwMi0yVjEwYTIgMiAwIDAwLTItMnptLTYgOWEyIDIgMCAxMTAtNCAyIDIgMCAwMTAgNHoiIGZpbGw9IiM2YzVjZTciLz48L3N2Zz4=');
+ }
+
+ .input-group {
+ margin-bottom: 20px;
+ }
+
+ .input-group label {
+ display: block;
+ margin-bottom: 5px;
+ }
+
+ .input-group input {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid var(--secondary-color);
+ border-radius: 5px;
+ font-size: 16px;
+ }
+
+ .submit-btn {
+ width: 100%;
+ padding: 10px;
+ background-color: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 5px;
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .submit-btn:hover {
+ background-color: var(--secondary-color);
+ }
+
+ .login-footer {
+ text-align: center;
+ margin-top: 20px;
+ }
+
+ .login-footer a {
+ color: var(--primary-color);
+ text-decoration: none;
+ }
+
+ .footer {
+ text-align: center;
+ margin-top: 40px;
+ color: var(--secondary-color);
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ @media (max-width: 480px) {
+ .login-box {
+ padding: 20px;
+ }
+ }