/* style.css */

/* Ogólne style dla całej strony */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Bardziej nowoczesna czcionka */
    margin: 0; /* Usuwamy domyślne marginesy przeglądarki */
    padding: 20px; /* Dodajemy padding, żeby treść nie przyklejała się do krawędzi okna */
    background-color: #e9ecef; /* Jasnoszary, subtelny kolor tła */
    color: #343a40; /* Ciemny tekst dla kontrastu */
    line-height: 1.6; /* Zwiększamy odstępy między liniami dla lepszej czytelności */
}

/* Styl dla głównego kontenera treści */
.container {
    max-width: 800px; /* Maksymalna szerokość kontenera */
    margin: 20px auto; /* Wyśrodkowanie kontenera i marginesy góra/dół */
    background-color: #ffffff; /* Białe tło dla treści */
    padding: 30px; /* Wewnętrzne odstępy */
    border-radius: 10px; /* Lekko zaokrąglone rogi */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Delikatny cień dla efektu głębi */
}

/* Style nagłówków */
h1, h2 {
    color: #007bff; /* Niebieski kolor dla nagłówków */
    text-align: center; /* Wyśrodkowanie nagłówków */
    margin-bottom: 25px; /* Odstęp pod nagłówkiem */
}

h1 {
    font-size: 2.5em; /* Większy rozmiar dla głównego nagłówka */
    border-bottom: 2px solid #007bff; /* Linia pod nagłówkiem */
    padding-bottom: 10px;
}

h2 {
    font-size: 2em; /* Mniejszy rozmiar dla drugiego nagłówka */
}

/* Style dla obrazka */
img {
    max-width: 100%; /* Obrazek nigdy nie będzie szerszy niż jego kontener */
    height: auto; /* Zachowanie proporcji */
    display: block; /* Obrazek jako element blokowy, ułatwia centrowanie */
    margin: 0 auto 25px auto; /* Wyśrodkowanie obrazka i odstęp pod nim */
    border-radius: 8px; /* Zaokrąglone rogi obrazka */
    border: 1px solid #dee2e6; /* Delikatna ramka */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Lekki cień */
}

/* Styl dla opisu zdjęcia */
.description {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 40px;
    text-align: justify; /* Wyrównanie do lewej i prawej */
    color: #495057; /* Ciemniejszy odcień szarości dla lepszej czytelności */
}

/* Styl dla linii poziomej */
hr {
    border: 0;
    height: 1px;
    background-color: #ced4da; /* Szary kolor linii */
    margin: 40px 0; /* Odstępy góra/dół */
}

/* Style formularza */
form p {
    margin-bottom: 15px; /* Odstępy między polami formularza */
}

form label {
    display: block; /* Etykieta nad polem */
    margin-bottom: 8px;
    font-weight: bold;
    color: #495057;
}

form input[type="text"],
form input[type="email"],
form textarea {
    width: calc(100% - 20px); /* Szerokość pola z uwzględnieniem paddingu */
    padding: 10px;
    border: 1px solid #ced4da; /* Ramka pola */
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Ważne, aby padding nie powiększał pola poza width */
}

form textarea {
    resize: vertical; /* Pozwalamy użytkownikowi zmieniać wysokość textarea */
    min-height: 100px; /* Minimalna wysokość textarea */
}

form input[type="submit"] {
    background-color: #28a745; /* Zielony kolor przycisku */
    color: white; /* Biały tekst */
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer; /* Kursor dłoni po najechaniu */
    transition: background-color 0.3s ease; /* Płynne przejście koloru po najechaniu */
    display: block; /* Przycisk jako element blokowy */
    margin: 25px auto 0 auto; /* Wyśrodkowanie przycisku i odstęp góra/dół */
}

form input[type="submit"]:hover {
    background-color: #218838; /* Ciemniejszy zielony po najechaniu */
}