body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: larger;
}

header {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.banner-image {
    max-width: 100%;
    height: auto;
}

/* Stylizacja menu nawigacyjnego */
nav {
    background-color: #fdfda2;
    display: flex;
    flex-wrap: wrap; /* Pozwala łamać menu w małych ekranach */
    justify-content: center;
    padding: 10px 0;
}

nav a {
    color: #000;
    text-decoration: none;
    padding: 10px 29px;
    margin: 0 31px;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #ffffff;
    border-radius: 5px;
}

/* Kontener dla nagłówka i obrazu */
.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-container img {
    margin: 0px;
    margin-right: 300px; 
}

h1 {
    font-weight: 700;
    margin-right: 490px;
}

/* Główny kontener sekcji */
.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 10px 2px; /* Zmniejszony margines wokół kontenera */
}

#lewy, #prawy {
    flex: 1;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Stylizacja obrazka w sekcji #lewy */
#lewy img {
    margin-bottom: 50px; /* Zmniejszenie odstępu między obrazkiem a tekstem */
}

#prawy {
    max-width: 750px; /* Dostosuj tę wartość do szerokości banera */
    padding: 10px; /* Ustawienie paddingu, aby tekst był w obrębie "borderu" */  
    text-overflow: ellipsis; /* Dodaje wielokropek, gdy tekst jest przycinany */
    white-space: normal; /* Pozwala na łamanie tekstu w nowej linii */
}

li {
    display: list-item;
    unicode-bidi: isolate;
    text-align: justify;
}

/* Stylizacja obrazków */
img {
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* Dodanie odstępu na urządzenia mobilne */
@media (max-width: 767px) {
    body {
        padding-left: 10px; /* Dodaje odstęp z lewej strony */
        padding-right: 10px; /* Dodaje odstęp z prawej strony */
    }

    /* Dodatkowy odstęp w sekcji #prawy */
    #prawy {
        padding-left: 15px; /* Dodaje większy odstęp w sekcji tekstowej */
        padding-right: 15px; /* Dodaje większy odstęp po prawej stronie */
    }

    /* Zmiany w menu nawigacyjnym */
    nav {
        flex-direction: column; /* Menu będzie układało się pionowo na małych ekranach */
    }

    /* Zmiany w nagłówku */
    .header-container {
        flex-direction: column;
    }

    .header-container img {
        margin-right: 0; /* Usunięcie marginesu po prawej stronie obrazu w nagłówku */
    }

    h1 {
        margin-right: 0; /* Usunięcie marginesu po prawej stronie nagłówka */
    }

    /* Zmiana rozmiaru obrazka w sekcji #lewy */
    #lewy img {
        width: 100%; /* Obrazek zajmuje całą szerokość kontenera */
    }

    /* Zmiana rozmiaru sekcji #prawy */
    #prawy {
        max-width: 100%; /* Sekcja #prawy zajmuje całą szerokość ekranu */
    }

    /* Dodatkowe style na małych ekranach */
    footer {
        text-align: center;
        padding: 10px 0;
    }

    footer p {
        font-size: 14px;
    }
}