@font-face {font-family:"Luckiest Guy";src: url("../fonts/Luckiest Guy.ttf") format("truetype")}

body {
font-family: sans-serif;
text-align: center;
height: 650px;
overflow: hidden;
}
#move{background:url(../gf3/tyt14.png)}
#box{position:absolute;top:140px;left:19px;width:961px;height:623px;overflow:hidden;background:url(../gf3/owoce.png);z-index:1;cursor:pointer;z-index:5}

.anim {animation-duration:.5s;width:960px;height:610px;position:absolute;animation-name:zoom}
@keyframes zoom{
0% {transform:scale(0)}
100% {transform:scale(1)}
}
.labels-container,
.images-container {
position: relative;
width: 960px;
height: 170px;
margin: 150px auto;
margin-left:17px;
}

.label,
.image {
width: 170px;
height: 170px;
border: 2px solid #ccc;
background: white;
position: absolute;
font-size: 1.6em;
text-align: center;
line-height: 170px;
border-radius: 5px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

.image img {
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}

.image.dragging {
z-index: 1000;
}

.draggable {
transition: transform 0.5s ease-out;
}

.image.locked {
cursor: default;
}

#txt {
position: absolute;
top: 375px; left: 200px;
color: #05C;
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}

h1.message {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 900;
  font-size: 96px;
  color: #0F0;
  text-shadow: -3px -3px 0 navy, 3px -3px 0 navy, -3px 3px 0 navy, 3px 3px 0 navy;
  letter-spacing: 10px;
  margin-top: -270px;
  height: 99px;
}

#restart {
background:#f82;
margin-top: 30px;
padding: 10px 20px;
font-size: 1.6em;
font-weight: 900;
border: solid 1px;
border-radius: 25px;
cursor: pointer;
}