@font-face {
  font-family: 'NowThin';
  src: url("../fonts/Now-Thin.otf");
}
@font-face {
  font-family: 'NowRegular';
	src: url("../fonts/Now-Regular.otf");
}
@font-face {
  font-family: 'NowMedium';
  src: url("../fonts/Now-Medium.otf");
}
@font-face {
  font-family: 'NowBold';
  src: url("../fonts/Now-Bold.otf");
}
@font-face {
  font-family: 'NowBlack';
  src: url("../fonts/Now-Black.otf");
}
@font-face {
  font-family: 'NovaSquareRegular';
  src: url("../fonts/NovaSquare-Regular.ttf");
}
@font-face {
  font-family: 'PlayfairDisplay';
  src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf");
}

*{
	transition: 1s;
	box-sizing: border-box;
}

html{
	background-color: #FFFAED;
	scroll-behavior: smooth;
	
}
img{
	max-width: 100%;
}
h2{
/*	background-color: blue;*/
	max-width: 50%;
	color: #FFEA74;
	font-weight: 800;
	font-size: 60px;	
	text-transform: uppercase;
	line-height: 140%;
	font-family: "NowBlack"
}
h3{
	color: #60A348;
	font-size: 30px;
	line-height: 140%;
	font-family: "NowMedium";
}
p{
/*	background-color: yellowgreen;*/
	max-width: 50%;
	font-family: "NowMedium";
	color: #60A348;
	font-size: 18px;	
	font-weight: 500;
	line-height: 140%;
	text-align: center;
}
span{
	margin: 0;
}

/**********************/
section{
	height: 90vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem 2rem;
	overflow: hidden;


}
.zawartosc{
	max-width: 1200px;
	width: 100%;
/*
	background-color: red;
	opacity: .5;
*/
}

/*********************/

/****nav mobile***/
.burger{
	color: #F5B4D1;
	position: fixed;
	top: 2rem;
	right: 2rem;
	font-size: 3rem;
	padding: .5rem .6rem;
	cursor: pointer;
	z-index: 1;
	display: none!important;

}
.nakladka{
	background-color: #F5B4D1;
	position: fixed;
	right: 0;
	height: 100%;
	width: 0%;
	overflow: hidden;
	z-index: 2;
	display: flex;
	justify-content: center!important;
	align-items: center!important;

}
.nakladka ol {
/*	background-color: green;*/
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	justify-content:center!important;
	align-items: center;
}
.nakladka ol li{}
.nakladka ol li a{
/*	background-color: deeppink;*/
	display: block;
	padding: 1rem;
	margin-bottom: 1rem;
	color: #D50A88;
}
.nakladka ol li a:hover{
	background-color: #FFEA74;
}
.zamknijX{
	position: absolute;
	top: 2rem;
	right: 2rem;
	font-size: 3.5rem;
	padding: 0 1rem .5rem;
	cursor: pointer;
}

/*****nav desktop****/

.logo{
	font-family: "NowBold";
	font-size: 30px;
	justify-content: center;
	color: #FFEA74;
}

nav {
	  position: fixed;       
	  top: 50%;
	  left: 20px;         
	  transform: translateY(-50%);
	  display: flex;
	  flex-direction: column;
	  gap: 10px;      
	  z-index: 1000;
}
a{
	color: #78B3C3;
	text-decoration: none;
	font-family: "NowMedium";
	font-size: 20px;
	width: 40px;
 	height: 40px;
	border-radius: 50%;
	background-color: #FFEA74;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	margin: 20px;
}
a:hover{
	background-color: #78B3C3;
	color: #FFEA74;
}

/****************************/

@media all and (max-width:1364px){
	#trzecia .zawartosc{
		align-items: flex-start;
		background-size: 80%!important;
		margin-left:150px!important;}
	}

@media all and (max-width:1030px){
	#druga h2{
		margin-top: 200px !important;
	}
	
	#druga{
		background-position: center;
	}
	
	#trzecia .zawartosc{
		align-items: flex-start;
		background-size: 80%!important;
		margin-left:150px!important;
	}
	
	#piata .zawartosc{
		height: auto!important;
	}
	
	#szosta{
		padding-bottom: 0!important;
	}
}

@media all and (max-width:998px){
	
	#trzecia{
		background-size: 90%!important;
		background-position: right!important;
	}
	
	#trzecia .zawartosc{
		align-items: flex-start;
		margin-left:0px!important;
		width:60%;
	}
	
	#piata{
		max-height: auto!important;
	}
}

@media all and (max-width:946px){
	#piata{
		max-height: auto!important;
	}
	
	#szosta{
		padding: 0!important;
		background-image: none!important;
	}
}

