<!-- CSS dla modala -->

.modal {
    position: fixed; 
    z-index: 1000; 
    left: 0; top: 0;
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.5);
    display: none; /* Modal ukryty domyślnie */
}

.modal-content {
    background: #fff;
    margin: 10% auto; 
    padding: 20px;
    border-radius: 8px;
    width: 50%; 
    box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
    text-align: center;
    position: relative; /* Dodajemy relative do kontenera, aby przycisk mógł być umiejscowiony w prawym górnym rogu */
}

.close {
    position: absolute; /* Ustawienie w prawym górnym rogu */
    top: 0px; 
    right: 10px; /* Ustawienie w prawym górnym rogu */
    font-size: 40px; /* Większy rozmiar przycisku */
    font-weight: bold;
    color: #333; /* Kolor przycisku */
    background: none; /* Brak tła */
    border: none; /* Brak obramowania */
    cursor: pointer;
    transition: color 0.3s; /* Dodanie efektu zmiany koloru przy najechaniu */
}

.close:hover {
    color: #e74c3c; /* Zmiana koloru przycisku na czerwony przy najechaniu */
}

@media (max-width: 768px) {
    .modal-content {
        width: 80%; /* Zwiększenie szerokości modalu na mniejszych ekranach */
        margin: 20% auto; /* Przesunięcie w dół, aby było lepiej widoczne */
    }
    .close {
        top: -5px; /* Przyciski wyżej na ekranach mniejszych niż 768px */
        font-size: 45px; /* Większy przycisk na urządzeniach mobilnych */
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 90%; /* Jeszcze większa szerokość dla bardzo małych ekranów */
        margin: 30% auto; /* Większy margines na bardzo małych ekranach */
    }
    .close {
        top: -10px; /* Jeszcze wyżej na urządzeniach mobilnych o szerokości mniejszej niż 480px */
        font-size: 50px; /* Zwiększenie rozmiaru przycisku na małych ekranach */
    }
}