body
{
	width:100%;
	background-color:#E4E4E4;
	overflow:auto;
}


.naglowek
{
	background-color:white;
	width:100%;
	height:150px;
}

li
{
	list-style-image:url('znacznik.jpg');
}




.galeria 
{
  width:90%;
  display:flex;
  flex-wrap: wrap;
  gap: 10px; /* Odstęp między obrazami */
  margin:auto;
}



.obraz-kontener {
  flex: 1 1 200px; /* Elastyczność, baza 200px */
  overflow: hidden;
  background-color: #eee; /* Kolor tła dla pustych obszarów, gdy używasz aspect-ratio */
  transition: transform 0.3s ease;
}


.obraz-kontener:active,
.obraz-kontener:focus
{
	transform: scale(2.0);
}



.obraz-kontener2 {
  flex: 1 1 400px; /* Elastyczność, baza 200px */
  overflow: hidden;
  background-color: #eee; /* Kolor tła dla pustych obszarów, gdy używasz aspect-ratio */
  transition: transform 0.3s ease;	
}


.obraz-kontener2:active,
.obraz-kontener2:focus
{
	transform: scale(1.5);

}



.obraz-kontener2 img {
  display: block; /* Usuwa dodatkowy margines pod obrazem */
  width: 100%;
  height: auto; /* Zachowuje proporcje */
  object-fit: cover; /* Opcjonalne: skaluje obraz, aby wypełnił kontener, przycinając go, jeśli jest potrzebne */
  /* Lub dla starszych przeglądarek lub specyficznych przypadków: */
  /* aspect-ratio: 4/3; */
  /* height: auto; */
  /* object-fit: cover; */
  transition: transform 0.3s ease; /* Animacja przejścia */  
}



.obraz-kontener img {
  display: block; /* Usuwa dodatkowy margines pod obrazem */
  width: 100%;
  height: auto; /* Zachowuje proporcje */
  object-fit: cover; /* Opcjonalne: skaluje obraz, aby wypełnił kontener, przycinając go, jeśli jest potrzebne */
  /* Lub dla starszych przeglądarek lub specyficznych przypadków: */
  /* aspect-ratio: 4/3; */
  /* height: auto; */
  /* object-fit: cover; */
  transition: transform 0.3s ease; /* Animacja przejścia */  
}



/*
.galeria img:hover 
{
  
  transform: scale(1.5); /* Powiększenie obrazu 1.5 raza */ 
}
*/



.poj_lok
{
	background-color:#E4E4E4;
	width:80%;
	height:1000px;
	margin:auto;
	padding:20px;
	
}


.poj_opinie
{
	background-color:#E4E4E4;
	width:80%;
	height:400px;
	margin:auto;
	padding:20px;
	
}


.pojemnik
{
	background-color: #E4E4E4;
	background-image:url('tlo9.jpg');

	background-size:cover; 
	width:100%;
	height:1500px;
	left:0;
	
}


.poj_na_ksiazki
{
	background-color:black;
	
}

.ksiazka
{
	background-color:lime;
}

.klocek
{
	background:#804040;
	width:25%;
	height: 120px;
	border-radius:20px;
	border-color:green;
	border: 5px #E80000 solid;**/
  	font-family:"Bookman Old Style";
  	font-size:40px;
	margin:auto;
	margin-top:25px; 
	padding:10px; 
	-ms-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;	
	
}



.klocek_ksiazki
{
	background:white;
	width:25%;
	height: 180px;
	border-radius:20px;
	border-color:green;
	border: 5px #5F9BD1 solid;
	margin:auto;
	margin-top:10px;
	background-image:url('kwiatki.jpg');
	background-size:cover;
	padding:10px; 
	-ms-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;	
	
}



.obrazek_glowny{
	border-color:#E80000;
	border-style: solid;
	border-width: 20px;
	border-radius:20px;
	width:100%;
	height:100%;
	padding:10px;
}



.opis_strony
{
	background-color:white;
	width:100%;
	height:40px;
	font-family:"Bookman Old Style";
	font-size:25px;
	font-weight:normal;
	text-align:center;
}	


.menu
{
	background-color:#804040;
	width:220px;
	height:80px;
	float:left;
	border-radius:10px;
	margin:20px;
	line-height:100px;
	font-family:"Times New Roman", Times, serif;
	font-size:24px;
	font-weight:bold;
	color:white;
	text-align:center;
	-ms-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;	
}

.menu:hover
{
	width:270px;
	background-color:#E80000;
}



.klocek:hover
{
	width:30%;
	background-color:#E80000;
}

.klocek_ksiazki:hover
{
	width:30%;
}

.zaznaczenie {
	font-size: 35px;
}


.obrazek
{
	width:300px;
	height:451px;
	float:left;
	padding-left:0px;
	padding-right:50px;
}


.obrazek1
{
	width:265px;
	height:306px;
	float:right;
	padding-left:50px;
}



.obrazek2
{
	width:400px;
	height:340px;
	float:right;
	padding-left:50px;
}


