*
{
    margin: 0px;
    padding: 0px;

    box-sizing: border-box;

    list-style-position: inside;
}

h1
{
	font-size: 2em; /*Naprawa domyślnego rozmiaru czcionki nagłówka*/
}
h2
{
    font-size: 1.7em; /*Domyślny: 1.5em*/
}
h3
{
    font-size: 1.17em;
}
h4
{
    font-size: 1em;
}
h5
{
    font-size: 0.83em;
}
h6
{
    font-size: 0.67em;
}

/*##########################################################################################*/

body
{
    display: flex;
    flex-direction: column;

    min-width: fit-content;

    height: 100vh;

    background-color: rgb(25, 25, 25);

    font-family: "Asap Condensed", sans-serif;
	font-weight: 500;
	font-size: 15pt;

	word-spacing: 3px;

	color: rgb(240, 240, 240);
}

/*##########################################################################################*/

header
{
    display: flex;
    flex-direction: column;	
    gap: 30px;

    padding: 15px;

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    background: url(Grafika/Background.jpg) center/cover no-repeat;

	color: white;
}
header > div
{
	align-self: flex-start;

    display: flex;
    flex-direction: column;	
    gap: 5px;
}
header > div > a
{
    display: flex;
	align-items: center;
	gap: 15px;

	max-width: fit-content;
	max-height: fit-content;

    background-color: rgba(30, 30, 30, 0.6) !important;

	text-decoration: none;

	color: white; /*Tu też, ponieważ nie działa dziedziczenie z header*/
}
header > div > a:has(h1)
{
	padding-top: 5px !important;
	padding-bottom: 5px !important;

    font-size: 30pt;
}
header > div > a:has(h2)
{
	padding-top: 2px !important;
	padding-bottom: 2px !important;

    font-size: 12pt;
}
header > div > a > img
{
	width: 80px;
	height: 80px;
}
header > div > a > h2
{
	margin-bottom: 0px;
}

nav
{
    align-self: center;

	white-space: nowrap;

    font-size: 16pt;

	word-spacing: normal;
}
nav > ul
{
	flex-wrap: wrap;

    display: flex;
	justify-content: center;
    gap: 15px;

    list-style-type: none;
}
nav > ul a
{
    display: flex;
	align-items: center;
	gap: 10px;

}
nav > ul img
{
	width: 25px;
	height: 25px;

	filter: invert(1);
	-webkit-filter: invert(1);
}

/*##########################################################################################*/

main
{
    flex-grow: 1;

    padding: 15px;

    font-family: Arial, sans-serif;
	font-weight: 300;

    text-align: justify;

	word-spacing: normal;
}
main h1, main h2, main h3, main h4, main h5, main h6
{
    text-align: left;
}
main img, main video
{
	border-radius: 8px;
	border: 2px solid rgb(70, 70, 70);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.6),
		0px 0px 3px rgb(70, 70, 70);
}

main form
{
	min-width: fit-content;
	text-align: left;
}

main form > table
{
	width: 100%;
	border-spacing: 15px;
}
main form div
{
	display: flex;
	gap: 15px;
}

main form label
{
    font-size: 16pt;

    font-weight: bold;
}

main form textarea
{
    min-width: 5em; /*em - odpowiednik cols, rows*/
    width: 30em;
    max-width: 50em;

    min-height: 5em;
    height: 10em;
    max-height: 30em;
}

main form input, main form select, main form textarea
{
    transition: all 0.3s ease;

    padding: 10px;

    border-radius: 8px;
    border: 2px solid rgb(70, 70, 70);
    outline: none; /*Usuwa domyślną obwódkę przy zaznaczeniu*/

    background-color: rgb(60, 60, 60);

    font-size: 10pt;

    color: rgb(230, 230, 230);
}
main form input:required, main form select:required, main form textarea:required
{
    border: 2px solid rgb(128,0 ,0);
}
main form input:focus, main form select:focus, main form textarea:focus
{
    transform: scale(1.01);

    border-color: rgb(0, 120, 215);
    box-shadow: 0 0 3px rgba(0, 120, 215, 0.5);

    background-color: rgb(50, 50, 50);

    color: rgb(240, 240, 240);
}

