| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- /* General Reset */
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: Arial, sans-serif;
- }
- body {
- display: grid;
- place-items: center;
- min-height: 100vh;
- background-color: #f4f4f9;
- margin: 0;
- }
- .container {
- background: white;
- padding: 20px;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 400px;
- display: grid;
- grid-template-rows: auto 1fr;
- gap: 20px;
- }
- .form {
- display: grid;
- grid-template-rows: repeat(4, auto);
- gap: 15px;
- }
- h2 {
- text-align: center;
- color: #333;
- margin-bottom: 10px;
- }
- .input-group {
- display: grid;
- grid-template-rows: auto auto;
- gap: 10px;
- margin-top: 10px;
- }
- .input-group label {
- font-size: 14px;
- color: #555;
- }
- .input-group input {
- padding: 10px;
- border: 1px solid #ccc;
- border-radius: 4px;
- font-size: 14px;
- transition: border-color 0.3s;
- }
- .input-group input:focus {
- border-color: #6c63ff;
- outline: none;
- }
- button {
- margin-top: 40px;
- padding: 10px;
- border: none;
- background: #6c63ff;
- color: white;
- font-size: 16px;
- cursor: pointer;
- border-radius: 4px;
- transition: background 0.3s;
- }
- button:hover {
- background: #5750d9;
- }
- #btn-register {
- background: #e0e0e0;
- color: #333;
- margin-top: -10px; /* Adjust spacing between buttons */
- }
- #btn-register:hover {
- background: #cacaca;
- }
- #login-error {
- margin-top: 10px;
- color: red;
- }
|