/* Kolory strony i sekcji */

:root {
	--kolor-macio:#433E7E;
	--kolor-macio-rgb:67,62,126;
	--kolor-painto:#D81B22;
	--kolor-painto-rgb:216,27,34;
	--kolor-filmy:#433E7E;
	--kolor-filmy-rgb:200,160,40;
	--kolor-muzyka:#D81B22;
	--kolor-muzyka-rgb:40,160,200;
	--kolor-memy:#433E7E;
	--kolor-memy-rgb:160,80,80;
	--kolor-podcast:#D81B22;
	--kolor-podcast-rgb:40,200,40;
	--kolor-tekst:#F0F0F0;
	
	--kolor-macio-grad:#635E9E;
	--kolor-macio-grad-rgb:99,94,158;
	--kolor-painto-grad:#F83B42;
	--kolor-painto-grad-rgb:248,59,66;
	--kolor-filmy-grad:#635E9E;
	--kolor-filmy-grad-rgb:220,180,60;
	--kolor-muzyka-grad:#F83B42;
	--kolor-muzyka-grad-rgb:60,180,220;
	--kolor-memy-grad:#635E9E;
	--kolor-memy-grad-rgb:180,90,90;
	--kolor-podcast-grad:#F83B42;
	--kolor-podcast-grad-rgb:60,220,60;
	--kolor-tekst-grad:#D0D0D0;
}

#onas {
	--sekcja-tło: #307050;
    --sekcja-tło-obraz: repeating-radial-gradient( circle at 4vmin 4vmax, transparent 0, #D8D8D870 3vmax ), repeating-linear-gradient( #90909050, #90909080 );
}

#media {
	--sekcja-tło: #105098;
    --sekcja-tło-obraz: linear-gradient(135deg, #D8D8D880 50%, transparent 0),linear-gradient(-135deg, #D8D8D850 50%, transparent 0),linear-gradient(90deg, #D8D8D880 50%, transparent 0),linear-gradient(-90deg, #D8D8D850 50%, transparent 0),linear-gradient(180deg, #D8D8D880 50%, transparent 0),linear-gradient(0deg, #D8D8D850 50%, transparent 0);
    background-size: 4.5vmax 4.5vmax;
    background-position: 50% 50%;
	background-repeat: repeat;
}
#linki {
	--sekcja-tło: #E07038;
    --sekcja-tło-obraz: linear-gradient(135deg, #C0C0C080 25%, transparent 25%), linear-gradient(225deg, #90909080 25%, transparent 25%), linear-gradient(45deg, #90909080 25%, transparent 25%), linear-gradient(315deg, #C0C0C080 25%, transparent 25%);
	background-position: 1.75vmax 0, 1.75vmax 0, 0 0, 0 0;
    background-size: 3.5vmax 3.5vmax;
	background-repeat: repeat;
}

.box-painto, .txt-painto {
	--kolor: var(--kolor-painto);
	--kolor-grad: var(--kolor-painto-grad);
	--kolor-rgb: var(--kolor-painto-rgb);
	--kolor-grad-rgb: var(--kolor-painto-grad-rgb);
	--tekst: 'Painto';
}

.box-macio, .txt-macio {
	--kolor: var(--kolor-macio);
	--kolor-grad: var(--kolor-macio-grad);
	--kolor-rgb: var(--kolor-macio-rgb);
	--kolor-grad-rgb: var(--kolor-macio-grad-rgb);
	--tekst: 'Mació';
}
.box-filmy, .txt-filmy {
	--kolor: var(--kolor-filmy);
	--kolor-grad: var(--kolor-filmy-grad);
	--kolor-rgb: var(--kolor-filmy-rgb);
	--kolor-grad-rgb: var(--kolor-filmy-grad-rgb);
	--tekst: 'Filmy';
}

.box-muzyka, .txt-muzyka {
	--kolor: var(--kolor-muzyka);
	--kolor-grad: var(--kolor-muzyka-grad);
	--kolor-rgb: var(--kolor-muzyka-rgb);
	--kolor-grad-rgb: var(--kolor-muzyka-grad-rgb);
	--tekst: 'Muzyka';
}

