/* KOLEJNOŚĆ DEKLARACJI:
display
position
top, left, bottom, right, itp.
width, height, itp.
margin, padding itp.
border
background
color, filters, itp.
text
inne
*/

/* OGÓLNE */
	html {
		--k-tekstu-ciemny: #3c4454 /*#404030*/;
		--k-tła-ciemny: #998c68;
		--k-wyróżnień:	 #B04226;
		--k-tła-jasny:	 #8d9ab3;
		font-size: 10px;
	}
	body {
		background:	 url(tlo_12_03_2023.png) no-repeat top;
		background-color: #faf6eb;
		color: var(--k-tekstu-ciemny);
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-size: 1.6rem;
	}
	* {
		/* zobacz, co naprawdę się dzieje */
		/* border: 1px solid gray; */
		box-sizing: border-box;
	}	  

/* GRID */
		.language {grid-area: lang;}
		.nawi {grid-area: nawi;}
		.obraz {grid-area: obr;}
		.miniatury {grid-area: mini;}
		.opis {grid-area: opis;}
		.stopka {grid-area: stopka;}
	.grid-container {
		display: grid;
		grid-gap: 0;
		grid-template-columns: 23% 23% 23% 23% 8%;
		grid-template-areas:"nawi nawi nawi nawi lang"
							"obr obr obr obr obr"
							"opis opis opis opis opis"
							"mini mini mini mini mini"
							"stopka stopka stopka stopka stopka";
	}

/* LANGUAGE */
	.language a {
		font-size: 1.3rem;
		text-align: center;
	}

/* MENU */
	.menu, .selected {width: 100%;}
	.menu a, .selected a {
		display: block;
		padding: 15px;
		color: var(--k-tła-jasny);
		text-transform: uppercase;
		text-align:	 center;
		text-decoration: none;
		font-family: 'Literata', serif;
		white-space: nowrap;
	}
	.menu a {color: var(--k-tekstu-ciemny);}
	.selected a {color: var(--k-tła-jasny);}
		
	/*.menu:hover, .selected:hover {background-color: #c3cad6;}*/
	.menu a:hover, .selected a:hover {color: var(--k-wyróżnień);}		
	.nawi {
		display: grid;
		grid-template-columns: 50% 50%;
	}

/* OBRAZ */
	.obraz div {
		position: relative;
		max-width:	 90%;
		height:	 300px;
		margin:	 25px 5%;
	}
		#poprzedni, #nastepny {
			position: absolute;
			top: 0%;
			width: 40%;
			height: 100%;
			margin: 0;
			border: none;
			background-color: transparent;
			background-image: none;
			opacity: 1;
			z-index: 100;
		}
		#poprzedni:focus, #nastepny:focus {
			outline: 0;
			border: none;
		}
		#poprzedni img, #nastepny img {
			position: absolute;
			top: 50%;
			width: 30px;
			height: 30px;
			margin: 0;
			padding: 0;
			transform: translate(0, -50%);
			z-index: -100;
		}
		#poprzedni {left: -25px;}
		#poprzedni img {left: 0;}
		#nastepny {right: -25px;}
		#nastepny img {right: 0;}
		#obraz {
			position: absolute;
			top: 50%;
			max-width:	 100%;
			height:	 auto;
			max-height: 300px;
			transform: translate(-50%, -50%);
			box-shadow: 0.25rem 0.5rem 0.25rem var(--k-tła-ciemny),
						-0.25rem 0.5rem 0.25rem var(--k-tła-ciemny);
		}

/* OPIS */
	.opis {margin: 0 5%;}
		#opis{
			position: relative;
			top: 0%;
			left: 50%;
			max-width: 100%;
			margin: 0;
			padding-left: 1rem;
			text-align: left;
			text-indent: -1rem;
			overflow: auto;
			transform: translate(-50%, 0);
		}
			p span {
				font-family: 'Literata', serif;
				font-size: 130%;
            }
			.opis p::first-letter {
                color: var(--k-wyróżnień);
                font-size: 130%;
                text-decoration: none;
            }
			ol {
				text-align: left;
                text-indent: -4rem;
				list-style-position: inside;
			}

