/* Tryb ciemny: bazowe ustawienia */

body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 0;

    background-color: #121212; /* Tło */

    color: #e0e0e0; /* Jasny tekst */

}



/* Kontener główny */

.container {

    max-width: 600px;

    margin: 20px auto;

    padding: 20px;

    background: #1e1e1e; /* Ciemne tło dla kontenera */

    border-radius: 10px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Subtelny cień */

}



/* Nagłówek */

header {

    text-align: center;

    margin-bottom: 20px;

}



header h1 {

    font-size: 2.5em;

    color: #ffffff; /* Biały nagłówek */

}



header p {

    color: #cccccc; /* Subtelny tekst pod nagłówkiem */

    font-size: 1.1em;

}



/* Przycisk */

.button {

    display: inline-block;

    text-decoration: none;

    padding: 10px 20px;

    margin: 10px;

    background: #333333; /* Ciemne tło przycisku */

    color: #ffffff; /* Biały tekst */

    border: 1px solid #444444; /* Subtelna ramka */

    border-radius: 5px;

    font-size: 1em;

    text-align: center;

    font-weight: bold;

    transition: background 0.3s ease, color 0.3s ease;

}



.button:hover {

    background: #555555; /* Jaśniejsze tło na hover */

    color: #e0e0e0; /* Subtelnie jaśniejszy tekst na hover */

}



.button:active {

    background: #222222; /* Przyciemnienie podczas kliknięcia */

    color: #ffffff; /* Biały tekst */

}



.auth-buttons{

    text-align: center;

}



/* Nawigacja */

.nav-links {

    text-align: center;

    margin-top: 20px;

}



.nav-links a {

    margin: 10px;

}



/* Sekcja informacji */

.info {

    text-align: center;

    margin-top: 20px;

}



.info h2 {

    color: #ffffff;

    font-size: 1.8em;

}



.info p {

    color: #cccccc;

    font-size: 1em;

    line-height: 1.5;

}



/* Stopka */

footer {

    text-align: center;

    margin-top: 30px;

    color: #888888;

    font-size: 0.9em;

}



/* Formularz logowania */

form {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 20px;

}



.form-group {

    display: flex;

    flex-direction: column;

}



label {

    color: #e0e0e0; /* Jasny kolor etykiet */

    margin-bottom: 5px;

    font-size: 1em;

}



input {

    padding: 10px;

    border: 1px solid #444444; /* Ciemne obramowanie */

    border-radius: 5px;

    background-color: #1e1e1e; /* Tło inputów */

    color: #e0e0e0; /* Jasny tekst w polach */

    font-size: 1em;

}



input::placeholder {

    color: #888888; /* Subtelny kolor placeholdera */

}



input:focus {

    border-color: #ffffff; /* Niebieskie obramowanie na focus */

    outline: none;

}



/* Link do rejestracji */

.register-link {

    text-align: center;

    margin-top: 20px;

}



.register-link p {

    color: #cccccc;

}



.register-link a {

    font-weight: bold;

}



.register-link a:hover {

    color: #a80000;

}

a {

    text-decoration: none;

    color: #ffffff;

}