* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: 0;
}

body {
			font-family: Lato, sans-serif;
			background-image: url("grafiki/tlo.jpg");
		}

/* header */
 
header {
	margin: 1rem 1rem 0 1rem;
	height: 80px;
	padding: 0 5%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #222;
}

/*mandala logo*/

h1 {
margin: 1em 0;
font: 2em "carta-marina", sans-serif; 
color: #20723d;
font-weight: 500;
z-index: 101;
}

h1 a {
	color: #20723d;
	text-decoration: none;
}

a {
	color: #d6fadc;
}

/* menu desktop */

nav ul {
	display: flex;
	list-style: none;
	gap: 30px;
}

nav a {
	color: #d6fadc;
	text-decoration: none;
	font-size: 17px;
	transition: 0.3s;
}

nav a:hover {
	opacity: 0.6;
}

/*przycisk trzy kreski*/

.zmiana {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 45px;
	height: 45px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	z-index: 101;
}

.zmiana span {
	display: block;
	width: 30px;
	height: 3px;
	background-color: #20723d;
	transition: 0.3s;
}

/* treść strony */

main {
	min-height: calc(100vh - 180px);
	padding: 50px 5% 50px;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	flex-wrap: wrap;
	background-color: #58a76d;
	margin: 0 1rem;
}



main h1 {
	font-size: 50px;
}

main p {
	font-size: 20px;
	padding-bottom: 2rem;
}

main .tekst p {
	padding-bottom: 2rem;
}

#mandala {
	min-width: 200px;
	min-height: 200px;
	justify-content: center;
	align-items: center;
}

#mandala img {
	margin: 30px;
}

.tekst {
	padding: 2rem;
}

.tekst a {
	color: #d6fadc;
}

/* napisz do mnie */

.tekst button {
	background: linear-gradient(to left, #20723d, gold);
	box-shadow: 2px 2px 5px #222;
	color: #222;
	padding: 20px 40px;
	margin: 5px 0 20px;
	font-size: 20px;
	border: none;
	border-radius: 7px;
	color: #222;
}

.tekst button a {
	color: #222;
	text-decoration: none;
}

/* projekty */

main#pro ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	gap: 30px;

}


main#pro ul a {
	display: block;
	width: 370px;
	padding: 10px;
	background: linear-gradient(to left, #20723d, gold);
	color: #222;
	text-decoration: none;
	font-size: 17px;
	box-shadow: 3px 3px 3px #222;
	transition: 0.3s;
}

/* kontakt */

main#kont section:nth-child(2) {
 		padding-top: 30px;
		}

.dane p:nth-child(1) {
	padding-bottom: 5px;
}

main#kont h2 {
	margin: 20px 0;
}

/* footer */

footer {
	margin: 0 1rem 1rem 1rem;
	padding: 2%;
	background-color: #222;
	color: #d6fadc;
}

/* widok mobilny */

@media (max-width: 768px) {
	/* pokazujemy trzy linie */

	.zmiana {
		display: flex;
	}

	/* projekty */

	main#pro ul a {
		width: 90%;
	}

	/* blog */

	main#blog p, main#blog img {
		width: 90%;
	}

	/* menu zajmie całą stronę */

	nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: #d6fadc;
		display: flex;
		justify-content: center;
		align-items: center;
		/* początkowo ukryte */
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 100;
	}

	nav.active {
		opacity: 1;
		visibility: visible;
	}

	/* linki jeden pod drugim */

	nav ul {
		flex-direction: column;
		align-items: center;
		gap: 30px;
	}

	nav a {
		color: #20723d;
		font-size: 32px;
	}

		/* ANIMACJA HAMBURGERA W X */

			.zmiana.active span:nth-child(1) {
				transform: rotate(45deg) translate(7px,  7px);
			}

			.zmiana.active span:nth-child(2) {
				opacity: 0;
			}

			.zmiana.active span:nth-child(3) {
				transform: rotate(-45deg) translate(6px, -6px);
			}

			main h1 {
				font-size: 35px;
			}

	}


/* desktop */

@media (min-width: 1000px) {
 
 header, main, footer {
 	width: 1000px;
 }


 header {
 	margin: 1rem auto 0 auto;
 } 

 main {
 	margin: 0 auto;
 }

 footer {
 	margin: 0 auto 1rem auto;
 }


}