* {
	box-sizing: border-box;
}

@font-face {
	font-family: 'Exo2SemiBold';
	src: url('fonts/Exo2-SemiBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Exo2ExtraBold';
	src: url('fonts/Exo2-ExtraBold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

:root {
	--barca-blue: #002147;
	--barca-red: #A50044;
	--barca-gold: #FDB913;
	--polska-red-dark: #DC143C;
	--polska-red: #E30B17;
	--polska-white: #FFFFFF;

	--polska-section-color: #121623;
	--section-color: #051839;
	--pink-highlight: #E1317E;
	--blue-highlight: #00B9BF;
	--yellow-highlight: #FFD23F;
	--border-radius: 5px;
}

/* Podstawowy styl */
body {
	font-family: 'Exo2ExtraBold', sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--section-color);
	color: black;
	transition: all 0s ease;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	/* Wyśrodkowanie elementów w poziomie */
	justify-content: flex-start;
	/* Ustalamy początek na górze */
	min-height: 100vh;
}

/* Header */
.header-content {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
	background: var(--section-color);
	color: white;
	font-size: 15px;
	z-index: -2;
	position: relative;
	margin-top: 60px;
	/* box-shadow: 0px -5px 10px 2px rgba(0, 0, 0, 0.347); */
}


.header-content h1 {
	border-bottom: 10px solid var(--barca-red);
	border-radius: 10px;
	padding: 5px;
	animation: header-content 500ms ease;
	transform: skewX(-5deg);
}

.header-content-special {
	font-size: 50px;
	color: var(--barca-gold);
}

.profile-image {
	width: 40%;
	padding: 20px;
	position: relative;

}

.profile-image-cover {
	background: linear-gradient(185deg, transparent 40% 60%, var(--section-color) 85%, var(--section-color) 90%);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}


.profile-image img {
	width: 100%;
	max-width: 600px;
	animation: header-content 400ms ease;
	background: linear-gradient(90deg, var(--barca-blue) 50%, var(--barca-red) 50% 100%);
	border-radius: var(--border-radius);
	transform: skewX(2deg) skewY(0deg);
}

@keyframes header-content {
	0% {
		opacity: 00%;
		transform: skewX(30deg);
	}

	100% {
		opacity: 100%;
	}
}

header button {
	border: none;
	font-size: 16px;
	cursor: pointer;
	width: 100%;
	height: 100%;
	border-radius: var(--border-radius);
}


/* Styl nawigacji */
.navbar {
	background: linear-gradient(to right, #002147, #A50044);

	padding: 2.3rem 1rem;
	height: 1.5rem;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.navbar ul {
	display: flex;
	align-items: center;
}

.logo {
	display: flex;
	align-items: center;
}

.logo-text {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--barca-gold);
}

.logo-icon {
	font-size: 2.8em;
}

.logo-link {
	text-decoration: none;
}

.nav-links {
	display: flex;
	gap: 0rem;
	list-style: none;
	height: 100%;
}

.nav-links li a {
	display: block;
	color: white;
	/* dopasowane do .navbar padding */
	font-weight: 500;
	border: none;
	cursor: pointer;
	align-items: center;
	text-decoration: none;
	border-radius: var(--border-radius);
	padding: 10px;
	height: 100%;
	transition: 100ms ease;
	position: relative;
}

.nav-links li a::before {
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0%;
	font-size: 25px;
	transition: 100ms ease;
}

.nav-links li:hover a::before {
	opacity: 100%;
	transform: translateY(-20px);
}

.nav-links li:nth-child(1) a::before {
	content: "🏠";
}

.nav-links li:nth-child(2) a::before {
	content: "📅";
}

.nav-links li:nth-child(3) a::before {
	content: "📊";
}

.nav-links li:nth-child(4) a::before {
	content: "🤝";
}
.nav-links li:nth-child(5) a::before {
	content: "⚽";
}
.nav-links li:nth-child(6) a::before {
	content: "🏆";
}
.nav-links li:nth-child(7) a::before {
	content: "🔎";
}

.nav-links li {
	display: block;
}

.nav-links li:has(button) {
	padding: 20px;
}

.nav-links li button {
	width: 1.5em;
	height: 1.5em;
	padding: 20px;
	font-size: 30px;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	background-color: var(--bg-color);
	border: none;
}

.nav-links li button {
	background-color: var(--barca-blue);
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 6px 1px #FDB913;
	transition: 100ms ease;
}

.nav-links li button:hover {
	transform: scale(1.1, 1.1);
}

.nav-links li button::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: -1px;
	background-color: var(--barca-red);
	width: 50%;
	height: 100%;
}

.nav-links li button::before {
	content: "";
	background: url('FC_Barcelona.png');
	background-size: contain;
	z-index: 1;
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 80%;
	height: 80%;
}




.nav-links a:hover {
	background-color: var(--barca-gold, #FDB913);
	color: var(--barca-blue, #002147);
}

.hamburger {
	display: none;
	font-size: 2rem;
	color: var(--barca-gold);
	cursor: pointer;
}

@media (max-width: 1090px) {
	/* .base-header .navbar:not(:has(.show))
	{
		margin-bottom: 400px;
	} */
	 
		
	.nav-links {
		position: absolute;
		flex-direction: column;
		top: 57px;
		right: 0px;
		padding: 0rem;
		gap: 0;
		height: auto;
		backdrop-filter: blur(4px);
		width: 30%;
		justify-content: center;
		box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.105);
	}

	.nav-links li {
		width: 100%;
		margin: 0;
		display: flex;
		justify-content: center;
	}

	.nav-links li a,
	.nav-links li button {
		display: block;
		width: 100%;
		text-align: left;
		padding: 1rem;
		margin: 0;
		border-radius: 0;
		/* brak zaokrągleń w mobilnym menu */
	}
	.nav-links li button
	{
		background-color: none;
		width: 45px;
		border-radius: 50%;
	}
	.nav-links li button::before,.nav-links li button::after
	{
		background-color: none
		;
	}
	.nav-links li button:hover
	{
		transform: none;
	}

	.nav-links.show {
		display: none;
	}

	.hamburger {
		display: block;
	}
}
@media (max-width: 1000px)
{
	.header-content
	{
		flex-direction: column;
	}
	.header-content .profile-image
	{
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.header-content .profile-image img{
		width: 100%;
	}
	.about-section-image
	{
		display: none;
	}
}
@media (max-width: 600px){
	.section__matches
	{
		font-size: 10px;
	}
	.section__matches th{
		padding: 3px;
	}
	.club-stats-grid
	{
		grid-template-columns: 1fr 1fr !important;
	}	
	.club-stats-grid .stat-box
	{
		width: 100%;
	}
	.section-stats-center .section-stats .stats
	{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.section-stats-center .section-stats .stats .stat-box
	{
		width: 100%;
		padding: 0;
	}
}



/* Wyśrodkowanie głównej zawartości */
main {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.main-index {
	border-radius: var(--border-radius);
	margin-top: 20px;
	padding: 20px;
	width: 80%;
	max-width: 1200px;
	background-color: rgba(255, 255, 255, 0.086);
	color: white;
}

.about-section {
	border-radius: var(--border-radius);
	background-color: var(--barca-blue);
	padding: 20px;
	color: white;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	grid-template-areas:
		"how how"
		"- about-section-image"
		"- about-section-image"
		"- about-section-image";
}

.about-section article h3 {
	background-color: var(--barca-gold);
	color: black;
	text-align: center;
	border-radius: var(--border-radius);
	padding: 10px;
}

.about-section article h4 {
	background-color: #00B9BF;
	width: fit-content;
	padding: 10px;
	color: black;
	border-radius: (--border-radius)
}

.article__how-it-works {
	grid-area: how;
}

.about-section article a {
	display: block;
	width: 100%;
	color: var(--barca-gold);
	text-align: center;
}

.about-section-image {
	grid-area: about-section-image;
	z-index: 0;
	position: relative;
}

.about-section-image::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 90%;
	height: 90%;

	z-index: -1;
	background-color: #051839;
	border-radius: 20px;
}

.about-section-image img {
	width: 100%;
	z-index: 3;
}

.general-stats-section {
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.general-stats-section h2 {
	width: 100%;
	background-color: #002147;
	padding: 20px;
	text-align: center;

}

.general-stats-section .grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	height: 150px;
	gap: 20px;
	width: 100%;
}

.general-stats-section .grid article {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	font-size: 1.3em;
}
.general-stats-section .grid article:nth-child(1){background-color: var(--blue-highlight);}
.general-stats-section .grid article:nth-child(2){background-color: var(--yellow-highlight);}
.general-stats-section .grid article:nth-child(3){background-color: var(--pink-highlight);}
.general-stats-section .grid p
{
	font-size: 40px;
}
.general-stats-section .grid h3, .general-stats-section .grid p
{
	margin: 0;
	padding: 0;
} 

/* Styl dla tabeli */
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}

th,
td {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	text-align: center;
}

/* Styl dla zdjęcia */
.photo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	/* Wyśrodkowanie obrazka */
}

.section__matches
{
	background-color: white;
	width: 80%;
	border-radius: var(--border-radius);
	max-width: 1000px;
	margin-bottom: 50px;
}
.section__matches h2
{
	margin: 0;
	border-radius: var(--border-radius);
	background-color: var(--barca-gold);
	padding: 20px;
	text-align: center;
}
.section__matches td:nth-child(1)
{
	border-radius: 25px 0 0px 25px;
}

.section__matches td:last-child
{
	border-radius: 0 25px 25px 0;
}
.section__matches th
{
	font-size: 1.3em;
	color: var(--barca-red)
}
.section__matches tr
{
	transition: 100ms ease;
}
.section__matches tr:hover:has(:not(th))
{
	transform: scale(1.05,1.05);
	background-color: #00B9BF;
}

/* Styl dla trybu polskiego */
body.poland-mode {
	background-color: var(--polska-section-color);
}

body.poland-mode .navbar {
	background: linear-gradient(to bottom, #bd4148, #dc1414);
}

body.poland-mode .logo {
	color: var(--polska-white)
}

body.poland-mode .logo-text {
	color: white;
}

body.poland-mode .nav-links li a {
	color: white;
}

body.poland-mode .nav-links li a:hover {
	color: #220000;
	background-color: white;
}

body.poland-mode .nav-links li button::before {
	background: none;
}

body.poland-mode .nav-links li button {
	background-color: red;
	box-shadow: 0px 0px 6px 5px rgba(109, 0, 0, 0.219);
	position: relative;
	overflow: hidden;
}

body.poland-mode .nav-links li button::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: white;
	width: 100%;
	height: 50%;
}

body.poland-mode .profile-image img {
	width: 100%;
	animation: header-content 300ms ease;
	background: linear-gradient(rgba(255, 255, 255, 0.534) 50%, rgba(255, 0, 0, 0.551) 50% 100%);
	border-radius: var(--border-radius);
}

body.poland-mode .header-content-special {
	font-size: 50px;
	color: red;
}

body.poland-mode .header-content {
	background-color: var(--polska-section-color)
}

body.poland-mode .header-content h1 {
	border-bottom-color: red;
}

body.poland-mode .profile-image-cover {
	background: linear-gradient(185deg, transparent 40% 60%, var(--polska-section-color) 85%, var(--polska-section-color) 90%);
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}


body.poland-mode .hamburger {
	color: white;
}

@media (max-width: 768px) {
	/* body.poland-mode .nav-links {
		background-color: var(--polska-red);
		/*Ale oczopląs*/
	} 
	



body.poland-mode .section-stats {
	background: linear-gradient(to bottom, #bd4148, #dc1414);
}

body.poland-mode .section-stats h2 {
	color: white;
}

body.poland-mode .stat-box {
	border-color: white;
	background: linear-gradient(to bottom, #ff0000,#231212);
}

body.poland-mode .stat-box h3 {
	color: white;
}
body.poland-mode .club-stats h2{
	background: linear-gradient(to bottom, #ff0000,#231212);
	border: 4px solid white;
	color: white;
}
body.poland-mode .about-section {
	background-color: var(--polska-section-color);
	color: white;
}

body.poland-mode .about-section article h3 {
	background-color: var(--polska-red-dark);
	color: white;
}

body.poland-mode .about-section article h4 {
	background-color: #ffcaca;
	color: black;
	border-radius: 5px;
}
body.poland-mode .general-stats-section h2 {
	background: var(--polska-section-color);
}
body.poland-mode .general-stats-section .grid article:nth-child(1){background-color: var(--polska-red-dark);}
body.poland-mode .general-stats-section .grid article:nth-child(2){background-color: var(--yellow-highlight);}
body.poland-mode .general-stats-section .grid article:nth-child(3){background-color: var(--barca-blue);}
body.poland-mode .about-section-image::after{
	background:var(--polska-red-dark);	
} 
body.poland-mode .section__matches
{
	background-color: white;
}
body.poland-mode .section__matches h2
{
	background-color: var(--polska-red);
	color: white;
}
body.poland-mode .section__matches th
{
	color: var(--barca-red)
}
body.poland-mode .section__matches tr:hover:has(:not(th))
{
	background-color: #ff5959;
}
body.poland-mode select{
	background:var(--section-color);
}
/* Przyciski i elementy */


/* Style dla listy meczów */
.section-stats {
	background: linear-gradient(135deg, #002147, #A50044);
	color: white;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	padding: 2rem 2rem;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 10px;
	width: 100%;
}
.section-stats h1{
	font-size: 34px;
	color: var(--barca-red);
}
body.poland-mode .section-stats h1{
	color: white;
}
.section-stats-center
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	justify-content: center;
}
@media (max-width: 1400px) {
	
	.section-stats-center
	{
		grid-template-columns: 1fr !important;
	}
}
.section-stats h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: var(--barca-red);
}

.stats {
	display: flex;
	justify-content: space-around;
	text-align: center;
	margin-top: 2rem;
	gap: 2rem;
}

.stat-box {
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid var(--barca-gold);
	color: white;
	padding: 2rem;
	border-radius: 15px;
	width: 160px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
	transition: transform 0.3s ease;
}

.stat-box:hover {
	transform: scale(1.1, 1.1);
}

.stat-box h3 {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	color: var(--barca-gold);
}

.stat-box p {
	font-size: 1.1rem;
}
.choose-club
{
	margin: 10px;
	padding: 20px;
	display: flex;
	gap: 20px;
	justify-content: space-around;
}

.choose-club button {
	width: 100px;
	border: none;
	
	background-color:transparent;
	border-radius: 50%;
}

.choose-club button img {
	width: 100%;
	height: 100%;
	background-color:transparent;
	transition: transform 100ms ease;
}

.choose-club button img:hover {
	transform: scale(1.3,1.3) translateY(-10px);
}
.club-stats h2{
	color: var(--barca-gold);
	text-align: center;
	border: 5px solid var(--barca-red);
	background-color: var(--barca-blue);
	padding: 20px;
	border-radius: var(--border-radius);
}
.stat-box
{
	padding: 20px;
	background-color: var(--barca-blue);
	display: grid;
	grid-template-rows: 1fr 1fr;
	text-align: center;
}
.stat-box-special
{text-align: center;
	display: block;
	font-size: 40px;
	color: var(--barca-gold);
}
.club-stats-grid
{
	display: grid;
	margin-bottom: 50px;
	gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
}
select
{
	color: white;
	padding: 20px;
	margin: 10px;
	font-size: 24px;
	background-color: var(--barca-blue);
	border-radius: 10px;
	border: 2px solid white;
}
@media (max-width: 600px){
    .sectionmatches
    {
        font-size: 10px;
    }
    .sectionmatches th{
        padding: 3px;
    }
    .club-stats-grid
    {
        grid-template-columns: 1fr 1fr !important;
    }
    .club-stats-grid .stat-box
    {
        width: 100%;
    }
    .section-stats-center .section-stats .stats
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .section-stats-center .section-stats .stats .stat-box
    {
        width: 100%;
        padding: 0;
    }
}