<style>
*{
	box-sizing: border-box;
}
body {
  font-family: "Jersey 15", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:20px;
   color:#FFFFFF;
}
h3{
	margin:2% 0 2%;
}
h1 {
	margin:auto;
}
.logosection{
	grid-area: logosection;
}
.logo {
	display: inline-block;
	cursor: pointer;
}
.logo.ane{
    animation: spin360 1s linear ;
}
@keyframes spin360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.nav { grid-area: nav;
	display: flex;
	justify-content: flex-end; /* po prawej */
	align-items: center;       /* 50% wysokości */
 }
 .info{
	display:flex;
	flex-direction:column;
	justify-self: center;
	align-items: center;
}

.post{
	grid-area: post; 
	width:100%;
	background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
	justify-self: center;
}
#contactForm{
	display: flex;
	flex-direction: column;
	justify-self: center;
	align-items: center;
	width:100%;
}
.postinside{
	display: flex;
	flex-direction: column;
	justify-self: center;
	align-items: center;
	width:100%;
}
.textzone{
	border-color:black;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
	justify-self: center;
	width: 40%;
	margin:1px;
}
textarea{
	min-height:100px;
}
 .button1:hover {
	transform: scale(1.1); /* Powiększenie o 10% */
}
.button1 { 
	color:#FFFFFF;
	background-color:#0F021C;
	border: 2px solid #FFFFFF;
	padding:10px 50px;
	cursor: pointer;
	font-size:18px;
	border-radius: 8%;
	text-decoration: none;
	transition: transform 0.3s ease; /* Płynne przejście animacji */ /* Usuwa odstęp pod obrazkiem */
}
.banner {
	grid-area:banner;
	background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	justify-self: center;
	border-style:solid;
	border-width: 2px;
	margin:auto;
	  height: 275px;
  overflow: hidden;
}
.imagebanner{
	 width: 100%;
  height: 100%;
  object-fit: cover;
}
.text1{
	display: flex;
  flex-direction:column;
  color:#FFFFFF;
	grid-area: text1; 
	background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
}
.textrodo{
		display: flex;
  flex-direction:column;
  color:#FFFFFF;
	grid-area: text1; 
	background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
	align-items: left;
}
.textinfo {
	text-align:left;
	padding:1px;
	margin:0 10% 0 10%;
	padding:2px;
}
.textrodoinfo{
	margin:0 2% 0;
	padding:2px;
}
.photosmainsection{
	grid-area:photosmainsection;
		background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	justify-self: center;
	 align-items: center;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
		display:flex;
	flex-direction: row;
}
.photosmainsection2{
	grid-area:photosmainsection2;
		background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	justify-self: center;
	 align-items: center;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
		display:flex;
	flex-direction: row;
}
.photosmainsection3{
	grid-area:photosmainsection3;
		background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	justify-self: center;
	 align-items: center;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
		display:flex;
	flex-direction: row;
}
.section_left{ 
	grid-area: section_left; 
    justify-content: center; /* Poziomo */ 
	background-color:#0F021C;  
	border-color:white;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
}
.section_right { 
	grid-area: section_right; 
	display: flex;
	position: relative;
    justify-content: center; /* Poziomo */ 
	align-items: center;
	flex-direction: column;
	background-color:#0F021C; 
	border-color:white;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
}
.gallery {
	max-width: 100%;
	height: auto;
	display: block;
	border-style:solid;
	border-width: 1px;
	border-color: white;
	border-radius: 20px;
}
.photozone{
 padding: 2px;
}
.photo{
	max-height: 350px;
}
.zoom-img {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.zoom-img:hover {
  opacity: 0.9;
}
.zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  z-index: 1000;
  max-width: 40vw;
  max-height: 40vh;
  	border-style:solid;
	border-width: 2px;
	background-color:#0F021C;
	border-color:black;
	border-radius: 20px;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);

  opacity: 0;
  pointer-events: none;
  transition: 0.3s;

  z-index: 999;
}

/* aktywne tło */
#overlay.active {
  opacity: 1;
  pointer-events: all;
}
.socials_zone { 
	grid-area: socials_zone; /* Przypisanie do obszaru w siatce */
    justify-self: center;    /* Centruje CAŁY blok socials_zone w poziomie wewnątrz siatki */	
}
.socials_position {
	display: flex;
	flex-direction: row;
	gap :40px;   
	justify-self: center; 
	max-width: 100%;	
}
.aboutfriends{
	grid-area:aboutfriends;
	width:100%;
	background-color:#0F021C;
	border-color:white;
	border-radius: 20px;
	padding: 10px;
	border-style:solid;
	border-width: 2px;
	justify-self: center;
	display:flex;
	flex-direction:row;
}
.aboutfriendsinside{
	max-width: 33%;
	align-items: center;
	justify-self: center;
}
.friends {
	max-width: 250px;
	max-height:275px;
	align-items: center;
	justify-self: center;
}
.socials {
	width:auto;
	max-height: 130px;
	transition: transform 0.3s ease; /* Płynne przejście animacji */
    display: block; /* Usuwa odstęp pod obrazkiem */
    max-width: 100%; /* Obrazek nie wychodzi poza kontener */
}
.socials:hover {
	transform: scale(1.1); /* Powiększenie o 10% */
}
.footer { 
	grid-area: footer; 
	align-items: center;
	justify-self: center;
}
.rodo {
	display: inline-block;
    animation: rodo-animation 2s infinite ease-in-out;
	text-decoration: none;
	color:#FFFFFF;
}
@keyframes rodo-animation {
    0% { transform: scale(1); }
    50% { transform: scale(1.025); }
    100% { transform: scale(1); }
}
</style>