/*dla wszystkich urządzeń definicja ogólna, szerokość 100%, biała czcionka, czarne tło */
/*#e9aa6d ciemny miedziny*/
/*#fbd5b1 jasny miedziny*/
/*#D00000 czerwony sprzedany*/
body { 
	width: 100%;
	font-family: Arial, sans-serif;
	justify-content: center;
	align-items: center;
	#margin: 0;
	font-size: 1.4em;
}
/*---------------------------------------------------------------------------------*/
header {
	display: block;
	background-color: black;
	margin: 0;
	padding: 0;
}

#logo {
	display: block;
	margin: 0 auto;
}
/*---------------------------------------------------------------------------------*/
ul {
	list-style: none;
}
/*---------------------------------------------------------------------------------*/
menu {
	margin-left: -30;;
	padding: 0;
}
#sort li {
		display: inline-block;
	}
/*---------------------------------------------------------------------------------*/
.highlight {

}
.hidden {
	display: none;
}
	button{
		font-size: 1em;
	}


@media only screen and (min-width : 320px) {
/* dla iPhone Retina :kolor i tło bez zmian, czcionka powiększona 1.2em, zastosuję również od tej szerokości wyrównanie strony do środka i szerokość body mniejszą od szerokości wcześniej zdefiniowanej */
	body {
		width: 96%;
		margin: 0 auto;
		background-color: black;
		color: #fbd5b1;
	}
/*---------------------------------------------------------------------------------*/
	#logo {
		height: 55vh;
	}
