@charset "UTF-8";
/* import fontu z Google */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Gasoek+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poller+One&display=swap');
/*
font-family: "Cabin", sans-serif;
*/


/* Selektory globalne */
*{transition: 1s;
box-sizing: border-box; /*zeby paddingi nie zwiekszaly szerokosci boxow */
	
}
html{scroll-behavior: smooth;
	font-family: "Archivo", sans-serif;
	font-size: 10px; /*1 rem = 10px */
	
	
}
body{overflow-x: hidden;
	background-color: #FFFAEC;
	font-size: 1.6rem;
}

h1{
	font-family: "Poller One"
}
h2{}
h3{}
h4{}
h5{}
h6{}


p{line-height: 140%;}

a{text-decoration: none;}


/*Nawigacja mobile*/
.burger{border-radius: 20px;
	background-color: #D5685A;
	color: #FFFAEC;
	position: fixed;
	top: 2rem;
	right: 2rem;
	font-size: 30px;
	padding: 5px 6px 3px;
	cursor: pointer;
	display: none;
	z-index: 1;
}
.burger:hover{
	background-color: #B91C1D;
	color: #D5685A;
}
.nakladka{margin-top: 500px;
	background-color: #B91C1D;
	opacity: .9;
	z-index: 2;
	position: fixed;
	height: 100%;
	width: 0%;/* zmiana skryptem na 100%*/
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nakladka ol{
/*	background-color: blue;*/
	width: 100%;
	
	
}
.nakladka ol li{}
.nakladka ol li a{
	font-family: "Archivo";
	color: #FFFAEC;
	text-align: center;
	display: block;
	padding: 2rem;
}

.nakladka ol li a:hover{
	background-color: #FFFAEC;
	color: #B91C1D;
}

.zamknijX{color: #B91C1D;
	background-color: #FFFAEC;
	font-size: 4rem;
	position: absolute;
	top: 2rem;
	right: 2rem;
	padding: 0 .8rem .4rem;
	cursor: pointer;
	
}
.zamknijX:hover{
	background-color: #B91C1D;
	color: #FFFAEC;
}




/*Nawigacja desktop */


nav {margin: 20px;
	display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFFAEC;
  border: 3px solid #B91C1D;
  border-radius: 30px;
  padding: 15px 40px;
  position: fixed;
	top: 0;
	left: 0;
	right: 0;
  z-index: 1000;
	color: #B91C1D;
}

nav a{color: #B91C1D;
		font-family: "Poller One";
		font-size: 20px;
		transition: background-color 0.3s, color 0.3s;}


nav ol {padding: 0 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav li a {font-family: "Archivo";
		  text-decoration: none;
		  color: #B91C1D;
		  font-size: 16px;
		  text-transform: uppercase;
		  padding: 17px 25px;
		  transition: background-color 0.3s, color 0.3s;
}

nav li a:hover {
  background-color: #B91C1D;
  color: #FFFAEC;

}



/* Wszystkie sekscje i ich cechy wspolne */
section{
	
	padding: 2rem;
	/* uruchamiamy flexbox */

}
.zawartosc{
	height: 100%;
	
	
}


/*Poszczegolne sekcje*/
#pierwsza{
	background-image: url("../img/mozg 1.png");
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
	margin-top: -500px;
	height: 2000px;
	display: flex;
	align-items: flex-end;
	/*padding: 0 0 200px 0;*/

}
#pierwsza .zawartosc{margin-left: 13%;
					/*background-color: aquamarine;*/
					height: 70%;
					display: inline-flex;
					align-items:flex-end;}

#pierwsza article{/*background-color: darkmagenta;*/
				line-height: 140%;
				width: 300px;
				display: inline;
				margin-left: 5%;
				color: #CF0000;
				font-family: Archivo;
				font-size: 16px;
				text-align: justify;}

#pierwsza article:hover{transform: scale(1.1)}

