/* 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: #333321 /*#404030*/;
		--k-tła-ciemny: #575747;
		--k-wyróżnień:	 #B04226;
		--k-tła-jasny:	 #C4C6C9;
		font-size: 10px;
	}
	body {
		background:	 url(tlo.png) no-repeat top;
		background-color: #575747;
		color: var(--k-tekstu-ciemny);
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-size: 1.6rem;
	}
	* {
		/* v zobacz, co naprawdę się dzieje v */
		/* border: 1px solid gray; */
		box-sizing: border-box;
	}	  

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

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


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

/* 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 */
	
	/* 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:"tekst tekst tekst tekst tekst tekst . ."
							"obr obr obr obr obr obr opis opis"
							"obr obr obr obr obr obr mini mini"
							"nawi nawi nawi nawi nawi nawi . . "
							". 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;
	}
	
    /* wybor */
    
	/* 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;
	}
	
    /* wybor */
    
	/* stopka */
	
}

@media only screen and (min-width: 1500px) {
    /* ogólne */
	body {color: var(--k-tła-jasny)}
	
	/* grid */
	
	/* menu */
	
	/* obraz */
	
	/* opis */			
	
	/* miniatury */
    
    /* wybor */

	/* stopka */
	
}