@media all and (max-width:900px){
	
	p{
		font-size: 15px!important;
	}
	
	h2{
		font-size: 41px!important;
	}
	
	#pierwsza{
		background-size: 150%;
		justify-content: center;
		align-items: center!important;
	}
	
	#pierwsza .zycie{
		width: 120%;
		padding: 0;
		justify-content: center;
	}
	
	.parazaurolof{
		color: #FFEA74;
		font-size: 100px !important;		
 	}
	
	#druga{
		background-position: center!important;
		background-position: 80px!important;
	}
	
	#druga .zawartosc{
		min-height: 40vw;
	}
	
	#druga h2{
	margin-top: 250px !important;
	}

	#trzecia{
		background-size: 90%!important;
		background-position: right!important;
	}
	
	#trzecia .zawartosc{
		align-items: flex-start;
		margin-left:0px!important;
		width:60%;
	}

	}
	
	#trzecia p{
		max-width: 60%!important;
		padding-bottom: 30px;
		margin-top: 60px;
	}
	
	#czwarta{
		background-image: none!important;
		height: auto!important;
	}
	
	#czwarta .zawartosc{
		align-items: center!important;
	}
	
	#czwarta p{
		max-width: 60%!important;
		align-items: center;
		padding-bottom: 20px;
	}
	
	#czwarta img{
		display: block!important;
		width: 90%;
	}
	
	#piata h2{
		width: 100%!important;
		margin:0;
		padding-bottom: 20px;
	}
	
	#piata img{
		padding-left: 20px;
	}
	
	#szosta{
		background-image: none!important;
		padding-bottom: 50px!important;
	}
	
	#szosta h3{
		font-size: 25px!important;
		width: 70%;
	}
}

@media all and (max-width:693px) {
	#piata{
		height: auto!important;
	}
}


@media all and (max-width: 600px) {
	
	.burger{
		display: block!important;
		
	}
	nav{
		display: none;
	}
	h2{
		max-width: 100%!important;
		font-size: 40px!important;
	}
	p{
		max-width: 80%!important;
		font-size: 14px!important;
	}
	#pierwsza {
    display: block;
	align-items: flex-start!important;
	background-size: 160%;
	margin-left: 30px;
	height: auto!important;
	align-items: center!important;
  }
	#pierwsza .zycie{
		width: 80%;
		padding: 0;
		justify-content: center;
	}
 	#pierwsza .zawartosc {
	text-align: center!important;
  }
	#pierwsza h1{
	font-size: 60px!important;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
}

  	#pierwsza .zycie {
    position: relative;
/*    z-index: 1;*/
	 min-height: 35vh;

  }
	
	#druga{
		background-image: none!important;
		height: auto!important;
	}
	
	#druga .zawartosc{
		width: 100%!important;
	}
	
	#druga h2{
		margin-top: 0!important;
		font-size: 40px!important;
		width: 100%!important;
	}
	
	#druga img{
		display: block!important;
	}
	
	#druga p{
		width: 90%!important;
		align-items: center!important;
	}
	
	#druga .zawartosc{
		align-items: center!important;

	}
	
	#trzecia{
		height: auto!important;
	}
	
	#trzecia img{
		display: none;
		
	}
	
	#trzecia p{
		max-width: 80%!important;
		padding-bottom: 20px;

	}
	
	#trzecia h2{
		margin-left: 50px;
		margin-top: 0;
	}
	
	#czwarta{
		background-image: none!important;
		height: auto!important;
		align-items: flex-start!important;
	}
	
	#czwarta img{
		display: block!important;
		width: 80%;
		padding-top: 20px;
	}
	
	#czwarta h2{
		margin-top: 30px!important;
	}
	
	#piata{
		height: auto!important;
	}
	
	#piata .zawartosc{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		height: auto!important;
	}

	
	#piata h2{
		margin:10px 0 30px 0!important;
		text-align: center;
	}

	#szosta{
		display: flex;
		flex-direction: column;
		height: auto!important;
		background-image: none!important;
	}
	
	#szosta .zawartosc{
		height: auto!important;
	}
	
	#szosta .dinoend{
		display: block!important;
	}
	
	#szosta h3{
		font-size: 20px!important;
	}
	
}

@media all and (max-width: 595px) {
	#trzecia {
		background-image: none!important;
		height: auto!important;
	}
	
	#trzecia .zawartosc{
		align-items: center!important;
	}
	
	#trzecia img{
		display: block!important;
		width: 100%!important;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

@media all and(max-width: 515px) {
	#trzecia {
		background-image: none!important;
		height: auto!important;
	}
	
	#trzecia .zawartosc{
		align-items: center!important;
		margin-left:0px!important;
	}
}