article h1{font-size: 40px;
			padding: 0 0 20px;}

#druga{margin-top: 130px;
	background-image: url("../img/oko.jpg");
	background-repeat: no-repeat;
	background-color: #B91C1D;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

#druga .zawartosc{padding: 30px 40px 0 0;
					margin-right: 13%}

#druga article{border-radius: 52px;
				font-size: 18px;
				border: 5px solid #B91C1D;
				background: #FFFAEC;
				padding: 30px 40px;
				width: 568px;
				line-height: 140%;
				color: #B91C1D;
				font-family: "Archivo";
				}

#druga article p:hover{color: #222222; font-weight: 550;}

#trzecia{background-image: url("../img/uszy.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		margin-top: 120px;
		min-height: 80vh;}

#trzecia .zawartosc{justify-content: center;
					display: flex;
					padding: 0 25% 40px}

#trzecia article{text-align: center;
				color: #B91C1D;
				font-size: 18px;
				font-family: "Archivo";}

#trzecia article:hover{transform: translateY(30px)}

#czwarta{}

#czwarta .zawartosc{display: flex;
					justify-content: center;
					align-items: center;
					padding: 30px 40px;
					gap: 5%;}

#czwarta .opis{padding: 40px 0; display: flex;
			flex-direction: column;
			gap: 5%;}

#czwarta article{width: 535px;
				border-radius: 52px;
				border: 5px solid #B91C1D;
				padding: 30px 40px;
				color: #B91C1D;
				font-size: 16px;
				line-height: 140%;}

#czwarta .ciekawostka{width: 535px;
					border-radius: 52px;
					background-color: #B91C1D;
					padding: 30px 40px;
					margin-top: 30px;
					color: #FFFAEC;
					font-size: 16px;
					line-height: 140%;
				}

#czwarta .lapy{border-radius: 52px;
				border: 5px solid #B91C1D;
				overflow: hidden;}

#czwarta img{display: block}
				

#piata{
	background-position: top;
	background-image:url("../img/gradient 1.png");
	background-size: cover;
	background-repeat: no-repeat;
}

#piata .zawartosc{display: flex;
				align-items: flex-end;
				/*background-color: cornflowerblue;*/}

#piata .waz{display: flex;
			margin-left: -30px;
			/*background-color: darkmagenta;*/}

#piata article{display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: baseline;
			width: 485px;
			padding: 0 30px 0 0;
			line-height: 140%;
			color: #CF0000;
			font-family: Archivo;
			font-size: 18px;
			/*background-color: aquamarine;*/
			margin-bottom: 120px;}

#piata article:hover{transform: rotate(10deg)}

#szosta{/*margin-top: -100px;*/
		background-image: url("../img/nos.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		height: 1000px;
		display: flex;
		}

#szosta .zawartosc{align-content: flex-end;
		justify-content: center;
		/*background-color: aqua;*/
		padding: 0 0 50px 90px}


#szosta article{width: 535px;
				border-radius: 52px;
				border: 5px solid #B91C1D;
				padding: 30px 40px;
				color: #B91C1D;
				font-size: 16px;
				line-height: 140%;
				background-color: #FFFAEC;}

/*Stopka*/
#stopka{
	flex-direction: column;
	background-color: #B91C1D;
}

#stopka .zawartosc{
	color: white;
	display:flex;
	flex-flow:row wrap;
	justify-content: center;
	gap: 5%;
	
}

#stopka a{color: #FFFAEC;}

#stopka a:hover{
	color: #D5685A;
	transition: 400ms;
	
	
}
#stopka h1{font-family: Nunito Sans;
			font-size: 20px;
			font-weight: 900;
			color: #FFFAEC;
			padding: 20px 0px;}

#stopka article
	{color:aliceblue;
	display: flex;
	flex-direction: column;
		text-align: center;
padding: 70px 0px;
		font-family: DM Sans;
			font-size: 16px;}