main form input::placeholder
{
    color: rgb(170, 170, 170);
}
main form input::placeholder:focus
{
    color: rgb(190, 190, 190);
}

main form button
{
    flex-grow: 1;

    transition: all 0.3s ease;

    padding: 10px;

    border-radius: 8px;
    border: none;

    background-color: rgb(0, 120, 215);
                
    font-size: 13pt;
    font-weight: bold;

    color: white;
}
main form button:hover
{
    transform: scale(1.03);
    background-color: rgb(0, 100, 170);
}
main form button:active
{
    transition: all 0.1s ease;
    transform: scale(1.06);
    background-color: rgb(0, 70, 130);
}

main form button.Reset
{
    background-color: rgb(215, 50, 50);
}
main form button.Reset:hover
{
    background-color: rgb(165, 45, 45);
}
main form button.Reset:active
{
    background-color: rgb(130, 30, 30);
}

/*##########################################################################################*/

footer
{
    display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;

    padding: 15px;

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    background-color: rgb(50, 50, 50);
}
footer > hr
{
	height: 100%;
}

/*##########################################################################################*/

.GlassStyle
{
	padding: 15px;

	border-radius: 8px;
	border: 1px solid rgba(30, 30, 30, 0.7);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.4),
		0px 0px 3px rgba(30, 30, 30, 0.7),
		inset 0px 0px 7px 5px rgba(255, 255, 255, 0.025),
		inset 0px 0px 25px 5px rgba(255, 255, 255, 0.025);

	background-color: rgba(30, 30, 30, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ModernStyle
{
	padding: 15px;

	border-radius: 8px;
	border: 1px solid rgba(70, 70, 70, 0.5);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.6),
		0px 0px 3px rgba(70, 70, 70, 0.7);

	background-color: rgb(40, 40, 40);
}

.LinkStyle
{
	transition: all 0.3s ease;

	display: inline-block;

	padding: 1px;

	border-radius: 4px;

	font-weight: bold;

	text-decoration: none;

	color: rgb(0, 120, 215);
}
.LinkStyle:hover
{
	transform: scale(1.01);

	background-color: rgb(30, 30, 50);
}
.LinkStyle:active
{
	transition: all 0.1s ease;

	transform: scale(1.02);

	background-color: rgb(40, 40, 70);
}

.MenuButton
{
	transition: all 0.3s ease;

	backdrop-filter: none;
	-webkit-backdrop-filter: none;

	text-decoration: none;

	color: white; /*Tu też, ponieważ nie działa dziedziczenie z header*/
}
.MenuButton:hover
{
	transform: scale(1.07);
	
	border-color: rgba(30, 30, 30, 0.8);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.5),
		0px 0px 5px rgba(30, 30, 30, 0.8),
		inset 0px 0px 7px 5px rgba(255, 255, 255, 0.025),
		inset 0px 0px 25px 5px rgba(255, 255, 255, 0.025);
	
	background-color: rgba(30, 30, 30, 0.6);
}
.MenuButton:active
{	
	transition: all 0.1s ease;

	transform: scale(1.11);

	border: 1px solid rgba(30, 30, 30, 1);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.6),
		0px 0px 5px rgba(30, 30, 30, 1),
		inset 0px 0px 7px 5px rgba(255, 255, 255, 0.025),
		inset 0px 0px 25px 5px rgba(255, 255, 255, 0.025);
	
	background-color: rgba(30, 30, 30, 0.7);
}