@media all and (max-width: 375px){
	
	#pierwsza {
		align-items: center!important;
		background-size: 180%;
		background-position: center top;
		margin: 0;
  }
	
	#pierwsza .zawartosc{
		max-width: 100%!important;
		align-content: center;
	}
	
	#pierwsza h1{
		font-size: 64px!important;
	}
	
	#pierwsza h2{
		margin: 0;
		padding: 0;
/*		background-color: antiquewhite*/
	}
	
	#pierwsza .zycie{
		width: 120%;
		padding: 0;
		justify-content: center;
	}
	
	#druga .zawartosc{
		align-items: center!important;
		}
	
	#druga p{
		max-width: 100%;
		transform: translateX(0)
	}
	
	#trzecia .zawartosc{
		align-items: center!important;
	}
	
	#trzecia h2{
		margin-top: 20px;
	}
	
	#trzecia p{
		padding: 0;
	}
	
	#czwarta .zawartosc{
		align-items: center!important;
	}
	
	#czwarta p{
		max-width: 90%!important;
	}
	
	#piata{
		margin: 0!important;
		padding: 0;
		height: auto;
	}
	
	#piata .zawartosc{
		margin: 0;
		padding: 0;

	}
	
	#piata img{
		margin: 0;
		padding: 0;
	}
	
	#szosta{
		background-image: none!important;
	}
	
	#szosta img{
		height: 300%!important;
		padding-top: 15px;
		width: 300%!important;
		transform: scaleX(0);
	}
}

/*********************************/

#pierwsza {
    height: 200vh;
	display: flex;
  	flex-direction: column;
	align-items: flex-end;
  	justify-content: flex-start;
	background-image: url("../img/rozowy_dino.png");
	background-repeat: no-repeat;
}
#pierwsza .zawartosc{
	max-width: 65%;
}
#pierwsza p{
	max-width: 30%;
}
#pierwsza h2{
	color: #78B3C3;
}
.wyroznienie{
	font-family: "NovaSquareRegular"!important;
	color: #F5B4D1;
}
.naglowek {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;

}
.J1{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
}
.T{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
}
.J2{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
}
.parazaurolof {
  color: #FFEA74;
  white-space: normal;
  word-break: break-word;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 100px;
  font-family: "NowBlack";  
}
.zycie {
	min-height: 100vh;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-left: 100px;
}

.R1{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	padding: 10px;
	animation: spin 2s ease-out infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.Z{
	font-family: 'PlayfairDisplay';
}
.A3{
	display: inline-block;
	padding: 10px;
	animation: wiggle 0.5s ease-in-out infinite;
	
}
@keyframes wiggle {
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
	100% { transform: rotate(-10deg); }
}
.R2{
	display: inline-block;
	animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
 100% { transform: translateY(0); }
}
.O1{
	font-family: 'GloriaHallelujah';
}
.L {
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	padding: 10px;
	animation: spin 2s ease infinite 500ms;

}
@keyframes L {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.A4{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: bounce 2s ease infinite 500ms;
}
.W{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: spin 2s ease infinite 500ms;
	padding-left: 20px;
}
.G{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: wiggle 1s ease infinite 500ms;
}
.E1{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: bounce 3s ease-in-out infinite 500ms;
}


#druga{
	height: 100vh;
	background-image: url("../img/dino_niebieski.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 90%;
}

#druga .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	min-height: 38vw;
	/*dopisać @media max-width:900 - wtedy min-height: 40vw;
	padding-bottom: 5vw;*/
/*	background-color: pink;*/
/*	opacity: .5;*/
}
#druga p{
/*	max-width: 40%;*/
	font-family: "NowMedium";

}
#druga h2{
	color: #FFEA74;
	font-weight: 800;
	font-size: 60px;	
	text-transform: uppercase;
	line-height: 120%;
	font-family: "NowBlack";
	text-align: right;
/*	background-color: greenyellow;*/
}
#druga .wyroznienie{
	color: #78B3C3;
}

#druga img{
	display: none;
}

#trzecia{
	height: 120vh;
	background-image: url("../img/ameryka.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
#trzecia .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	min-height: 30vw;
}

#trzecia p{
	max-width: 33%;
	font-family: "NowMedium";
	color: #60A348;
	font-size: 18px;	
	font-weight: 500;
	line-height: 140%;
	text-align: center;
	align-content: center;
}
#trzecia h2{
	color: #FFEA74;
	font-weight: 800;
	font-size: 60px;	
	text-transform: uppercase;
	line-height: 140%;
	font-family: "NowBlack";
/*	margin-left: 250px;*/
}

#trzecia img{
	display: none;
}

