/* start_css.css */

/* --- Ogólne style dla całej strony --- */
body {
    font-family: Arial, sans-serif;
    background-color: #cacaca; /* Tło strony (jasny szary) */
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* Ułożenie elementów w kolumnie: nagłówek, główna sekcja, stopka */
    min-height: 100vh; /* Zapewnia, że stopka jest zawsze na dole strony */
}

/* --- Nagłówek --- */
header {
    background-color: #808080; /* Ciemniejszy odcień szarości dla nagłówka */
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Delikatny cień pod nagłówkiem */
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

/* --- Kontener dla głównej treści (gdzie będzie menu) --- */
/* To jest ten blok, który ma być po lewej stronie */
.container {
    flex-grow: 1; /* Pozwala temu elementowi zająć całą dostępną przestrzeń pionową */
    max-width: 400px; /* ZWIĘKSZONA SZEROKOŚĆ DLA TEKSTU */
    margin-top: 30px; /* Margines od góry */
    margin-bottom: 30px; /* Margines od dołu */
    margin-left: 20px; /* Odsunięcie od lewej krawędzi strony */
    margin-right: auto; /* Przesuwa kontener do lewej */
    padding: 20px;
    background-color: #d8d8d8; /* Jasniejsze tło dla menu */
    border-radius: 10px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Cieć pod kontenerem */
}

/* --- Lista zadań w głównej treści --- */
.task-list h2 {
    text-align: left; /* Wyrównanie do lewej */
    color: #111111;
    margin-bottom: 25px;
    font-size: 1.8em;
    padding-left: 5px; /* Odsunięcie od lewego marginesu o 5px */
}

.task-list ul {
    list-style: none; /* Usuwa domyślne kropki listy */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Elementy w kolumnie */
    gap: 15px; /* Odstęp między przyciskami */
}

.task-list li {
    width: 100%; /* Przyciski zajmują całą dostępną szerokość */
}

/* Styl dla przycisków zadań */
.task-button {
    display: block; /* Sprawia, że link zachowuje się jak blok, wypełniając dostępną szerokość */
    padding: 15px 20px;
    background-color: #999999; /* Domyślny kolor przycisku (szary) */
    color: white;
    text-decoration: none; /* Usuwa podkreślenie linku */
    border-radius: 8px; /* Zaokrąglone rogi */
    font-size: 1.1em;
    font-weight: bold;
    text-align: left; /* Tekst wyrównany do lewej */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Płynne przejścia dla hover */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Delikatny cień przycisku */
}

.task-button:hover {
    background-color: #7d96b3; /* Kolor po najechaniu (niebiesko-szary) */
    transform: translateY(-2px); /* Delikatne uniesienie przycisku */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* Mocniejszy cień po najechaniu */
}

/* --- Stopka --- */
footer {
    background-color: #555555; /* Ciemniejszy odcień szarości dla stopki */
    color: white;
    padding: 15px;
    margin-top: auto; /* Przesuwa stopkę na sam dół */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Cieć nad stopką */
    text-align: left; /* Wyrównanie tekstu w stopce do lewej */
}

footer p {
    margin: 0; /* Usuwa domyślny margines z paragrafu w stopce */
    padding-left: 20px; /* Dodaje padding, aby tekst nie był przy samej krawędzi */
}

/* --- Responsywność dla mniejszych ekranów --- */
@media (max-width: 768px) {
    .container {
        margin: 15px auto; /* Wyśrodkowanie na mobilnych */
        padding: 15px;
        max-width: 95%; /* Pełniejsza szerokość na mobilnych */
        border-radius: 0; /* Brak zaokrąglonych rogów na małych ekranach */
    }

    .task-list h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
        padding-left: 0; /* Usuń odsunięcie na mobilnych, aby lepiej wykorzystać przestrzeń */
        text-align: center; /* Wyśrodkuj na mobilnych */
    }

    .task-list ul {
        gap: 10px;
    }

    .task-button {
        font-size: 1em;
        padding: 12px 15px;
        text-align: center; /* Wyśrodkuj tekst przycisków na mobilnych */
    }

    footer p {
        padding-left: 10px;
    }
}