.box-memy, .txt-memy {
	--kolor: var(--kolor-memy);
	--kolor-grad: var(--kolor-memy-grad);
	--kolor-rgb: var(--kolor-memy-rgb);
	--kolor-grad-rgb: var(--kolor-memy-grad-rgb);
	--tekst: 'Humor obrazkowy';
}

.box-podcast, .txt-podcast {
	--kolor: var(--kolor-podcast);
	--kolor-grad: var(--kolor-podcast-grad);
	--kolor-rgb: var(--kolor-podcast-rgb);
	--kolor-grad-rgb: var(--kolor-podcast-grad-rgb);
	--tekst: 'JeżCast';
}

.twitter {
	--tło-panel:#1DA1F2A0;
	--tło-panel-hover:#1DA1F2D0;
}

.facebook {
	--tło-panel:#0062E0A0;
	--tło-panel-hover:#0062E0D0;
}

.youtube {
	--tło-panel:#C00000A0;
	--tło-panel-hover:#C00000D0;
}

.discord {
	--tło-panel:#7289DAA0;
	--tło-panel-hover:#7289DAD0;
}

/* Varia */

*, :before, :after {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

/* Główny kod */

html, body {
	margin:0;
	padding:0;
	width:100%;
	background:black;
	scroll-behavior: smooth;
	scroll-padding-top:7vh;
	color:var(--kolor-tekst);
}

#nawigacja {
	box-shadow:0px 0.25vmax 1vmax #101010;
	z-index:999;
	width:100%;
	height:7vh;
	font-size:max(3vh, 14px);
	background-color:rgba(var(--kolor-macio-rgb),0.9);
	position: fixed;
	top:0;
	transition: .5s background-color;
}


#nawigacja ul {
	padding: 0;
    text-align: center;
    line-height: 1vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	height: 100%;
	font-family:'Anton',sans-serif;
}

#nawigacja ul li {
    line-height: 1vw;
    list-style:none;
    margin:0;
	height:100%;
}

#nawigacja a {
	height:100%;
	padding:0 1vmax;
    display:inline-flex;
	align-items:center;
	color:var(--kolor-tekst);
	background:transparent;
	text-decoration:none;
	transition: .5s color, .5s background;
	text-shadow:0.15vmax 0.15vmax 0.15vmax #101010;
}

#nawigacja .minilogo img {
	height:80%;
	width:auto;
	filter: drop-shadow(0.15vmax 0.15vmax 0.15vmax #101010);
    pointer-events: none;
}

#nawigacja ul li:last-of-type {
	margin-left:auto;
}