/* MINIATURY */
	.miniatury {margin: 5% 0 0;}
		.miniatury button {
			display: inline-block;
			float: left;
			width: 40px;
			height: 40px;
			margin: 0;
			padding: 0;
			border: 4px solid rgba(0, 0, 0, 0);
			background-color: transparent;
			z-index: 100;
		}
		.miniatury button:hover {
			border: 4px solid var(--k-wyróżnień);
		}
			.miniatury img {
				position: relative;
				top: -4px;
				left: -4px;
				width: 40px;
				height: 40px;				
				margin: 0;
				padding: 0;
				border: 4px solid rgba(0, 0, 0, 0);
			}

/* STOPKA */
	.stopka {
		margin: 2% 0;
		color: var(--k-tekstu-ciemny);
	}
		.stopka p {
			display: inline;
			padding: 0 2.5% 0 2.5%;
		}
			.stopka a:link {color: var(--k-tekstu-ciemny);}
			.stopka a:visited {color: var(--k-tekstu-ciemny);}
			.stopka a:hover {color: var(--k-tła-jasny);}
		
/* RESPONSIVE */
@media only screen and (min-width: 600px) {
	/* ogólne */
	body {font-size: 1.5rem;}
	
	/* grid */
	
	/* menu */
	.nawi {grid-template-columns: 25% 25% 25% 25%;}
	
	/* obraz */
	.obraz div {
		height: 500px;
		margin: 40px 5%;
	}
		#obraz {max-height: 500px;}
		#poprzedni img, #nastepny img {
			width: 50px;
			height: 50px;
		}
		
	/* opis */
	
	/* miniatury */
	.miniatury button {
		width: 50px;
		height: 50px;
	}
		.miniatury img {
			width: 50px;
			height: 50px;
		}
		
	/* stopka */
	
}
	
@media only screen and (min-width: 992px) {
	/* ogólne */
	
	/* grid */
	.grid-container {
		grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% auto 100px 12.5%;
		grid-template-areas:". nawi nawi nawi nawi nawi nawi lang"
							"obr obr obr obr obr obr opis opis"
							"obr obr obr obr obr obr mini mini" 
							". stopka stopka stopka stopka stopka stopka .";
	}
	
	/* menu */
	.menu, .selected {
		-webkit-transition: background-color 0.5s;
		transition: background-color 0.5s;
	}
		.menu a, .selected a {
			-webkit-transition: filter 0.5s, color 0.5s;
			transition: filter 0.5s, color 0.5s;
		}
	
	/* obraz */
	.obraz div {
		max-width: 85%;
		height: 600px;
		margin: 60px 7.5%;
	}
		#obraz {max-height: 600px;}
		#poprzedni, #nastepny {
			top: 0%;
			width: 33%;			
			height: 100%;
			opacity: 0;
			-webkit-transition: opacity 0.5s;
			transition: opacity 0.5s;
		}
		#poprzedni {left: 0%;}
		#nastepny {right: 0%;}
		#poprzedni:hover, #nastepny:hover {opacity: 1;}
		#poprzedni img, #nastepny img {
			width: 90px;
			height: 90px;
			background-color: transparent;
		}

		
	/* opis */
	.opis {
		margin: 5% 5% 5% 0;
		background: url() no-repeat right;
	}
		#opis {
			position: relative;
			top: 50%;			
			left: 0%;
			transform: translate(0, -50%);
		}
		
	/* miniatury */	
	.miniatury button {
		-webkit-transition: border-color 0.5s;
		transition: border-color 0.5s;
	}
	
	/* stopka */
	
}

@media only screen and (min-width: 1240px) {
	/* ogólne */
	body {font-size: 1.4rem;}
	
	/* grid */
	
	/* menu */
	
	/* obraz */
	.obraz div {height: 700px;}
		#obraz {max-height: 700px;}
		#poprzedni img, #nastepny img {
			width: 100px;
			height: 100px;
		}
	
	/* opis */			
	.opis {margin: 5% 20% 5% 0;}
	
	/* miniatury */
	.miniatury button {
		width: 60px;
		height: 60px;
	}
	.miniatury img {
			width: 60px;
			height: 60px;
	}
	
	/* stopka */
	
}

@media only screen and (min-width: 1500px) {
    /* ogólne */
	
	/* grid */
	
	/* menu */
	
	/* obraz */
	
	/* opis */			
	
	/* miniatury */

	/* stopka */
	
}