@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

*{
	transition: 400ms;
	scroll-behavior: smooth; 
}
html{
	font-size: 10px;
}
body{
	
}

img{
	width: 100%;
	height:auto;
}

h1{
	font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
	font-size: 40px; 
	text-transform: uppercase;
	margin-bottom: 30px; 
	line-height: 60px; 
}
h2{
	font-family: "DM Mono", monospace;
  font-weight: 300;
  font-style: italic;
	font-size: 25px; 
	line-height: 40px; 
	margin-bottom: 30px;
}

h3{
	font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
	font-size: 15px;
	line-height: 24px;
}

p{
	font-family: "DM Mono", monospace;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
}

a{
	font-family: "DM Mono", monospace;
	font-weight: 600;
	text-decoration: none;}

.arrow{
	height: 50px;
	width: 50px; 
	margin-right: 20px; 
}

.star{
	height: 50px;
	width: 50px; 
	margin-right: 20px; 
}

.arrow:hover{
	transform: rotate(45deg); 
}

section{
	display: flex;
	height: 50vh; 
}

@media all and (max-width:1209px){
	#rozwoj .zawartosc .diagram{
		gap:10px!important; 
	}
	
	#poznajfilo .zawartosc article{
		display: flex;
		flex-direction: column; 
		justify-content: center;
		align-items: center;
	}

	.tekst{
		align-items: flex-start!important; 
	}
}

@media all and (max-width:1047px){
	#rozmiar {
		padding: 40px!important; 
	}
	#przyjaciele .zawartosc{
		padding: 40px!important; 
	}
}

@media all and (max-width:1027px){
	#poznajfilo .zawartosc article div{
		height: 400px!important;
		width: 450px!important;
	}
	
	#rozmiar{
		height: auto!important;
	}
	
	.diploidzie{
		height: 300px!important;
	}
	
	#przyjaciele .zawartosc{
		flex-direction: column; 
	}
	
	#ksiazka .zawartosc{
		flex-direction: column-reverse; 
	}
	
	#przyjaciele .zawartosc .scroll{
		width: 100%!important; 
	}
	
	#przyjaciele .zawartosc .scroll article{
		flex: 1 0 200px!important; 
	}
	#przyjaciele img{
	margin: -40px 40px 0px -30px!important;
	width: 130%!important;
	padding-bottom: 10px;
}
}

@media all and (max-width:773px){
	#gra .zawartosc span button{
		padding: 20px!important;
		font-size: 20px!important; 
	}
}

@media all and (max-width:589px){
	#gra{
		display: none; 
	}
	
	#rozwoj .zawartosc{
		overflow: hidden; 
		padding: 20px 0!important; 
	}
	
	#rozwoj .zawartosc .diagram{
		gap:30px!important; 
	}
	
	#rozwoj .zawartosc .diagram article{
		width: 150px; 
	}
	
	#ksiazka .zawartosc article div{
		height: 400px!important;
		width: 400px!important; 
	}
	
	#ksiazka .zawartosc article{
	max-width: 400px!important;
}
	
	#przyjaciele .zawartosc .scroll{
		max-width: 400px!important; 
	}
	
	#rozwoj{
		display: none; 
	}
	
	#rozwoj2kolumny{
		display: block!important; 
	}
	
	.burger{
		display: block!important; 
	}
	
	#nawigacja{
		display: none!important; 
	}
	
	.nakladkalogo{
		display: block!important;
	}
}

@media all and (max-width:449px){
	#poznajfilo .zawartosc article div{
		height: 300px!important;
		width: 350px!important;
	}
	
	#ksiazka .zawartosc{
		padding: 0px!important; 
	}
	
	
	#ksiazka .zawartosc article div{
		height: 300px!important;
		width: 300px!important; 
	}
	
	#ksiazka .zawartosc article{
	max-width: 300px!important;
	}
}

@media all and (max-width:375px){
	
	#poznajfilo .zawartosc article{
		max-width: 300px!important; 
	}
	
	#poznajfilo .zawartosc article div{
		height: 250px!important;
		width: 300px!important;
	}
	
	#zasady .zawartosc{ 
	padding: 20px!important}
	
	#stopka{
		display: none; 
	}
	
	#stopkamobile{
		display: block!important; 
	}
	
	#przyjaciele .zawartosc .scroll{
		max-width: 300px!important; 
	}
	
		#ksiazka .zawartosc{
		padding: 20px 0px!important; 
	}
	
	#bilbord{
		height: auto!important; 
	}
	
	.mobile{
		display: block!important}
	
	.desktop{
		display: none; 
	}
	
	#przyjaciele{
		background-color: #E4E46D!important; 
	}
	::-webkit-scrollbar-thumb {
  background: #386D65!important;
}
	
	#przyjaciele .zawartosc .tekstprzyjaciele span{
		background-color: white;
		border-radius: 20px; 
		height: auto!important; 
		padding-bottom: 0!important; 
	}
	
	#przyjaciele .zawartosc .tekstprzyjaciele p{
		margin-bottom: 0!important; 
	}
	
	.zasada{
		padding: 20px!important; 
	}
}