.baner1 {
	width: 100%;
/*	aspect-ratio: 16/9; */
	margin-top:8vh;
/*    height: 80vh;
	height: calc((45vw * calc(577 / 871)) + 18vw);
	height:fit-content;*/
	height:92vh;
    background: url(Tło-beta.webp) center no-repeat;
    background-size: contain;
    background-color: black;
    background-position-y: center;
	display:flex;
	justify-content:center;
	flex-direction:column;
}
.baner1 .box {
	margin: 0 auto;
    aspect-ratio: 871/577;
    width: 65%;
    max-width: 65vw;
    height: 45%;
    max-height: 45vh;
}
.baner1 .box img {
	margin: auto;
	filter: drop-shadow(0 0 1vmax #101010);
/*	max-width:1000px;
	width:45%;
	width:auto;
	max-width:65vw;
	height:auto;
	max-height:45vh; */
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.baner1 h1 {
	padding:2vmin;
	text-align:center;
	font-family: 'Russo One', sans-serif;
	color:var(--kolor-tekst);
	font-size:max(3.5vmax, 30px);
	text-shadow:0px 0 .75vmax #101010;
}
.scroll {
	font-family: 'Signika', sans-serif;
}

.scroll a {
	display:flex;
	width:100%;
	color:var(--kolor-tekst);
    justify-content: center;
	text-decoration: none;
	position:absolute;
	bottom:0;
	padding:3vh;
	background-color:none;
	transition: .5s background-color;
}
.scroll a:hover {
	background-color:#A6274150;
}
.scroll a div {
	transform:rotate(90deg) scaleY(1.75);
	width:fit-content;
	font-size:max(3.5vmax, 20px);
	text-shadow:0px 0 .75vmax #101010;
    animation: bounce 3s infinite;
	bottom:0;
	position:relative;
}

@keyframes bounce {
	0%	{bottom:0; transform:rotate(90deg) scaleY(1.75) scaleX(1);}
	50%	{bottom:2vh; transform:rotate(90deg) scaleY(1.75) scaleX(0.8);}
	75%	{bottom:0; transform:rotate(90deg) scaleY(1.75) scaleX(1);}
}

section h1 {
	width:100%;
	padding:2vmin;
	background: #802040;
    background: linear-gradient(180deg, #A62741, #802040);
    font-family: 'Tilt Warp', 'Signika', sans-serif;
	font-size:max(3.2vmax, 24px);
	font-weight:normal;
	text-shadow:.25vmax .25vmax .5vmax #101010;
	box-shadow:0px 0.25vmax 1vmax #101010;
	z-index:998;
	position:relative;
}

section {
	font-family: 'Signika', sans-serif;
    background: var(--sekcja-tło);
    background-image: var(--sekcja-tło-obraz);
    background-blend-mode: multiply;
}
section p {
	padding:1vmax 3vmin 0;
	font-size:max(1.6vmax, 14px);
}

.txt-painto, .txt-macio {
	color:var(--kolor);
}

.subsections {
	display:flex;
	flex-wrap:wrap;
	margin-top:1vmax;
}

.subsections p {
	height:100%;
	font-size:max(1.44vmax, 14px);
	margin:0;
	padding:1vmin 1vmax;
}

.subsections p:first-letter {
	text-transform:capitalize;
}

.subsections .avatar {
	padding:1vmin 1vmax;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items: center;
	flex-basis:30%;
}
.subsections .tekst {
	flex-basis:70%;
	height:100%;
    align-self: flex-start;
}

.subsections .avatar img {
	width:100%;
	height:auto;
	pointer-events:none;
}
.subsections .box-painto .avatar img,
.subsections .box-muzyka .avatar img,
.subsections .box-filmy .avatar img,
.subsections .box-castle .avatar img {
	width:85%;
}

#media .subsections .tekst {
	display:flex;
	flex-direction:column;
}

#media .subsections .tekst .przycisk {
	align-self: center;
    padding: 10px;
	width:100%;
	font-size:max(1.44vmax, 14px);
}
#media .subsections .tekst .przycisk:nth-of-type(2) {
	padding-top:0px;
	margin-top:0px;
}

#media .subsections .tekst .przycisk a {
	display:block;
	width:90%;
    margin: 5px auto;
	padding:10px;
    text-align: center;
	box-shadow:0px 0.25vmax 1vmax #101010;
	color:var(--kolor-tekst);
	text-decoration:none;
	transition:.5s color, .5s background;
	background: rgba(var(--kolor-grad-rgb),.75);
	cursor: pointer;
}

.box-left, .box-right {
	flex-basis:50%;
	display:flex;
	flex-flow:row;
	align-items:center;
	transition:0.5s background;
	background: rgba(var(--kolor-grad-rgb),.3);
}

.box-right {
	flex-direction:row-reverse;
}

#linki ul {
	display:flex;
	list-style:none;
}

#linki a {
	display:block;
	height:100%;
	width:100%;
	text-decoration:none;
	color:var(--kolor-tekst);
}

#linki img {
	width:45%;
	height:auto;
	aspect-ratio:1 / 1;
	margin:1.5vmax;
	pointer-events:none;
}

#linki .panel {
	height:100%;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-size:max(2.3vmax,14px);
}

#linki b {
	text-transform:uppercase;
}

#linki li {
	flex-basis:25%;
	aspect-ratio:1 / 1;
	background:var(--tło-panel);
	transition:.5s background;
}

