html {
    min-height: 100%; /* Ustal minimalną wysokość strony na 100% */
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%; /* Ustal minimalną wysokość strony na 100% */
    background: linear-gradient(to bottom, #d0e8ff, #80aaff);
    background-attachment: fixed; /* Ustala tło jako nieruchome */
    font-family: 'Arial', sans-serif;
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	align-items: center;
	gap: 10px; 

}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 25px;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); /* Cień pod tekstem */
	opacity: 0; /* Ustaw początkową przezroczystość na 0 */
    transform: translateY(10px); /* Dodaj lekki ruch w dół */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Określ przejście dla przezroczystości i przesunięcia */
	animation: fadeIn 0.5s forwards; /* Dodaj animację pojawiania się */
    text-align: center;
    justify-content: center;
}

.item a {
    text-decoration: none;
}

.item p {
    font-weight: bold; /* pogrubienie dla wszystkich napisów */
}

.sub-link {
    display: block;
    height: 18px; /* Wysokość tekstu "Pomoc" */
    overflow: hidden;
    margin-top: 5px;
    color: inherit;
}

/* Tylko dla linków .sub-link z treścią "Pomoc" */
.sub-link:not(:empty) {

	font-size: 0.9em;
}

@keyframes fadeIn {
    to {
        opacity: 1; /* Ustaw końcową przezroczystość na 1 */
        transform: translateY(0); /* Przywróć początkową pozycję */
    }
}

.item img {
    width: 120px;
    height: auto;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /* Cień pod ikoną */
	transition: transform 0.6s; /* Dodaj płynną transformację */
}

.item.clicked img { /* Efekt kliknięcia */
    transform: scale(0.9); /* Skalowanie obrazka */
}

.item p {
    margin: 5px 0;
}

.header {
    text-align: center;
    padding: 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ccc;
}

.header h1 {
    margin: 0;
    padding: 0;
    color: #333;
}

.header-help {
	margin-top:5px;

}

.help {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    opacity: 1; /* Ustaw początkową przezroczystość ikonki "Pomoc" na 1, aby nie była objęta efektem */
    transform: none; /* Usuń efekt przesunięcia dla ikonki "Pomoc" */
}

.separator {
    height: 2px;
    background-color: #333;  /* Kolor linii */
    margin: 20px 0;  /* Odstępy górne i dolne od linii */
}