@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: Poppin, sans-serif;
  }

body{
	margin: 0;
	padding: 0;
	background-color: #757ca3;
}

.img{
  width:300px;
  height: 400px;
  transform-style: perserve-3d;
}

.img .face{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  transform-style: perserve-3d;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:1s ease-in-out;
  backface-visibility:hidden;
  transform:perspective(500px), rotateY(0deg);
  
  }
  
.img .front.face{
 background: #ff0; 
}
.img:hover .face.front{
 transform:perspective(500px), rotateY(180deg);
 
}
.img .back.face{
 background: #0062ff;
 color: whitesmoke;
 transform: perspective(500px), rotateY(180deg);
}
.img:hover .face.back{
 transform:perspective(500px), rotateY(360deg); 
}


.header{
	background-color: #32394f;
	height: 200px;
	width: 100%;
}

.logotip{
	/*background-color: tomato; */
	width: 33%;
	height: 100%;
	float: left;
	margin-left: 5px;
}

.meniu{
	/*background-color: lime; */
	width: 33%;
	height: 100%;
	float: left;
	margin-left: 5px;
	text-align: center;
}

.cronometru{
	/*background-color: coral; */
	width: 33%;
	height: 100%;
	float: left;
	margin-left: 3px;
}

.img_logo{
	width: 100%;
	position: relative;
}

.text_meniu{
	color: white;
	font-size: 40px;
	position: relative;
	margin-top: 0;
}
a{
	color: white;
	font-size: 40px;
	position: relative;
	margin: 20px;
	text-decoration: none;

}
a:hover{
	color: gray;
	font-size: 45px;
}

#timer{
	color: white;
	position: relative;
	text-align: center;
  	font-size: 50px;
  	margin-top: 40px;
  	margin-left: 30px;
}
.text_timer{
	color: white;
	text-align: center;
	font-size: 30px;
	position: relative;
	margin-top: 10;
}
hr{
	margin:0;
}