@media not (pointer:coarse) {
	#nawigacja:hover {
		background-color:var(--kolor-macio);
		transition: .5s background-color;
	}

	#nawigacja a {
		color:var(--kolor-tekst-grad);
		transition: .5s color, .5s background;
	}
	#nawigacja a:hover {
		color:var(--kolor-tekst);
		background:var(--kolor-macio-grad);
		transition: .5s color, .5s background;
	}
	#nawigacja .minilogo img {
		filter: drop-shadow(0.15vmax 0.15vmax 0.15vmax #101010) brightness(0.9);
		transition: .5s filter;
		
	}
	#nawigacja .minilogo:hover img {
		filter: drop-shadow(0.15vmax 0.15vmax 0.15vmax #101010) brightness(1);
		transition: .5s filter;
	}
	
	.baner1 {
		background-attachment: fixed;
	}

	/*.box-painto:hover, .box-macio:hover*/
	.subsections > div:hover	{
		background: rgba(var(--kolor-rgb),.5);
	}
	
	#linki li:hover {
		background:var(--tło-panel-hover);
		transition:.5s background;
	}
	
	#linki li a {
		color:var(--kolor-tekst-grad);
		transition:.5s color;
	}
	
	#linki li:hover a, #media .subsections .tekst .przycisk a:hover {
		color:var(--kolor-tekst);
		transition:.5s color, .5s background;
	}	

	#media .subsections .tekst .przycisk a {
		color:var(--kolor-tekst-grad);
		background: rgba(var(--kolor-grad-rgb),.3);
	}
	#media .subsections .tekst .przycisk a:hover {
		color:var(--kolor-tekst);
		background: rgba(var(--kolor-grad-rgb),.5);
	}
	
	#linki li img {
		opacity:0.8;
		transition:.5s opacity;
	}
	#linki li:hover img {
		opacity:1;
		transition:.5s opacity;
	}
}
@media only screen and (max-width:889px) {	
	.box-left, .box-right {
		flex-flow:column;
		padding: 0 1vmax 1vmax 1vmax;
	}
	.subsections .tekst {
		flex-basis:initial;
	}
	.subsections .avatar {
		min-height:calc(8vmin + 8vmax);
		max-height:calc(8vmin + 8vmax);
	}
	.subsections .avatar img {
		width:auto!important;
		height:calc(7vmin + 7vmax);
	}
	#media a span, #linki span {
		display:none;
	}
}

@media only screen and (max-width:595px) {	
	#nawigacja .minilogo {
		display:none;
	}
	
	.box-left, .box-right {
		padding:0;
	}
	.subsections {
		flex-direction:column;
	}
	#onas .subsections b {
		display:none;
	}
	.subsections .avatar {
		flex-direction:row;
		width:100%;
		min-height:initial;
		padding:1vmin 2vmin;
		background: var(--kolor);
		background: linear-gradient(180deg, rgba(var(--kolor-grad-rgb),.3), rgba(var(--kolor-rgb),.3));
		font-family: 'Tilt Warp', sans-serif;
		font-size:max(3vmax, 20px);
		text-shadow:.2vmax .2vmax .4vmax #101010;
		box-shadow:0px 0.2vmax .8vmax #101010;
		justify-content: space-between;
	}
	.subsections .avatar img {
		width:6vmax!important;
		height:6vmax;
	}
	.subsections .avatar:before {
		display:block;
		content:var(--tekst);
	}
	section p, .subsections p {
		height:100%;
		padding:1vmax 3vmin;
		font-size:max(1.6vmax, 16px);
	}
	#linki ul {
		flex-direction:column;
	}
	#linki li {
		aspect-ratio:unset;
	}
	#linki .panel {
		flex-direction:row;
		justify-content: flex-start;
		padding-left:2vmax;
	}
	.panel small {
		padding-left:1vmax;
	}
	#linki img {
		width: 10%;
		min-width: 40px;
	}
	#media a span, #linki span {
		display:inline;
	}
}
@media only screen and (max-height:400px) {
	#nawigacja {
		height:12vh;
		font-size:max(4.5vh, 14px);
		min-height:30px;
	}
	.baner1 {
		margin-top:13vh;
	}
	html {
		scroll-padding-top:12vh;
	}
}

@media only screen and (orientation:portrait) and (min-width:596px) {
	#media a span, #linki span {
		display:none;
	}
}

/* @media only screen and (max-width: 768px) {
	
	#nawigacja {
		height:5vh;
		font-size:2vh;
	}
	.baner1 {
		margin-top:5vh;
	}
} 

@media (orientation: portrait) {
	.baner1 img {
		display:none;
	}
}

@media only screen and (max-width: 595px) {...}

@media only screen and (min-width: 600px) {...}

@media only screen and (min-width: 768px) {...}
 
@media only screen and (min-width: 889px) {...}
 
@media only screen and (min-width: 1200px) {...}*/