#nawigacja{
	background-color: #F5F5F5;  
	display: flex;
	flex-direction: row!important; 
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	border: thin #386D65 30px!important; 
	position: fixed; 
	width: 100%; 
	height: 60px; 
	scroll-margin-top:100px!important; 
	z-index: 2!important;
}

#nawigacja img{
	max-height: 50px;
	width: auto; 
}

#nawigacja .lista{ 
	display: flex; 
	font-size: 20px;
	list-style: none; 
	gap: 20px; 
	align-items: center; 
	margin-right: 30px; 
}

#nawigacja .lista li button, #poznajfilo .zawartosc article button, #ksiazka .zawartosc article  button {
	background-color: #386D65; 
	padding: 10px;
	border: none;
	border-radius: 10px; 
}
	
#nawigacja .lista a {
	color: #386D65;
}

#nawigacja .lista li button a, #poznajfilo .zawartosc article button, #ksiazka .zawartosc article  button{
	color: #E4E46D; 
	font-size: 17px
}

#nawigacja .lista a:hover{
	color: #B3CEA4;
}

.nakladkalogo{
	background-color: #F5F5F5!important; 
	z-index: 1; 
	position: fixed;
	width: 100%; 
	display: none; 
}

.nakladkalogo img{
	height: 40px!important; 
	width: auto; 
	padding: 10px; 
	margin-left: 10px; 
}

.burger{
	position: fixed;
	background-color: #F5F5F5;
	color: #386D65;
	padding: 5px;
	top:1rem; 
	right:2rem; 
	font-size: 30px;
	display:none; 
	cursor: pointer; 
	z-index: 2; 
}

.nakladka {
	background-color: #E4E46D;
	position: fixed;
	right: 0; 
	width: 0%;  /*ten parametr bedzie zmienianiany skryptem*/
	overflow: hidden; /*by uktuc to co wystaje poza box*/
	height: 0; 
	z-index: 3; 
	opacity: 90%; 
	display: flex; 
	justify-content: center;
	align-items: center; 
}

.nakladka ol{
	width: 100%;
	text-align: center;
}

.nakladka ol li a{
	display: block;
	padding: 1rem;
	margin-bottom: 1rem;
	color: black;
	font-size: 20px;
}

.nakladka ol li a:hover{
	background-color: #386D65;
	color:#E4E46D;
} 

.zamknijX{
	position: absolute;
	top:2rem; 
	right: 2rem;
	font-size: 3.5rem;
	background-color: #386D65;
	padding:  10px 13px; 
	cursor: pointer; 
	color: #F5F5F5;
	font-weight: 1000;
}

#bilbord, #poznajfilo, #poznajfilo, #rozmiar, #zasady, #gra, #rozwoj, #ksiazka, #stopka, #przyjaciele, #rozwoj2{
 	background-color: aquamarine; 
	align-content: center; 
	justify-content: center; 
}

 .zawartosc{
	max-width: 1200px; 
	display: flex;
	justify-content: center;
	align-items: center; 
}

#bilbord{
	background-color: white;
	height: 70vh; 
	padding-top: 40px; 
}

#bilbord .zawartosc{
	padding: 50px 0px; 
	margin: 30px; 
}

.mobile{
	display: none; 
}

#poznajfilo{
	background-color: white;
	height: auto;
	padding: 50px; 
	scroll-margin-top:50px!important; 
}

#poznajfilo .zawartosc{
	gap: 60px;
	flex-wrap: wrap; 
}

#poznajfilo .zawartosc article{
	flex: 1 1 400px!important; 
}

#poznajfilo .zawartosc article div{
	background-color: red!important; 
	height: 600px;
	width: 650px; 
	border-radius: 20px; 
	margin-bottom: 30px;
	background-image: url("../img/filo_welcome.jpg"); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center; 
}

#poznajfilo .zawartosc article div:hover{
	background-image: url("../img/filo_filozof.jpg"); 
}

#poznajfilo .zawartosc article span{
	display: flex;
	align-items: center;
}

#poznajfilo .zawartosc article span:hover .arrow{
	transform: rotate(45deg); 
}

#poznajfilo .zawartosc article p{
	padding: 15px;
	border: 1px solid black;
	border-radius: 20px; 
	margin-bottom: 30px;
}

#poznajfilo .zawartosc article button a{
	color: #E4E46D;
}

#rozmiar{
	background-image: url("../img/jugle_background_whole.jpg");
	height: auto;
	height: 90vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; 
	overflow: hidden; 
	scroll-margin-top:100px!important; 
}