.Z{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: bounce 2s ease-in-out infinite 500ms;
}
.E2{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: spin 2s ease-in-out infinite 500ms;
	padding-left: 5px;
}
.Y{
	font-family: 'NovaSquareREgular';
  	display: inline-block;
	animation: wiggle 2s ease-in-out infinite 500ms;
}
.M{
	font-family: 'NovaSquareREgular';
  	display: inline-block;
	animation: bounce 2s ease-in-out infinite 500ms;
}

#czwarta{
	height: 120vh;
	background-image: url("../img/liscie.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

#czwarta .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-end;
	min-height: 30vw;
}
#czwarta p{
	max-width: 33%;
	font-family: "NowMedium";
	color: #60A348;
	font-size: 18px;	
	font-weight: 500;
	line-height: 140%;
	text-align: center;
}

#czwarta .wyroznienie{
	color: #EB8043;}

#czwarta img{
	display: none;
}

#czwarta h2{
/*	margin-right: 110px;*/
	margin-top: 100px;
}
.O3{
	font-family: 'NovaSquareREgular';
  	display: inline-block;
	animation: bounce 2s ease-in-out infinite 500ms;
}
.A5{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: wiggle 2s ease-in-out infinite 500ms;
}
.E3{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: spin 2s ease-in-out infinite 500ms;
	padding: 5px;
}

#piata{
	height: 120vh;
}
/*

#piata .zawartosc{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: flex-start;
	min-height: 30vw;
	display: flex;
  padding: 20px;
  gap: 20px;
  align-items: flex-start;
	
}

.lewa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.tekst {
  flex: 2;
  margin-top: 10px;
}

.prawa {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#piata img{
	background-color: pink;
	width: 150%;
	height: 150%;
}

#piata p{
	background-color: aqua;
	font-family: "NowMedium";

}
*/
#piata{
  padding: 4rem 2rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  box-sizing: border-box;
  width: 100%;
}

#piata .zawartosc {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

#piata .wyroznienie1{
	color: #CBDC80;
	font-family: "NovaSquareRegular"!important;
}

#piata .wyroznienie2{
	color: #A384BC;
	font-family: "NovaSquareRegular"!important;
}

#piata .wyroznienie3{
	color: #DD5857;
	font-family: "NovaSquareRegular"!important;

}

#piata .lewa,
#piata .prawa {
  flex: 1;
  min-width: 300px;
/*  background-color: aquamarine;*/
}

#piata .lewa img {
  width: 100%;
  margin-bottom: 1rem;
/*  transform: scaleX(-1) scale(1.3);*/
/*  background-color: blue;*/
/*  padding-top: 30px;*/
	
}

 .animuj-lewo {
  opacity: 0;
  transform: translateX(-100px); 
  animation: wejscieZLewej 1s ease-out forwards;
  animation-delay: 0.3s; 
}

@keyframes wejscieZLewej {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#piata .lewa h2 {
  margin: 1rem 0 0 6rem;
}

#piata .prawa {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

}

#piata .prawa p {
  margin-bottom: 1rem;
  margin-top: 2rem;
  max-width: 65%;
  margin-bottom: 3rem;
}

#piata .prawa img {
  display: block;      
  margin-left: auto;   
  margin-right: 0;     
  width: 100%;
  max-width: 400px;
  transform: scale(1.5);
  margin: 40px;
}

.G{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: spin 2s ease-in-out infinite 500ms;
	padding: 5px;
}
.N{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: wiggle 2s ease-in-out infinite 500ms;
}
.E4{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: bounce 2s ease-in-out infinite 500ms;
}

#szosta{
	background-image: url("../img/dino_end.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	height: auto;
}
#szosta .zawartosc{
	max-width: 700px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
/*	margin-right: 400px;*/
}
#szosta h3{
	text-align: center;
	margin-top: 20px;
}
#szosta p{
	max-width: 100%;
	padding: 10px;
	font-family: "NowMedium";

}
#szosta .dinoend{
	display: none;
}
.minidino{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
#szosta img{
	padding-top: 15px;
	max-width: 20%;
	height: 100%;
	transform: scaleX(-1);
}
#szosta img:hover{
	transform: scaleX(1);
	cursor: pointer;
}

.I{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: bounce 2s ease-in-out infinite 500ms;
}
.U{
	font-family: 'PlayfairDisplay';
  	display: inline-block;
	animation: wiggle 1s ease-in-out infinite 500ms;
}
.J3{
	font-family: 'NovaSquareRegular';
  	display: inline-block;
	animation: spin 2s ease-in-out infinite 500ms;
	padding: 5px;
}

.copyright{
	text-align: center;
	font-family: "NowBold";
	color: #60A348;
	padding-top: 30px;
	padding-bottom: 20px;
}