body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; } .login-container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; margin: auto; /* Center the container horizontally */ } h1 { text-align: center; color: #333; } form { margin-top: 20px; } label { display: block; margin-bottom: 8px; color: #555; } input { width: calc(100% - 16px); /* Adjust the width and center the input */ padding: 8px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 4px; } button { background-color: #4caf50; color: #fff; padding: 10px; border: none; border-radius: 4px; cursor: pointer; width: 100%; } button:hover { background-color: #45a049; } .reset-link-container { text-align: center; margin-top: 10px; } .reset-link { color: #4caf50; text-decoration: underline; cursor: pointer; }