.CurrentWebsite
{
	transform: scale(1.04) !important;
	
	border: 1px solid rgba(30, 30, 30, 0.8) !important;
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.5),
		0px 0px 5px rgba(30, 30, 30, 0.8),
		inset 0px 0px 7px 5px rgba(255, 255, 255, 0.025),
		inset 0px 0px 25px 5px rgba(255, 255, 255, 0.025) !important;
	
	background-color: rgba(30, 30, 30, 0.7) !important;

	font-weight: bolder !important;
}
.CurrentWebsite:hover
{
	transform: scale(1.11) !important;
	
	border: 1px solid rgba(30, 30, 30, 0.9) !important;
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.7),
		0px 0px 5px rgba(30, 30, 30, 0.9),
		inset 0px 0px 7px 5px rgba(255, 255, 255, 0.015),
		inset 0px 0px 25px 5px rgba(255, 255, 255, 0.015) !important;
	
	background-color: rgba(30, 30, 30, 0.9) !important;
}
.CurrentWebsite:active
{
	transform: scale(1.15) !important;
	
	border: 1px solid rgba(30, 30, 30, 1) !important;
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.8),
		0px 0px 5px rgba(30, 30, 30, 1),
		inset 0px 0px 7px 5px rgba(255, 255, 255, 0),
		inset 0px 0px 25px 5px rgba(255, 255, 255, 0) !important;
	
	background-color: rgba(30, 30, 30, 1) !important;
}

.ObjectRow
{
	margin-top: 25px;

	display: flex;
	gap: 25px;
}
.ObjectRow img, .ObjectRow video
{
	width: 100%;
	max-height: 500px;
}

.ObjectsGrid
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;

	max-width: 80%;
}

.ObjectsGrid > a
{
	transition: all 0.3s ease;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: 10px;

	width: 200px;
	height: 200px;

	text-decoration: none;
	text-align: center;

	color: rgb(240, 240, 240);
}
.ObjectsGrid > a:hover
{
	transform: scale(1.05);

	border: 1px solid rgba(70, 70, 70, 0.7);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 0.9),
		0px 0px 3px rgba(70, 70, 70, 0.8);

	background-color: rgb(40, 40, 40);
}
.ObjectsGrid > a:active
{
	transition: all 0.1s ease;

	transform: scale(1.09);

	border: 1px solid rgba(70, 70, 70, 0.8);
	box-shadow:
		3px 2px 10px rgba(0, 0, 0, 1),
		0px 0px 3px rgba(70, 70, 70, 0.9);

	background-color: rgb(40, 40, 40);
}

.ObjectsGrid img
{
	height: 100px;

	border-radius: 0px !important;
	border: none !important;
	box-shadow: none !important;
}

.Gallery
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px;
}

.Gallery > a
{
	transition: all 0.3s ease;
}
.Gallery > a:hover
{
	transform: scale(1.01);
}
.Gallery > a:active
{
	transition: all 0.1s ease;

	transform: scale(1.015);
}

.Gallery > a, .Gallery > div
{
	display: block;

	flex: 1 1 calc(33% - 5px); /* 3 elementy w rzędzie */

	max-height: 500px;
	min-width: 200px;

    aspect-ratio: 16 / 9;

    overflow: hidden; /* Ukrywa nadmiar zdjęcia */
}
.Gallery > a.Tall, .Gallery > div.Tall
{
	flex-basis: calc(10% - 5px);

	max-height: 500px;
	min-width: 100px;

    aspect-ratio: 9 / 16;
}

.Gallery img, .Gallery video
{
	width: 100%;
    height: 100%;

	object-fit: cover; /* Dopasowanie bez zniekształceń, może przyciąć */

	border-radius: 0px !important;
	border: none !important;
	box-shadow: none !important;
}

/*##########################################################################################*/

@media print
{
	*
	{
		border-color: black !important; /*Bez border-style obramowanie nie będzie widoczne na elementach, które go nie mają mieć*/
		border-width: 1px !important;
		box-shadow: none !important;

		background: none !important;

		font-weight: normal !important;
		color: black !important;
	}

	header, footer
	{
		display: none !important;
	}

	main form button
	{
		border-style: solid !important;
	}
}