#rozmiar .zawartosc{
	display: flex;
	flex-direction: column; 
}

.diploidzie{
	height: 500px; 
	margin-bottom: 30px;
	margin-top: 30px;
	animation: dinoidzie 10s infinite ease 1s; 
	z-index: 0!important; 
}

@keyframes dinoidzie{
	0%{
		transform: translateX(-1000px);
	}
	50%{
		transform: translateX(0px);
	}
	75%{
		transform: translateX(0px);
	}
	
	100%{
		transform: translateX(1000px);
	}
}

#rozmiar .zawartosc article{
	display: flex;
	align-items:  center; 
}

#rozmiar .zawartosc article:hover .star{
	transform: rotate(45deg); 
}

#zasady{
	background-color: #E4E46D;
	height: auto;
	background-image: url("../img/rules_background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center; 
	scroll-margin-top:70px!important;
}

#zasady .zawartosc{
	display: flex;
	flex-direction: column; 
	padding: 40px 45px; 
}

#zasady .zawartosc span{
	display: flex;
	flex-direction: row;
	gap:30px; 
	margin-bottom: 30px;
	flex-wrap: wrap;
}

.zasada{
	background-color: white;
	padding: 40px;
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	justify-content: space-between; 
	flex: 1 1 300px; 
}

#rozwoj, #rozwoj2kolumny{
	background-color: white;
	height: auto;
}

#rozwoj2kolumny{
	display: none; 
}

#rozwoj .zawartosc , #rozwoj2kolumny .zawartosc{
	display: flex;
	flex-direction: column;
	padding: 40px;
}

#rozwoj .zawartosc .diagram, #rozwoj2kolumny .zawartosc .diagram{
	display: flex;
	gap:30px
}

#rozwoj .zawartosc .diagram article, #rozwoj2kolumny .zawartosc .diagram article{
	display: flex;
	flex-direction: column; 
	gap:60px;
		flex:1 1 300px; 
	justify-content: center!important;
	align-items: center!important; 
}

#rozwoj2kolumny .zawartosc .diagram article{
	gap:30px;
}

#rozwoj2kolumny .zawartosc .diagram article span{
	justify-content: flex-end;
	align-items: center;
}

#rozwoj .zawartosc .diagram article .liniadiagramu, #rozwoj2kolumny .zawartosc .diagram article .liniadiagramu{
	display: flex;
}

#rozwoj .zawartosc .diagram article .diplodok, #rozwoj2kolumny .zawartosc .diagram article .diplodok{
	height: auto;
	width: 250px; 
	margin-bottom: 20px;
}

#rozwoj .zawartosc .diagram article .diplodoksmall, #rozwoj2kolumny .zawartosc .diagram article .diplodoksmall{
	height: auto;
	width: 150px; 
	margin-bottom: 20px;
}

#rozwoj .zawartosc .diagram article span .star, #rozwoj2kolumny .zawartosc .diagram article span .star{
	margin-bottom: 20px;
}

#rozwoj .zawartosc .diagram article span .star:hover, #rozwoj2kolumny .zawartosc .diagram article span .star:hover{
	transform: rotate(45deg); 
}

rozwoj2kolumny .zawartosc .diagram article span{
	max-width: 300px!important;
	align-items: flex-end!important; 
}

#rozwoj .zawartosc .diagram .linia, #rozwoj2kolumny .zawartosc .diagram .linia{
	background-color: #E4E46D;
	height: 1100px;
	width: 6px; 
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center; 
}

#rozwoj2kolumny .zawartosc .diagram .linia{
	height: 2200px;
}

.linia div{
	background-color: #386D65;
	height: 20px;
	width: 20px; 
	border-radius: 20px;
	margin: 120px 0;
}

#rozwoj2{
	display: none; 
}
#rozwoj2 .zawartosc  .diagram article{
	display: flex;
	justify-content: space-around!important; 
	align-items: center;
	gap: 30px;
}

#rozwoj2 .zawartosc article span{
	 flex: 1 1 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

 span .tekstrozwoj{
	justify-content: flex-start!important; 
}

#rozwoj2 .zawartosc article span .linia div{
	height: 30px!important;
	width: 30px!important;
	border-radius: 40px;
	background-color: aqua;
}

#rozwoj2 .zawartosc article span .linia{
	height: 230px;
	width: 30px;
	background-color: red;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 40px; 
}

#rozwoj2 .zawartosc article span .diplodok{
	height: auto;
	width: 250px; 
	margin-bottom: 20px;
}

#gra{
	background-image: url("../img/games_background.jpg"); 
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover; 
	height: auto;
	scroll-margin-top:70px!important;
}

#gra .zawartosc{
	display: flex; 
	gap: 40px;
	flex-wrap: wrap-reverse; 
	padding: 40px;
}

