@charset "utf-8";
/* import fontu z google */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*
font-family: "Inter", sans-serif;
*/

/* SELEKTORY GLOBALNE */
*{
	transition: 1s;
	box-sizing: border-box;/*żeby paddingi nie zwiększały szer. boxu - kontrola nad responsywnością*/
}
html{
	font-family: "Inter", sans-serif;
	font-size: 16px;/*domyślnie*/
	font-size: 10px;/*1rem=10px*/
	scroll-behavior: smooth;
}
body{
	font-size: 1.6rem;
}

/*wszystkie hiperłącza*/
a{
	text-decoration: none;
}

/*wszystkie obrazki*/
img{
	max-width: 100%;
}

h1{
/*background-color: aqua;*/
	font-size: 7rem;
	font-weight: 700;
	padding: 01rem 0;
}
h2{
	font-size: 3rem;
	font-weight: 700;
	padding: 1rem 0;
}
h3{
	font-size: 2rem;
	font-weight: 700;
	padding: 1rem 0;
}
p{
	line-height: 140%;
}



/********************/
/* NAWIGACJA mobile */
.burger{
	background-color: #222;
	color: #fff;
	position: fixed;
	top: 2rem;
	right: 2rem;
	font-size: 3rem;
	padding: .5rem .65rem;/*by uzyskać rozmiar 40x40px*/
	display: none;
	cursor: pointer;
	z-index: 1;/*kolejność - ponad elementami sekcji*/
}
.burger:hover{
	background-color: #eee;
	color: #222;
}

.nakladka{
	background-color: rgba(0,0,0,.9);
	position: fixed;
	top: 0;/*żeby zwijała się do górnej krawędzi*/
	right: 0;/*żeby zwijała się do prawej krawędzi*/
	height: 100%;
	width: 0;/*ten parametr będzie zmieniany za pomocą funkcji w JavaScript*/
	overflow: hidden;/* żeby nie wystawała zawartość gdy szer./wys. równa 0 */
	z-index: 2;/*kolejność - ponad burgerem*/
	display: flex;
	justify-content: center;
	align-items: center;
	/*opacity: .9;/*żeby widzieć ikonę burger*/
}
.nakladka ol{
/*	background-color: red;*/
	width: 90%;
	text-align: center;
}
.nakladka ol li{}
.nakladka ol li a{
	color: #eee;
/*	background-color: yellow;*/
	padding: 1.2rem;
	display: block;/*by wpływały na otoczenie rozmiarem*/
	margin-bottom: 3vh;
}
.nakladka ol li a:hover{
	background-color: #eee;
	color: #222;
}

.zamknijX{
	background-color: #eee;
	position: absolute;/*pozycja względem kontenera nadrz. "nakladka" */
	top: 2rem;
	right: 2rem;
	font-size: 3.5rem;
	padding: 0 1.022rem .5rem;/*by uzyskać rozmiar 40x40px*/
	cursor: pointer;
}
.zamknijX:hover{
	background: none;
	color: #fff;
}

/* NAWIGACJA desktop */
nav{
	background-color: #333;
	position: fixed;
	width: 100%;
	display: flex;
	justify-content: center;
}
nav ol{
/*	background-color: greenyellow;*/
	max-width: 1400px;
	display: flex;
	justify-content: space-evenly;
}
nav ol li{}
nav ol li a{
/*	background-color: aqua;*/
	padding: 1rem 2vw;
	display: block;
	color: #fff;
}
nav ol li a:hover{
	background-color: #eee;
	color: #333;
}

/********************/
/* WSZYSTKIE SEKCJE */
section{
/*	background-color: burlywood;*/
	min-height: 100vh;
	padding: 6vh 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.zawartosc{
/*	background-color: red;*/
	max-width: 900px;/*nie widać przez flex*/
	width: 100%;
	display: flex;
	gap: 2rem;
}

/* POSZCZEGÓLNE SEKCJE */
#zerowa {
	background-color: #F8F6F6;
/*	padding-top: 100px;*/
}
#zerowa .zawartosc{
	justify-content: left;
	align-items: center;	
	flex-wrap: wrap;
}
#zerowa article{
/*	background-color: green;*/
	flex: 1 1 300px;
}
#pierwsza{
	background: url("../img/change1.png") no-repeat left center fixed;
	background-size: 20%;
	background-position: left 20% center;
}
#pierwsza .zawartosc{
	/*FLEX CONTAINER*/
	flex-wrap: wrap;/*ściśle połączone z flex-basis podane dla flex item*/
	justify-content: right;
}
#pierwsza article{
	/*FLEX ITEMS*/
	flex: 0 1 400px;/*połączone z flex-wrap dla flex container - definiuje ile jest w rzędzie*/