/*---------------------------------------------------------------------------------*/	
	ul {
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	.icon {
		height: 2.5em;
	}
	
	.social-media p {
		margin: 0.8em 0;
	}
	

	
	
	
	menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	menu {
		#display:block;
		#width:100%;}

	menu > li {
		float: left;
	}

	menu > li > a {
		display: block;
		color: white;
		text-align: center;
		#padding: 14px 16px;
		text-decoration: none;
	}

li a {
		display: block;
		float: left;
		text-align: center;
		#width: 100px;
		padding: 0.2em;
	}
	
	
/*---------------------------------------------------------------------------------*/
	.gallery {
		display: block;
		width: 100%;
	}

	.gallery-item {
		width: calc(100%); /* Szerokość zdjęcia z uwzględnieniem odstępów */
		justify-content: center;
		padding: 0.1em 0;
	}
	
/*---------------------------------------------------------------------------------*/	
	.buy_botton {
		background-image: linear-gradient(to bottom right, #e9aa6d, #fbd5b1);
		border: none;
		border-radius: 0.3em;
		color: black;
		padding: 0 1em ;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		margin: 0.8em 0.8em 0.8em 0;
	}
	.nav_botton {
		background-image: linear-gradient(to bottom right, #e9aa6d, #fbd5b1);
		border: none;
		border-radius: 0.3em;
		color: black;
		padding: 0.5em;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		margin: 0.3em 0.3em 0.3em 0;
	}
}



@media only screen and (min-width : 480px) { 
	body {
		width: 90%;
	}
	
	/*---------------------------------------------------------------------------------*/
	.gallery {
		display: flex;
		flex-wrap: wrap;
		gap: 15px; /* Odstępy między zdjęciami */
	}

	.gallery-item {
		width: calc(100%); /* Szerokość zdjęcia z uwzględnieniem odstępów */
		max-height: 500px; /* Wysokość zdjęcia */
		object-fit: cover; /* Zapewnia, że zdjęcia nie będą deformowane */
		padding: 5px;
		background-color: black;

	}
/* telefony o małym ekranie: kolor i tło bez zmian czcionka 1.2em, tak jak zdefiniowałem wyżej, jedynie szerokość body mniejsza od tego rozmiaru */
}


@media only screen and (min-width : 768px) {
	
	body {
		width: 90%;
	}

/* tablety i małe tel. o małym ekranie: powiększam jedynie czcionkę, czcionka 1.5em, reszta pozostaje bez zmian, tak jak została zdefiniowana wcześniej */

/*---------------------------------------------------------------------------------*/
	.gallery-item {
		width: calc(50% - 40px); /* Szerokość zdjęcia z uwzględnieniem odstępów */
		height: 400px; /* Wysokość zdjęcia */
		object-fit: cover; /* Zapewnia, że zdjęcia nie będą deformowane */
		padding: 5px;
		background-color: black;

	}
/*---------------------------------------------------------------------------------*/
}
/*


1. szydłowo - obsługa zaangazowania
2. obsługa zaangażowania pytanie
3. serwer - restart wildfly
4. dopiewo - zaangażowanie pytanie

5 - do marka
6. kąty wroc słabo działają
7. cysów - serwer budzet24
8. katy wolno działa - serwer budzet24 
9. Racibórz - do Mateusza

🧠 Rozwój: regularne czytanie wzmacnia zdolność koncentracji oraz poprawia pamięć. Pozwala na ciągłe poszerzanie wiedzy i umiejętności.
👥 Kompetencje społeczne: wcielanie się w bohaterów książek rozwija empatię i zdolność do zrozumienia innych ludzi. Czytanie również poszerza nasze horyzonty w zakresie słownictwa, co przekłada się na lepsze umiejętności komunikacyjne.
 🤖Reziliencja intelektualna: czytanie zwiększa umiejętności analityczne i krytyczne oraz uczy myślenia przyczynowo skutkowego - służy za narzędzie budowania odporności intelektualnej, koniecznej w świecie AI.
🧘‍♂️ Redukcja stresu: czytanie działa relaksująco i pomaga obniżyć poziom stresu. To szczególnie ważne dla młodszych pokoleń, których deklarowana kondycja psychiczna jest coraz słabsza.


Therion: Lepata Kliffoth albo Ho Dragon Sehan Ug

kurów
692 939 074

*/
@media only screen and (min-width : 992px) {
/* Średnie urządzenia: od tej szerokości szerokość podaję w px, zmieniam kolor tła i kolor czcionki ( od teraz będzie odwrotnie, czyli białe tło i czarna czcionka, nie tak jak w definicji na początku */	
	
	body {
		width: 90%;
		width: 1024px;
		background: #fff;
		color: #000;
	}
/*---------------------------------------------------------------------------------*/
	.gallery-item {
		width: calc(33.3333% - 40px); /* Szerokość zdjęcia z uwzględnieniem odstępów */
		height: 400px; /* Wysokość zdjęcia */
		object-fit: cover; /* Zapewnia, że zdjęcia nie będą deformowane */
		padding: 5px;
		background-color: black;
	}

	.gallery-item.active {
		#transform: scale(2); /* Powiększa zdjęcie */
		#z-index: 10; /* Zapewnia, że zdjęcie jest na wierzchu */
		#transition: transform 0.3s ease-in-out; /* Dodaje animację powiększenia */
		#position: relative; /* Pozycjonowanie względem pierwotnego miejsca */
	}
/*---------------------------------------------------------------------------------*/
	.buy_botton {
		background-image: none;
		background-color: black;
		color: #fbd5b1;
	}
	.nav_botton {
		background-image: none;
		background-color: black;
		color: #fbd5b1;
		padding: 0,8em;
	}
}



@media only screen and (min-width : 1200px) {
	/*---------------------------------------------------------------------------------*/	
	header {
		height: 250px;
	}

	#logo {
		height: 250px;
	}
/*---------------------------------------------------------------------------------*/
	.gallery-item {
		width: calc(33.3333% - 40px); /* Szerokość zdjęcia z uwzględnieniem odstępów */
		height: 400px; /* Wysokość zdjęcia */
		object-fit: cover; /* Zapewnia, że zdjęcia nie będą deformowane */
		padding: 5px;
		background-color: black;

	}
/*---------------------------------------------------------------------------------*/	
}



@media only screen and (min-width : 1500px) {
	body {
		width: 1200px;
		#height: 100vh;
		background-color: #f0f0f0;
		margin: auto;
		width: 80%;
		#border: 3px solid green;
		#padding: 10px;
	}
/*---------------------------------------------------------------------------------*/	
	header {
		height: 300px;
	}

	#logo {
		height: 300px;
		margin-top: -20px;
	}
/*---------------------------------------------------------------------------------*/
	section {
		display: block;
	}
	
	section.contact-section {
		display: block;
	}
	
	.social-media {
		margin-top:10px;
	}
	
	.social-media > ul {
		float:right;
		width:650px;
	}
	
	.contact {
		float: left;
		width: 500px;
		margin-top:10px;
	}
	
	
	.nav_botton {
		padding: 0.8em;
	}
	
	




	menu li a {
		display: block;
		color: white;
		text-align: center;
		#padding: 14px 16px;
		text-decoration: none;
	}
	
	
	
		
	
	
	

	ul {
		float: left;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	li a, li p {
		display: block;
		float: left;
		text-align: center;
		#width: 100px;
		padding: 10px 15px;
	}

	.icon {
		height: 45px;
	}
/*---------------------------------------------------------------------------------*/
	.gallery-item {
		width: calc(25% - 40px); /* Szerokość zdjęcia z uwzględnieniem odstępów */
		height: 400px; /* Wysokość zdjęcia */
		object-fit: cover; /* Zapewnia, że zdjęcia nie będą deformowane */
		padding: 5px;
		background-color: black;

	}
	
	.sold_out {
		background-color:#D00000;
	}
/*---------------------------------------------------------------------------------*/
}

/* szerokie ekrany: powiększam czcionkę i szerokość body, reszta jest bez zmian */