*{margin:0; padding:0}


@font-face {font-family:focus; src:url(comfortaa.woff)}
@font-face {font-family:Billi; src:url(BillionStars_PersonalUse.woff)}

/* --------------- mobile section --------------------*/

@media (max-width: 768px) { 

body{background:url(f1.jpg)}

#wrapper {
	position:static;
	margin:0;
	width:100%;
}

.elegance{
	text-align: center;
	font: 50px Billi;	
	color:white;
	line-height:90px;
	letter-spacing:2px;
}

.elegance:after {
	content:'OZO-Information';

}


.game1, .game2, .game3 {
	display:block;
	margin:5px;
	padding: 20px;
	/*border: 1px solid;*/
	border-radius: 10px;
	text-align: center;	
	font: bold 30px Arial;
	color: white;
	background:url(f2.jpg);
	box-shadow: 0 0 10px #410;
	
	
	color:#410;
}

.game1 {
	
}

a {text-decoration: none;}

.game2{
	
}

.game3{
	
}

.beauty{display:none}

.plus{
	margin:10px;
	fill:#999;
}
}

/* ---------------- desktop section -----------------------*/

@media (min-width: 769px) { 
#wrapper {
	position:absolute;
	top:50%;
	left:50%;
	width:1000px;
	
	height:800px;
	margin-top:-400px;
	margin-left:-500px;

}


html, body{height:100%}

html{background:url(f1.jpg)}


.game1 {
	position:absolute;
	top:40%;
	left:4%;
	width:200px;
	height:200px;
	border:1px solid #333;
	border-radius:50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 40px focus;
	color:white;
	background:#902;
	
	box-shadow: inset 0 0 20px #333, 0 0 0 3px white, 0 0 0 6px #333, 0 0 60px rgba(255,255,255,.2);

}

.game1:hover {background:#f04 }

.game2 {
	position:absolute;
	top:30%;
	left:37%;
	width:250px;
	height:250px;
	border:1px solid #333;
	border-radius:50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 40px focus;
	color:white;
	background:#073;
	
	box-shadow: inset 0 0 20px #333, 0 0 0 3px white, 0 0 0 6px #333, 0 0 60px rgba(255,255,255,.2);

}

.game2:hover {background:#0b7 }

.game3 {
	position:absolute;
	top:5%;
	left:65%;
	width:200px;
	height:200px;
	border:1px solid #333;
	border-radius:50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 40px focus;
	color:white;
	background:#049;
	
	box-shadow: inset 0 0 20px #333, 0 0 0 3px white, 0 0 0 6px #333, 0 0 60px rgba(255,255,255,.2);
}
.game3:hover {background:#07b }

.elegance {
	position:absolute;
	top:75%;
	left:65%;
	width:370px;
	height:100px;
	text-align:center;
	
	background:url(f2.jpg);
	background-size:cover;
	border-radius: 10px;
	box-shadow: 0 0 10px #410;
	
	font: 60px focus;
	line-height:80px;
	letter-spacing:2px;
	color:#410;
	transform:rotate(-35deg);

}


.elegance:after {
	position:absolute;
	top:5px;
	left:5px;
	content:'Games FF';
	display:block;
	width:355px;
	height:84px;
	border:3px dashed;
	border-radius: 5px;
}

.beauty {position:absolute;
	top:0;
	left:0;
	width:450px;
	
	font: 100px Billi;
	
	color:white;
	text-shadow: 0 0 10px #333;
}

.plus{
	fill:#999;
	position:absolute;
	top:30px;
	left:30px;
	
}

}