@font-face {
			font-family: "GentiumPlus";
			src: url(GentiumBookPlus-Bold.ttf);
			font-weight: bold;
			font-style: normal;
		}
		@font-face {
			font-family: "GentiumPlus";
			src: url(GentiumBookPlus-BoldItalic.ttf);
			font-weight: bold;
			font-style: italic;
		}
		@font-face {
			font-family: "GentiumPlus";
			src: url(GentiumBookPlus-Italic.ttf);
			font-weight: normal;
			font-style: italic;
		}
		@font-face {
			font-family: "GentiumPlus";
			src: url(GentiumBookPlus-Regular.ttf);
			font-weight: normal;
			font-style: normal;
		}


		/* Reset i bazowe ustawienia */
		html, body {
		  background-color: #be9e73;
		  height: 100%;
		  margin: 0;
		  font-family: "GentiumPlus", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		  font-size: 110%;
		  scroll-behavior: smooth;
		}
		a {
			color: #000;
			opacity: 0.8;
			text-decoration: underline dotted 	#be9e73;
		}	
		a:hover {
			opacity: 1;
		}
		.main {	
			padding: 0; 
			margin: auto;	
			width: 100%;
			min-height: 600px;			
			max-width: 900px;
		}
		.main p, h1, h2, h3 {
			padding-left: 10px; 
			padding-right: 10px; 
		}

		.hero {
		  position: relative;
		  height: 100svh;    /* lepsze na mobile (dynamiczne paski przeglądarki) */
		  height: 100vh;     /* fallback */
		  width: 100%;
		  overflow: hidden;
		  background: #000;
		}

		.hero video {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;      /* wypełnia, przycina nadmiar */
		  object-position: center;/* kadrowanie ze środka */
		  display: block;
		}
		
		#scroll-indicator {
			position: absolute;
			bottom: 24px;
			right: 24px;
			background: none;
			border: none;
			font-size: 48px;
			color: white;
			cursor: pointer;
			animation: bounce 1.5s infinite;
			opacity: 0.8;
		}

		#scroll-indicator:hover {
			opacity: 1;
		}
		
		#post-list img {
			width: 200px;
			float: left;
			padding-top: 8px;
			padding-right: 10px;
			border-radius: 25px;
		}
		
		.responsive-iframe {
		  width: 100%;
		  aspect-ratio: 16 / 9;
		  border-radius: 25px;
		}


		@keyframes bounce {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(8px); }
		}
		
		.box {
			margin: 10px;
			background-color: rgba(252, 248, 242, 0.8);
			border-radius: 20px;
			padding: 10px;
		}
		
		@media (hover: none) and (pointer: coarse) {
		  .hero {
			height: auto;        /* mniejszy hero na mobile */
			max-height: 600px;    /* zabezpieczenie */
		  }

		  .hero video {
			object-fit: contain; /* kluczowe */
			background: #000;    /* pasy na czarno */
		  }
		}