#gra .zawartosc article{
	display: flex;
	flex-direction: column;
	align-items: center; 
	flex: 1 1 300px; 
}

#gra .zawartosc #DRESSFILO{
	/*background-color: red;*/
	height: 659px;
	width: 500px; 
	background-image: url("../img/filo_dress_smaller.png");
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
}

#gra .zawartosc span{
	display: flex;
	margin: 10px 0px; 
	gap: 20px;
}

#gra .zawartosc span button{
	background-color: #386D65; 
	padding: 10px;
	border: none;
	border-radius: 10px; 
	color: #E6F178; 
	font-size: 15px;
	font-family: "DM Mono", monospace;
	font-weight: 400;
}

#gra .zawartosc span button:hover{
	color: rgba(54,32,14,1.00);
	background-color: white; 
}

#gra .zawartosc .right{
	align-items: flex-end;
	max-width: 600px; 
}

#gra .zawartosc .right span{
	display: flex;
	justify-content: center;
	align-items: center; 
}

#gra .zawartosc .right span .arrow{
	margin-right: 15px; 
	transform: rotate(270deg); 
}
#gra .zawartosc .right span:hover .arrow{
	transform: rotate(235deg); 
}

#gra .zawartosc .right p{
	text-align: right; 
	max-width: 600px; 
	margin-bottom: 30px; 
}

#gra h1{
	text-align: right; 
}

#przyjaciele{
	background-color: white;
	height: auto;
}

#przyjaciele .zawartosc{
	max-width: 1200px!important; 
	gap: 50px; 
	flex: 1 1;
	overflow: hidden; 
	padding: 50px 0 ; 
	flex-wrap: wrap-reverse!important; 
}

#przyjaciele .zawartosc .tekstprzyjaciele{
	max-width: 500px; 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-end; 
}
.tekstprzyjaciele{
	text-align: right;
}

#przyjaciele .zawartosc .tekstprzyjaciele h1{}

#przyjaciele .zawartosc .tekstprzyjaciele p{
	padding: 15px;
	border: 1px solid black;
	border-radius: 20px; 
	margin-bottom: 30px;
}

#przyjaciele .zawartosc .scroll{
	display: flex;
	flex-direction: row;
	gap: 40px;
	width: 500px;
	overflow: scroll; 
	padding-bottom: 40px!important; 
}
/* width */
::-webkit-scrollbar {
  width: 0;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #E4E46D;
border-radius: 40px; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #386D65;
}
#przyjaciele .zawartosc .scroll article{
	background-color: #F5F5F5;
	padding: 40px; 
	width: 200px!important; 
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	flex:1 0 350px;  
	
}

#przyjaciele img{
	margin: -40px 0px 0px -35px;
	width: 120%;
	padding-bottom: 10px;
}
#przyjaciele .zawartosc .scroll article h2{
	font-weight: 500; 
	margin-bottom: 10px;
}

#ksiazka{
	height: auto;
	background-color: white; 
}

#ksiazka .zawartosc{
	padding: 40px; 
	gap:30px; 
}

#ksiazka .zawartosc article{
	max-width: 500px;
}

#ksiazka .zawartosc article div{
	background-color: white;
	height: 500px;
	width: 500px; 
	margin-bottom: 30px; 
	background-image: url("../img/filo_book.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
	border-radius: 20px; 
}

#ksiazka .zawartosc article div:hover{
	background-image: url("../img/filo_statue.png"); 
}

#ksiazka .zawartosc article p{
	margin-bottom: 20px; 
	padding: 15px;
	border: 1px solid black;
	border-radius: 20px; 
}

#ksiazka .zawartosc article  button{
	font-family: "DM Mono", monospace;
	font-weight: 600;
	font-size: 15px;
}

#stopka{
	background-color: #F5F5F5;
	height: auto;
}

#stopka .zawartosc{
	padding: 40px; 
	gap:40px; 
}

#stopka img{
	max-height: 50px;
	width: auto; 
}

#stopka h3{
	max-width: 400px; 
}

#stopkamobile{
	background-color: #F5F5F5;
	height: auto;
	width: 100%; 
	display: none; 
}

#stopkamobile .zawartosc{
	padding: 40px; 
	gap:20px; 
	flex-direction: column;
	justify-content: center;
	align-items: center; 
	max-width: 375px!important; 
}

#stopkamobile h3{
	 font-size: 14px;
}

#stopkamobile img{
	max-height: 50px;
	width: auto; 
}

#copywrite{
	padding: 15px; 
	display: flex;
	justify-content: center; 
	text-align: center;
	height: 5vh;
	background-color: #386D65; 
}

#copywrite .zawartosc{
	display: flex;
	justify-content: center;
}

#copywrite h3{
	color: #E4E46D
}