@charset "utf-8"; html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, big, del, em, font, img, ins, q, s, small, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tr, th, td {margin:0;padding:0;vertical-align:baseline}:focus{outline:0} ol, ul, li {list-style-type:none} html{font-size:100%} body{font-family:Arial,Helvetica,sans-serif;font-size:1.1em;line-height:1.6em} img{float:left} a{color:#e00;text-decoration:none;outline:none} a:hover{text-decoration:none}
body{width:1000px;height:940px;background:url(../gf0/9.png);-ms-touch-action:none;touch-action:none}
#hrl{position:absolute;top:212px;left:20px;width:960px}
#ban{position:absolute;width:1000px;height:217px}
#area{width:425px;height:45px;background:#dd0;position:absolute;top:18px;left:285px;box-shadow:6px 6px 6px 0 rgba(100,100,100,.8) inset,-6px -6px 6px 0 rgba(255,255,255,.8) inset;border:1px solid #cc0;border-radius:20px;overflow:hidden}
#move{position:absolute;left:430px;width:270px;height:45px;animation:move 5s linear infinite}
@keyframes move{95%, 100%{transform:translate(-700px)}}
#pre{position:absolute;top:850px;width:1000px;height:90px;background:url(../gf0/pre.png)}
#arrow{position:absolute;width:86px;height:90px;left:914px;background:url(../gf0/back.png)}
@font-face {font-family:"Luckiest Guy";src:url("../fonts/Luckiest Guy.ttf") format("truetype")}
#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:5;cursor:pointer}
.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, .5);-webkit-user-select:none;-moz-user-select:none;user-select:none}
.image img {width:100%;height:100%;display:block;pointer-events:none}
.image.dragging {z-index: 99}
.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 {position:absolute;left:300px;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;display:inline-block}
h1.message span {display:inline-block;animation:wave 1s infinite ease-in-out,colorShift 3s infinite linear}
@keyframes wave {
0%   {transform:translateY(0)}
25%  {transform:translateY(-15px)}
50%  {transform:translateY(0)}
75%  {transform:translateY(15px)}
100% {transform:translateY(0)}
}
@keyframes colorShift {
0%   {color:#0F0}
25%  {color:#0CF}
50%  {color:#F0F}
75%  {color:#FF0}
100% {color:#0F0}
}
h1.message span:nth-child(1) {animation-delay:0s, 0s}
h1.message span:nth-child(2) {animation-delay:.1s, .3s}
h1.message span:nth-child(3) {animation-delay:.2s, .6s}
h1.message span:nth-child(4) {animation-delay:.3s, .9s}
h1.message span:nth-child(5) {animation-delay:.4s, 1.2s}
h1.message span:nth-child(6) {animation-delay:.5s, 1.5s}
#restart {position:absolute;left:340px;margin-top:-100px;background:#f82;padding:10px 20px;font-size:1.6em;font-weight:900;border:solid 1px;border-radius:25px;cursor:pointer}