.obrazek3
{
	width:300px;
	height:379px;
	float:left;
	padding-right:50px;
}


.obrazek4
{
	width:400px;
	height:300px;
	float:left;
	padding-right:50px;
}

.obrazek5
{
	width:300px;
	height:519px;
	float:left;
	padding-right:50px;
}

.obrazek6
{
	width:400px;
	height:484px;
	float:left;
	padding-right:50px;
}

.obrazek7
{
	width:400px;
	height:520px;
	float:left;
	padding-right:50px;
}


.obrazek8
{
	width:400px;
	height:315px;
	float:right;
	padding-left:50px;
}


.obrazek9
{
	width:400px;
	height:391px;
	float:left;
	padding-right:50px;
}



.literki_duze
{
	color:#353535;
	font-family:"MS UI Gothic";
	font-size:25px;
	
}

.literki_male
{
	color:#8E8E8E;
	font-family:"MS UI Gothic";
	font-size:20px;
}



a{

	display: block;
	width: 100%;
	height: 100%;
	color: white;
	text-decoration: none;
}

a:hover{
	color: white;
}

a:visited{
	color: white;
}

a:active{
	color:lime;
}




.w1
{
	width: 33%;
	height:1500px;
	background-color:lime;
	float:left;
}

.w2
{
	width: 100%;
	height:1500px;
	background-color:transparent;
	float:left;
}

.w3
{
	width: 20%;
	height:40%;
	position:absolute;
	top:20%;
	right:15%;

}


h1{

	color:#4F2626;
	font-family:"Bookman Old Style";
	font-size:25px;
}


h2{
	color:#4F2626;
	font-family:"Bookman Old Style";
	font-size:25px;
	font-weight:normal;
}


h3{
	color:#4F2626;
	font-family:"Bookman Old Style";
	font-size:20px;
	font-weight:normal;
	font-style:italic;
}



/* TABELA --------------------------- */

.tborder
{
	border: 1px solid #E80000;
	margin:auto;
}

.tnagl
{
	border: 1px solid #E80000;
	background-color: #E4E4E4;
	text-align: center;
	font-family:"Bookman Old Style";
	font-size:25px;
	color:#804040;	
}

.tnaglwiersza
{
	border: 1px solid #E80000;
	text-align: center;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;
}

.tkolumna1
{
	border: 1px solid #E80000;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;	
}

.tkolumna2
{
	border: 1px solid #E80000;
	text-align: center;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;	
}


.tkolumna3
{
	border: 1px solid #E80000;
	text-align: center;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;
}


.tkolumna4
{
	border: 1px solid #E80000;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;	
}


.tkolumna5
{
	border: 1px solid #E80000;
	text-align: center;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;	
}


.tkolumna6
{
	border: 1px solid #E80000;
	text-align: center;
	background-color: #E4E4E4;
	font-family:"Bookman Old Style";
	font-size:20px;
	color:#804040;
}

/* TABELA --------------------------- */






/* MEDIA ------------------------------------------------------ */

@media screen and (min-width:300px) and (max-width:900px)

{

	.obrazek
	{
		width:250px;
		height:376px;
		margin-bottom:15px;
	}

	.obrazek1
	{
		width:250px;	
		height:281px;
		padding-right:50px;
		padding-left:20px;
		margin-bottom:15px;
	}


	.obrazek2
	{
		width:250px;	
		height:213px;
		margin-bottom:15px;
		float:left;
		padding-right:50px;
		padding-left:0px;
	}

	.obrazek3
	{
		width:250px;	
		height:325px;
		margin-bottom:15px;
	}

	.obrazek5
	{
		width:250px;	
		height:432px;
		margin-bottom:15px;
	}
	
	.obrazek9
	{
		width:280px;
		height:274px;
		margin-bottom:15px;
	}



	.w3
	{
		width:35%;
		height:30%;
		right:2%;
	}
	
	.obrazek_glowny
	{
		
		width:100px;
		height:97px;
		border-width:5px;
		border-radius:5px;
		padding:5px;
	}

	.klocek
	{
		width:50%;
		background-color:maroon;
		font-size:15px;
		height:40px;
		margin:5px;
	}
	.klocek:hover
	{
		width:70%;
		
	}
	
	.pojemnik
	{
		
		background-color:gray;
		height:700px;
	}
	
	
		
	.naglowek
	{
		background-color:red;	
		display:none;
	}
	
		
	h1
	{
		font-size:21px;
	}
	
	h2
	{
		font-size:21px;
	}
	

	h3
	{
		font-size:18px;
	}

	.kolomna1
	{
		font-size:10px;
	}
	
	.kolomna4
	{
		font-size:10px;
	}

}


/* MEDIA ------------------------------------------------------ */




.stopka
{
	background-color:lime;
	width:100%;
	height:600px;
}

img{
	width:100%;
	height:100%;
} 





p{
	color:#3333FF;
	font-family:"Courier New", Courier, monospace;
	font-size:15px;
	font-weight:bold;
}


.logo
{
	width:100px;
	height:130px;
	float:left;
	padding:15px; 
}