@font-face {
	font-family: 'MojaNiestandardowaCzcionka';
	src: url("./media/Zyzol.otf") format('opentype');
}

@font-face {
	font-family: 'LEEPLOGO';
	src: url("./media/Lostar.ttf") format('truetype');
}

@font-face {
	font-family: 'DERACIZFONT';
	src: url("./media/BEERG___.TTF") format('truetype');
}

* {
	font-family: DERACIZFONT;
	box-sizing: border-box; /* Dodano box-sizing */
	margin: 0; /* Resetowanie marginesów */
	padding: 0; /* Resetowanie paddingów */
}

body {
	background-color: #060208;
	margin: 0;
	color: #f7f7f7;
	overflow-x: hidden; /* Zapobiega przewijaniu poziomemu */
	width: 100vw; /* Ustawienie szerokości na 100% widoku */
}

body::before {
	--line: hsl(0 0% 95% / 0.15);
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
		linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
	-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(30%, transparent), color-stop(100%, white)); /* Prefiks dla Safari */
	mask-image: linear-gradient(-15deg, transparent 30%, white);
	top: 0;
	z-index: -1;
	-webkit-transform: translate3d(0, 0, -100vmin); /* Prefiks dla Safari */
	transform: translate3d(0, 0, -100vmin);
}

.main-section {
	height: 100vh;
	overflow-x: hidden; /* Zapobiega przewijaniu poziomemu */
}

.main-section3 {

	height: 70vh;
}

.logo-container {
	display: flex;
	justify-content: center; /* Wyśrodkowanie w poziomie */
	flex-direction: column;
	align-items: center; /* Wyśrodkowanie w pionie */
	height: 100vh; /* Pełna wysokość widoku, aby wyśrodkować pionowo */
}

.footertesxt {

	margin-top: 2rem;
	height: 6rem;
	padding: 20px;
	opacity: 8%;
	text-transform: uppercase;
	text-align: center;
}

.products-container {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center; /* Wyśrodkowanie elementów w poziomie */
	align-items: center; /* Wyśrodkowanie elementów w pionie */
	max-width: 100%; /* Zapobiega przekroczeniu szerokości rodzica */
	padding: 0 20px; /* Dodaje padding po bokach */
	overflow: hidden;
	
}

.product {
	background-color: rgba(20, 20, 20, 0.651);
	max-width: 300px;
	width: 100%;
	border-radius: 10px;
	padding: 10px;
	position: relative; /* Ustawienie pozycji relatywnej */
	padding-bottom: 40px; /* Przestrzeń na tekst na dole */
	border: 3px solid #100518  ;
	box-shadow: inset 0 0 5px #100518,inset 0 0 10px #401c50 ,inset 0 0 15px #100518,inset 0 0 20px #401c50 ;

}


.product img {
	width: 100%;
	
	object-fit: contain;
	max-width: 100%;
	border-radius: 5px; /* Zaokrąglenie górnych rogów obrazu */
}

.name {
	position: absolute; /* Ustawienie pozycji absolutnej */
	bottom: 0; /* Przesunięcie do dołu */
	left: 50%;
	transform: translateX(-50%); /* Wyśrodkowanie w poziomie */
	width: 100%;
	text-align: center; /* Wyśrodkowanie tekstu */
	color: #fff; /* Kolor tekstu */
	padding: 30px 0; /* Odstęp wewnętrzny */
	margin: 0;

	
}


.fade-out {
	animation: fadeOut 0.4s forwards;
}

.fade-in {
	animation: fadeIn 0.4s forwards;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}


  /* Firefox */
  * {
    scrollbar-color: #00000000 #00000000;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
	display: none;

  }

  *::-webkit-scrollbar-track {
	display: none;

  }

  *::-webkit-scrollbar-thumb {
	display: none;

  }