/* Globalne ustawienia box-sizing */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 /* Globalne ustawienia, na wzór index.html */
 body {
     margin: 0;
     padding: 0;
     font-family: 'Segoe UI', Tahoma, sans-serif;
     background: url('/assets/img/baner_index.jpg') no-repeat center center;
     background-size: cover;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
 }

 /* Kontener formularza */
 #login-container {
     background-color: rgba(255, 255, 255, 0.8);
     border-radius: 8px;
     width: 100%;
     max-width: 400px;
     padding: 20px 30px;
     text-align: center;
 }

 #login-container h2 {
     margin-bottom: 20px;
     color: #333;
     font-size: 1.8rem;
 }

 /* Stylizacja formularza */
 #login-form {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }


 form input[type="email"],
 form input[type="password"],
 form input[type="hidden"] {
     padding: 10px;
     font-size: 1rem;
     border: 1px solid #ccc;
     border-radius: 4px;
     width: 100%;
 }

 form button {
     padding: 12px;
     font-size: 1rem;
     color: #fff;
     background-color: #5b5b5b;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s ease;
 }

 form button:hover {
     background-color: #838383;
 }

 .message {
     margin-bottom: 15px;
     font-size: 1rem;
 }

 @media (max-width: 480px) {
     #login-container {
         width: 90%;
         max-width: 300px;
         padding: 15px;
         border: none;
         border-radius: 5px;
         background-color: rgba(255, 255, 255, 0.9);
     }

     #login-container h2 {
         font-size: 1.5rem;
     }

     form input {
         font-size: 0.9rem;
         width: 100%;
     }

     form button {
         font-size: 0.9rem;
         width: 100%;
     }

     .message {
         font-size: 0.9rem;
     }
 }