/*	background-color: yellow;*/
}
#pierwsza article h2{
	font-size: 2rem;
	font-weight: 700;
	padding: 1rem 0;
}
#druga{
	background: url(../img/change2.png) no-repeat left center fixed;
	background-size: 20%;
	background-position: left 20% center;
}
#druga .zawartosc{
/*	background-color: red;*/
	flex-wrap: wrap;/*zależne od flex dla items*/
	justify-content: right;
}
#druga article{
	flex: 0 1 400px;
}
#druga article img{}
#druga article p{}
/* width */
#druga .zawartosc::-webkit-scrollbar {
  width: 0;	
}
/* Track */
#druga .zawartosc::-webkit-scrollbar-track {
  background-color: cornflowerblue;
	margin: 35vw;
}
/* Handle */
#druga .zawartosc::-webkit-scrollbar-thumb {
  background-color: darkviolet;
}
/* Handle on hover */
#druga .zawartosc::-webkit-scrollbar-thumb:hover {
  background: #fff;
}


#trzecia{
	background: url(../img/change3.png) no-repeat left center fixed;
	background-size: 20%;
	background-position: left 20% center;
}
#trzecia article{
	flex: 0 1 400px;
}
#trzecia .zawartosc{
	flex-wrap: wrap;
	justify-content: right;
}
#czwarta{
	background: url(../img/change4.png) no-repeat left center fixed;
	background-size: 20%;
	background-position: left 20% center;
}
#czwarta article{
	flex: 0 1 400px;
}
#czwarta .zawartosc{
	flex-wrap: wrap;
	justify-content: right;
}
#stopka{
background-color:#E0C9FF;
color: #000000;
	min-height: 10vh;
}
#stopka .zawartosc{
	flex-direction: row;
	justify-content: center;
}
input{
	background-color: white;
	font-weight: bold;
	padding: 15px 40px;
	border: none;
  	border-radius: 40px;
	
}

.wyslij {

  position:absolute;
margin-top: 10px;

  padding: 20px 20px;
  background-color:black;
  color: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;

}
.copyright{
	align-content: center;
	align-items: center;
}

/*******************************/
/**************RWD**************/
@media all and (max-width:750px){
	.burger{
		display: block;
	}
	nav{
		display: none;/*nawigacja desktopowa znika*/
	}
	section{
		min-height: 100vh;
/*		background-size: 100%;*/
		
	}
	
	#zerowa .zawartosc{
		flex-direction: column-reverse;
/*		background-color: green;*/
	}
	#zerowa article{
		flex: 1 1 auto;
	}
	#zerowa h1{
		text-align: center;
		font-size: 12vw;
	}
	
	#pierwsza{
		background: url("../img/change1.png") no-repeat center fixed;
		background-size: 80%;
	}
	#pierwsza .zawartosc{
		background-color: rgba(255,255,255,.5);
		padding: 2rem;
	}
	#pierwsza article{
		flex: 1 1 300px;
	}
	#druga{
		background: url("../img/change2.png") no-repeat center fixed;
		background-size: 80%;

}
	#druga .zawartosc{
		background-color: rgba(255,255,255,.5);
		padding: 2rem;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow: scroll;
		padding-left: 2rem;
		padding-bottom: 4rem;
	}
	#druga article{
		flex: 1 0 280px;
	}
	#trzecia{
		background: url("../img/change3.png") no-repeat center fixed;
		background-size: 80%;
	}
	#trzecia .zawartosc{
		background-color: rgba(255,255,255,.5);
		padding: 2rem;
	}
	#czwarta{
		background: url("../img/change4.png") no-repeat center fixed;
		background-size: 80%;
	}
	#czwarta .zawartosc{
		background-color: rgba(255,255,255,.5);
		padding: 2rem;
	}
	#stopka .zawartosc{
        flex-direction: column;
        align-items: center;
        gap: 10rem;
	}
	
	/*koniec stylów od 0px do szer. 600px*/