body { 
	background-color: #87d0ff; 
	color: #ffffff; 
	font-family: 'Lato', sans-serif; 

} 
#container{
	width: 50%; 
	margin-left: auto;
	margin-right: auto;
	
}
 
#banner{ 
	width: 100%;
	height: 100%;
	text-align: center;
	transition: 1s;
} 
#banner:hover{ 
	width: 90%;
	height: 100%;
	text-align: center;
	transition: 1s;
} 




#cloud1{
	width: 25%;
	height: 10%;
	float:left;
	transition: 1s;
}
#cloud2{
	width: 10%;
	height: 20%;
	float:left;
	transition: 1s;	
}
#cloud3{
	width: 25%;
	height: 50%;	
	float:right;
	transition: 1s;
}
#cloud4{
	width: 10%;
	height: 50%;	
	float:right;
	transition: 1s;
}





#cloud1:hover{
	width: 20%;
	height: 10%;
	float:left;
	transition: 1s;
}
#cloud2:hover{
	width: 7%;
	height: 20%;
	float:left;	
	transition: 1s;
}
#cloud3:hover{
	width: 20%;
	height: 50%;	
	float:right;
	transition: 1s;
}
#cloud4:hover{
	width: 7%;
	height: 50%;	
	float:right;
	transition: 1s;
}


	 
	 
	 
	 
	 
	 
	 
	 
	 
	 




#wybor{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	
}

#element{
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #ffa500;
	transform:perspective(300px);
	transform:rotateY(180deg);
	transition: 1s;
	transform-style:preserve-3d;

	
	
}
#element:hover{
	transform:rotateY(180deg);
	transition: 1s;
	transform:perspective(300px);
}

#przod{
	position: absolute;
	color: black;
	transform:rotateY(180deg);
	width:100%;
	backface-visibility:hidden;
	height:100%;
	box-shadow:0 0 4px 8px #ffffff inset;
	background-image: url(kolizje.png);
	background-size:100%;

}

#tyl{
	position: absolute;
	color: white;
	text-align: center;
	width:100%;
	backface-visibility:hidden;
	height:100%;
	box-shadow:0 0 4px 8px #FFF inset;
	
}


	
	
	


#wybor1{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	
}

#element1{
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #000000;
	transform:perspective(300px);
	transform:rotateY(180deg);
	transition: 1s;
	transform-style:preserve-3d;

	
	
}
#element1:hover{
	transform:rotateY(180deg);
	transition: 1s;
	transform:perspective(300px);
}

#przod1{
	position: absolute;
	color: black;
	transform:rotateY(180deg);
	width:100%;
	backface-visibility:hidden;
	height:100%;
	box-shadow:0 0 4px 8px #ffffff inset;
	background-image: url(Planet.png);
	background-size:100%;

}

#tyl1{
	position: absolute;
	color: white;
	text-align: center;
	width:100%;
	backface-visibility:hidden;
	height:100%;
	box-shadow:0 0 4px 8px #FFF inset;
	
}








#wybor2{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	
}

#element2{
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #2B4737;
	transform:perspective(300px);
	transform:rotateY(180deg);
	transition: 1s;
	transform-style:preserve-3d;

	
	
}
#element2:hover{
	transform:rotateY(180deg);
	transition: 1s;
	transform:perspective(300px);
}

#przod2{
	position: absolute;
	color: black;
	transform:rotateY(180deg);
	width:100%;
	backface-visibility:hidden;
	height:100%;
	box-shadow:0 0 4px 8px #ffffff inset;
	background-image: url(Kulka.png);
	background-size:100%;

}

#tyl2{
	position: absolute;
	color: white;
	text-align: center;
	width:100%;
	backface-visibility:hidden;
	height:100%;
	box-shadow:0 0 4px 8px #FFF inset;
	
}






















.dottedline{
	 height: 10px;
	 border-bottom: 10px dotted #ffffff;
	 margin-bottom: 10px;
	 margin-top: 10px;
	
}


#white{
	
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	
}

#GeoGebra{
	width:100%;
	height:100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#font{
 text-align: center;
 font-size:300%;
 color:black;
}
#font2{
 text-align: center;
 font-size:125%;
 color:black;
}
#center{
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	text-align: center;
}