#stopka input{border-radius: 15px; padding: 2px 8px; margin: 2px; color: #B91C1D; background-color: #FFFEED; font-family: DM Sans; border: none; height: 28px;}

#stopka button{border: none; background-color: #FFFAEC; border-radius: 15px; padding: 8px 40px; color: #B91C1D; font-family: DM Sans; font-weight: 700;}

#stopka button:hover{
	background-color: #D5685A; 
	color: aliceblue;
	font-weight: 700;
	transition: 400ms}

#stopka .copyright{
	text-align: center;
	font-size:10;
	justify-content:center;
	flex:700px;
	color: #FFFFFF;
	font-family: Archivo;
	padding: 0px 0px 40px}
		






/****************************************************/
/***********************RWD**************************/
@media all and (max-width:1100px){}
@media all and (max-width:900px){}
@media all and (max-width:600px){
	/*MOBILE*/
	.burger{
		display: block;
	}
	nav{
		display: none;
	}
	section{}
		
	
	#pierwsza{
	display: flex;
	align-items: flex-end;
	/*padding: 0 0 200px 0;*/

}
#pierwsza .zawartosc{
					margin-left: 16%;
					height: 50%;
					/*background-color: aquamarine;*/
					display: flex;
					align-items:flex-end;}

#pierwsza article{/*background-color: darkmagenta;*/
				line-height: 140%;
				padding: 30px 0 0;
				width: 300px;
				display: inline;
				margin-left: 5%;
				color: #CF0000;
				font-family: Archivo;
				font-size: 16px;
				text-align: justify;}

	article h1{font-size: 40px;
			padding: 40px 0 20px;}
	
	#druga{height: 700px; 
		margin-top: 130px;
		background-image: url("../img/oko.jpg");
		background-repeat: no-repeat;
		background-color: #B91C1D;
		display: inherit;
		justify-content: center;
		align-items: center;
}

#druga .zawartosc{width: 1vw; 
				/*background-color: aqua;*/ 
				justify-content: center;
				align-items: center;
				padding: 0 170px 0 70px}

#druga article{border-radius: 52px;
				font-size: 14px;
				width: 300px;
				border: 5px solid #B91C1D;
				background: #FFFAEC;
				padding: 30px 30px;
				line-height: 140%;
				color: #B91C1D;
				font-family: "Archivo";
				}
	
#trzecia{background-size: contain;
	background-position: center;
		margin-top: 80px;
		height: 1100px;}

#trzecia .zawartosc{height: 300px;
					justify-content: center;
					display: flex;
					padding: 0 20px;}

#trzecia article{padding: 0}
	
#czwarta{margin-top: -430px;
		padding: 0 20px;}

#czwarta .zawartosc{display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					padding: 30px 0;
					gap: 5%;}

#czwarta .opis{padding: 40px 20px; display: flex;
			flex-direction: column;
			gap: 5%; 
			justify-content: center; 
			align-items: center;}

#czwarta article{width: 400px;
				padding: 30px 40px;}

#czwarta .ciekawostka{width: 400px;
					padding: 30px 40px;}
	
#piata{}

#piata .zawartosc{display: flex;
				flex-wrap: wrap;
				align-items: flex-start;}

#piata .waz{display: flex;
			margin-left: -270px;
			margin-top: -250px;}

#piata img{transform: scale(50%)}

#piata article{margin-top: -200px;
			display: flex;
			flex-direction: column;
			width: 485px;
			padding: 0 50px;}
	
#szosta{/*margin-top: -100px;*/
		background-size: contain;
		background-position: bottom;
		height: 1000px;
		display: flex;
		}

#szosta .zawartosc{margin: 0 15%;
		align-content: flex-start;
		justify-content: center;
		/*background-color: aqua;*/
		padding: 0}


#szosta article{width: 300px;
				padding: 30px 40px;


				
		
	} /*koniec 600px*/
@media all and (max-width:400px){}