body
{
	background-color: #252226;
	font-size: 20px;
	color: white;
	font-family: 'Lato', sans-serif;
	
}

a {
            color: #AED6F1; /* Domyślny kolor linku */
            text-decoration: none; /* Usuwa podkreślenie, jeśli nie jest potrzebne */
        }
a:hover {
            color: #AED6F1; /* Kolor pozostaje taki sam po najechaniu myszką */
        }
a:visited {
            color: #85C1E9; /* Opcjonalnie: taki sam kolor dla odwiedzonych linków */
        }

#container
{
	width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	float: left;
	width: 200px;
	height: 200px;
	background-color: black;
}

img.resize

{
	width: 200px;
	height: 200px;
}

#top_bar
{
	float: left;
	width: 880px;
	height: 200px;
	background-color: black;
	font-family: 'Libre Franklin', sans-serif;
	letter-spacing: 3px;
	
}

#boczne_menu
{
	float: left;
	width: 200px;
	height: 615px;
	background-color: #404040;
	
}

p {
    margin-bottom: 10px; /* Dodaje odstęp między akapitami */
    line-height: 1.5; /* Opcjonalnie zwiększa odstęp między liniami tekstu */
}

.tile1 {
	width: 180px;
	margin: 10px;
	height: 111px;
	background-color: #34FF53;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne efekty */
}

.tile1:hover {
    transform: scale(1.1); /* Powiększenie kafelka */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Zwiększenie cienia */
    background-color: #66FF79; /* Zmiana koloru tła */
}

.tile2 {
	width: 180px;
	margin: 10px;
	height: 111px;
	background-color: #E8D32C;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne efekty */
	text-align: center
}

.tile2:hover {
    transform: scale(1.1); /* Powiększenie kafelka */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Zwiększenie cienia */
    background-color: #FFF15A; /* Zmiana koloru tła */
}

.tile3 {
	width: 180px;
	margin: 10px;
	height: 111px;
	background-color: #FF843D;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne efekty */
	text-align: center
}

.tile3:hover {
    transform: scale(1.1); /* Powiększenie kafelka */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Zwiększenie cienia */
    background-color: #FFA366; /* Zmiana koloru tła */
}


.tile4 {
	width: 180px;
	margin: 10px;
	height: 111px;
	background-color: #E82CE7;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne efekty */
	text-align: center
}

.tile4:hover {
    transform: scale(1.1); /* Powiększenie kafelka */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Zwiększenie cienia */
    background-color: #F566F5; /* Zmiana koloru tła */
}

.tile5 {
	width: 180px;
	margin: 10px;
	height: 111px;
	background-color: #4F76FF;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne efekty */
	text-align: center
}

.tile5:hover {
    transform: scale(1.1); /* Powiększenie kafelka */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Zwiększenie cienia */
    background-color: #809AFF; /* Zmiana koloru tła */
}

#main_info
{
	float: left;
	width: 1020px;
	height: 515px;
	overflow: auto;
	text-align: justify;	
	padding: 30px;
	
}

#footer
{
	clear: both;
	width: 1270px;
	padding: 5px;
	text-align: center;
	background-color: black;	
	font-size: 12px;
}

.image-link {
    display: inline-block;
    will-change: transform; /* Informuje przeglądarkę, że transformacja jest oczekiwana */
    transition: transform 0.3s ease;
}

.image-link:hover {
    transform: scale(1.05);
}

.image-link img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.image-link img:hover {
    transform: scale(1.05);
}


.ytbannerkontener {
            width: 90%; /* Banner zajmuje 80% szerokości strony */
            max-width: 1200px; /* Opcjonalnie ograniczenie maksymalnej szerokości */
            margin: 0 auto;
			/*text-indent: 2em;*/
			
        }
.ytbannerkontener img {
            width: 100%; /* Obraz zajmuje całą szerokość kontenera */
            height: auto; /* Zachowanie proporcji */
            display: block; /* Usunięcie odstępów */
        }
		
		
form {
    margin: 20px;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-right: 10px;
    font-size: 16px;
}

button {
    padding: 8px 16px;
    background-color: #34FF53; /* Zielony kolor */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #2ECC46; /* Ciemniejszy zielony na hover */
}

.logo {
            text-align: center;
            margin-bottom: 20px;
        }

.logo img {
            width: 150px; /* Rozmiar logo */
            height: auto;
        }