<!-- CODE = #A069 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NETBYZZ A069</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="demo-content">
<input
id="mole-title-toggle"
class="toggle mole-title-toggle"
type="checkbox"
checked="checked"
/>
<div class="mole-title">
<p class="mole-title-chunks">
<span class="mole-title-far-left">Wha</span>
<span class="mole-title-center-left">c-</span>
<span class="mole-title-center">A</span>
<span class="mole-title-center-right">-M</span>
<span class="mole-title-far-right">ole</span>
</p>
<label class="button mole-start-button" for="mole-title-toggle"
>Play</label
>
</div>
<div class="mole-game">
<input
id="mole-hole-far-left-toggle"
class="toggle mole-hole-toggle"
type="checkbox"
/>
<label
class="mole-hole mole-hole-far-left"
for="mole-hole-far-left-toggle"
></label>
<div class="mole-hole mole-hole-far-left"></div>
<input
id="mole-hole-center-left-toggle"
class="toggle mole-hole-toggle"
type="checkbox"
/>
<label
class="mole-hole mole-hole-center-left"
for="mole-hole-center-left-toggle"
></label>
<div class="mole-hole mole-hole-center-left"></div>
<input
id="mole-hole-center-toggle"
class="toggle mole-hole-toggle"
type="checkbox"
/>
<label
class="mole-hole mole-hole-center"
for="mole-hole-center-toggle"
></label>
<div class="mole-hole mole-hole-center"></div>
<input
id="mole-hole-center-right-toggle"
class="toggle mole-hole-toggle"
type="checkbox"
/>
<label
class="mole-hole mole-hole-center-right"
for="mole-hole-center-right-toggle"
></label>
<div class="mole-hole mole-hole-center-right"></div>
<input
id="mole-hole-far-right-toggle"
class="toggle mole-hole-toggle"
type="checkbox"
/>
<label
class="mole-hole mole-hole-far-right"
for="mole-hole-far-right-toggle"
></label>
<div class="mole-hole mole-hole-far-right"></div>
<input
id="mole-mole-0-toggle"
class="toggle mole-mole-toggle"
type="checkbox"
/>
<label class="mole-mole mole-mole-0" for="mole-mole-0-toggle"></label>
<input
id="mole-mole-1-toggle"
class="toggle mole-mole-toggle"
type="checkbox"
/>
<label class="mole-mole mole-mole-1" for="mole-mole-1-toggle"></label>
<input
id="mole-mole-2-toggle"
class="toggle mole-mole-toggle"
type="checkbox"
/>
<label class="mole-mole mole-mole-2" for="mole-mole-2-toggle"></label>
<input
id="mole-mole-3-toggle"
class="toggle mole-mole-toggle"
type="checkbox"
/>
<label class="mole-mole mole-mole-3" for="mole-mole-3-toggle"></label>
<input
id="mole-mole-4-toggle"
class="toggle mole-mole-toggle"
type="checkbox"
/>
<label class="mole-mole mole-mole-4" for="mole-mole-4-toggle"></label>
<p class="mole-score">current score</p>
<label
class="button button-small mole-help-button"
for="mole-help-toggle"
>pause/help</label
>
<input
id="mole-help-toggle"
class="toggle mole-help-toggle"
type="checkbox"
/>
<div class="mole-modal mole-help-modal">
<p>
Five moles and five holes. Click on the moles to hit them as they
pop out. Be careful though—if you hit a hole when a mole isn't
there, you damage the hole!
</p>
<input
class="button mole-restart-button"
type="reset"
value="Restart"
/>
<label class="button" for="mole-help-toggle">Continue</label>
</div>
<div class="mole-modal mole-win-modal">
<p>
Congratulations, shepherd! You got all of them. Those pesky moles
won't be hurting your precious flock anymore.
</p>
<input
class="button mole-restart-button"
type="reset"
value="Restart"
/>
</div>
<div class="mole-modal mole-loss-modal">
<p>
Oh no, all the holes are damaged! How will we ever catch those pesky
moles now? Let's try that again.
</p>
<input
class="button mole-restart-button"
type="reset"
value="Restart"
/>
</div>
</div>
</form>
</body>
</html>
.mole-modal {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding: 0.5em 3em;
background-color: rgba(0, 0, 0, 0.7);
font-size: 0.9em;
}
.mole-modal p {
margin: 0 0 0.5em 0;
}
.mole-title-chunks {
position: relative;
top: -8em;
z-index: 1;
margin: 0;
padding: 0.3em 0;
color: #546269;
font-size: 1.5em;
text-shadow: -1px -1px 0 #22282a, 1px -1px 0 #22282a, -1px 1px 0 #22282a,
1px 1px 0 #22282a;
letter-spacing: 0.2em;
word-spacing: -0.4em;
transition: top 400ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mole-title-toggle:checked+.mole-title .mole-title-chunks {
top: 0;
transition: none;
}
.mole-title-far-left,
.mole-title-center-left {
display: inline-block;
transform-origin: bottom right;
}
.mole-title-center-right,
.mole-title-far-right {
display: inline-block;
transform-origin: bottom left;
}
.mole-title-far-left {
transform: rotate(-20deg) translate(0.2em, 0.1em);
}
.mole-title-center-left {
transform: rotate(-10deg) translate(0.1em, -0.1em);
}
.mole-title-center-right {
transform: rotate(10deg) translate(-0.2em, 0);
}
.mole-title-far-right {
transform: rotate(20deg) translate(-0.3em, 0.3em);
}
.mole-start-button {
position: relative;
bottom: -8em;
transition: bottom 400ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mole-title-toggle:checked+.mole-title .mole-start-button {
bottom: 0;
transition: none;
}
.mole-game {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 1;
transition: opacity 400ms 400ms;
}
.mole-title-toggle:checked+.mole-title+.mole-game {
top: -8em;
opacity: 0;
transition: none;
}
.mole-hole,
.mole-mole {
display: block;
position: absolute;
cursor: crosshair;
}
.mole-hole {
width: 4.4em;
height: 2.7em;
border: 0.3em solid #30383b;
border-bottom-width: 0;
border-radius: 50%;
background-color: #22282a;
}
.mole-hole+.mole-hole {
display: none;
z-index: 1;
border-color: #444f55;
background-color: #30383b;
cursor: not-allowed;
}
.mole-hole-toggle:checked+.mole-hole {
display: none;
}
.mole-hole-toggle:checked+.mole-hole+.mole-hole {
display: block;
}
.mole-hole::before,
.mole-hole::after,
.mole-mole::before,
.mole-mole::after,
.mole-mole:active::before,
.mole-mole:active::after {
content: "";
display: block;
position: absolute;
border-radius: 0.5em;
transform: rotate(-30deg);
}
.mole-hole::before,
.mole-mole:active::before {
top: -8em;
left: 4.5em;
width: 1em;
height: 4em;
background-color: #30383b;
transform-origin: bottom right;
}
.mole-hole::after,
.mole-mole:active::after {
top: -8em;
left: 3em;
width: 4em;
height: 2em;
background-color: #444f55;
transform-origin: 2.5em 5.5em;
}
.mole-hole:active::before,
.mole-hole:active::after,
.mole-mole:active::before,
.mole-mole:active::after {
animation-name: hammer;
animation-duration: 200ms;
}
.mole-hole:active::before,
.mole-mole:active::before {
top: -0.5em;
}
.mole-hole:active::after,
.mole-mole:active::after {
top: -2em;
}
.mole-hole+.mole-hole::before,
.mole-hole+.mole-hole::after {
display: block;
left: -0.3em;
width: 5.83em;
height: 0.3em;
background-color: #22282a;
}
.mole-hole+.mole-hole::before {
top: -0.3em;
transform: rotate(28deg);
transform-origin: top left;
animation-name: none;
}
.mole-hole+.mole-hole::after {
top: auto;
bottom: 0;
transform: rotate(-28deg);
transform-origin: bottom left;
animation-name: none;
}
.mole-hole-far-left,
.mole-hole-center,
.mole-hole-far-right {
top: 2.5em;
}
.mole-hole-center-left,
.mole-hole-center-right {
top: 1em;
}
.mole-hole-far-left {
left: 5em;
}
.mole-hole-center-left {
left: 11em;
}
.mole-hole-center {
left: 17em;
}
.mole-hole-center-right {
left: 23em;
}
.mole-hole-far-right {
left: 29em;
}
.mole-mole:active {
animation-play-state: paused;
}
.mole-mole {
top: -8em;
left: 0;
width: 5em;
height: 3em;
animation-name: mole;
animation-duration: 300s;
animation-iteration-count: infinite;
animation-timing-function: step-end;
}
.mole-mole.mole-mole-1 {
animation-delay: -60s;
}
.mole-mole.mole-mole-2 {
animation-delay: -120s;
}
.mole-mole.mole-mole-3 {
animation-delay: -180s;
}
.mole-mole.mole-mole-4 {
animation-delay: -240s;
}
.mole-mole-toggle:checked+.mole-mole {
display: none;
}
.mole-mole::before,
.mole-mole::after {
transform: none;
}
.mole-mole::before {
top: 0.25em;
left: 1.25em;
width: 2.5em;
height: 2.5em;
border-radius: 1em 1em 0.5em 0.5em;
background-color: #30383b;
}
.mole-mole::after {
content: "..";
top: 0.5em;
left: 1.75em;
width: 1.5em;
height: 1em;
border-radius: 0.5em;
background-color: #444f55;
font-weight: bold;
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-loss-modal {
display: block;
}
.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-win-modal {
display: block;
}
.mole-score {
position: absolute;
top: 0.5em;
left: 0.5em;
margin: 0;
color: #30383b;
text-align: left;
font-weight: bold;
font-size: 0.9em;
line-height: 1;
}
.mole-score::after {
content: "000";
display: block;
font-size: 2em;
letter-spacing: 0.1em;
}
.mole-mole-toggle:checked~.mole-score::after {
content: "+10";
}
.mole-hole-toggle:checked~.mole-score::after {
content: "\2212 05";
}
.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+20";
}
.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+05";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-score::after {
content: "\2212 10";
}
.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+30";
}
.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+15";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "000";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-score::after {
content: "\2212 15";
}
.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+40";
}
.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+25";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+10";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "\2212 05";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-score::after {
content: "\2212 20";
}
.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+50";
}
.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+35";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+20";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+05";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "\2212 10";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-score::after {
content: "\2212 25";
}
.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+45";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+30";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+15";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "000";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "\2212 15";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+40";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+25";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+10";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "\2212 05";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+35";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+20";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+05";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+30";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+15";
}
.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-hole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-mole-toggle:checked~.mole-score::after {
content: "+25";
}
.mole-help-button {
position: absolute;
top: 0.5em;
right: 0.5em;
}
.mole-help-toggle:checked+.mole-help-modal {
display: block;
}
body {
margin: 0;
background-color: #161819;
color: #617078;
text-align: center;
font: 20px/1.5 "Titillium Web", sans-serif;
}
.button {
display: inline-block;
border: 0.1em solid #444f55;
border-radius: 0.3em;
padding: 0.5em;
background-color: #617078;
color: #3d484c;
text-decoration: none;
font-size: 1em;
line-height: 1;
font-weight: bold;
cursor: pointer;
user-select: none;
}
.button-small {
padding: 0.3em;
font-size: 0.9em;
}
.button:hover {
background-color: #6f828b;
}
.button:active,
.timer-analog-toggle:checked~.timer-controls .timer-analog,
.timer-digital-toggle:checked~.timer-controls .timer-digital {
background-color: #546269;
}
.toggle {
display: none;
}
.demo-content {
margin: auto;
margin-top: 20%;
position: relative;
width: 39em;
height: 7em;
overflow: hidden;
background-color: #546269;
}
@keyframes hammer {
0% {
transform: rotate(-30deg);
}
50% {
transform: rotate(-45deg);
}
100% {
transform: rotate(-30deg);
}
}
@keyframes mole {
1.11% {
top: 1em;
left: 23em;
}
1.34% {
top: -8em;
}
2.36% {
top: 2.5em;
left: 17em;
}
2.60% {
top: -8em;
}
3.75% {
top: 2.5em;
left: 17em;
}
3.90% {
top: -8em;
}
4.84% {
top: 2.5em;
left: 29em;
}
5.00% {
top: -8em;
}
5.72% {
top: 2.5em;
left: 5em;
}
5.91% {
top: -8em;
}
6.62% {
top: 2.5em;
left: 5em;
}
6.84% {
top: -8em;
}
7.76% {
top: 1em;
left: 23em;
}
7.96% {
top: -8em;
}
9.00% {
top: 2.5em;
left: 17em;
}
9.12% {
top: -8em;
}
10.07% {
top: 2.5em;
left: 29em;
}
10.21% {
top: -8em;
}
11.07% {
top: 2.5em;
left: 29em;
}
11.24% {
top: -8em;
}
12.44% {
top: 1em;
left: 23em;
}
12.64% {
top: -8em;
}
13.78% {
top: 2.5em;
left: 17em;
}
13.98% {
top: -8em;
}
14.76% {
top: 2.5em;
left: 17em;
}
14.90% {
top: -8em;
}
15.73% {
top: 2.5em;
left: 29em;
}
15.96% {
top: -8em;
}
16.56% {
top: 2.5em;
left: 5em;
}
16.78% {
top: -8em;
}
17.39% {
top: 1em;
left: 11em;
}
17.52% {
top: -8em;
}
18.29% {
top: 1em;
left: 11em;
}
18.51% {
top: -8em;
}
19.50% {
top: 2.5em;
left: 5em;
}
19.70% {
top: -8em;
}
21.05% {
top: 1em;
left: 11em;
}
21.24% {
top: -8em;
}
22.15% {
top: 2.5em;
left: 5em;
}
22.38% {
top: -8em;
}
23.27% {
top: 1em;
left: 23em;
}
23.47% {
top: -8em;
}
24.45% {
top: 1em;
left: 23em;
}
24.58% {
top: -8em;
}
25.78% {
top: 1em;
left: 23em;
}
25.94% {
top: -8em;
}
26.65% {
top: 2.5em;
left: 29em;
}
26.85% {
top: -8em;
}
27.76% {
top: 2.5em;
left: 17em;
}
27.89% {
top: -8em;
}
28.85% {
top: 2.5em;
left: 5em;
}
29.06% {
top: -8em;
}
30.02% {
top: 1em;
left: 23em;
}
30.23% {
top: -8em;
}
30.89% {
top: 2.5em;
left: 17em;
}
31.05% {
top: -8em;
}
31.76% {
top: 2.5em;
left: 5em;
}
31.98% {
top: -8em;
}
32.67% {
top: 2.5em;
left: 17em;
}
32.84% {
top: -8em;
}
33.83% {
top: 2.5em;
left: 29em;
}
34.07% {
top: -8em;
}
35.16% {
top: 2.5em;
left: 5em;
}
35.33% {
top: -8em;
}
35.96% {
top: 2.5em;
left: 5em;
}
36.14% {
top: -8em;
}
36.93% {
top: 1em;
left: 11em;
}
37.05% {
top: -8em;
}
38.24% {
top: 2.5em;
left: 5em;
}
38.39% {
top: -8em;
}
39.07% {
top: 2.5em;
left: 5em;
}
39.22% {
top: -8em;
}
40.85% {
top: 2.5em;
left: 17em;
}
41.09% {
top: -8em;
}
42.17% {
top: 2.5em;
left: 17em;
}
42.34% {
top: -8em;
}
43.13% {
top: 2.5em;
left: 5em;
}
43.34% {
top: -8em;
}
44.41% {
top: 1em;
left: 11em;
}
44.63% {
top: -8em;
}
45.52% {
top: 2.5em;
left: 29em;
}
45.71% {
top: -8em;
}
46.48% {
top: 1em;
left: 11em;
}
46.71% {
top: -8em;
}
47.81% {
top: 2.5em;
left: 29em;
}
47.94% {
top: -8em;
}
48.69% {
top: 1em;
left: 23em;
}
48.91% {
top: -8em;
}
49.85% {
top: 2.5em;
left: 17em;
}
50.07% {
top: -8em;
}
51.15% {
top: 2.5em;
left: 5em;
}
51.28% {
top: -8em;
}
52.43% {
top: 2.5em;
left: 17em;
}
52.56% {
top: -8em;
}
53.57% {
top: 2.5em;
left: 5em;
}
53.75% {
top: -8em;
}
54.56% {
top: 2.5em;
left: 5em;
}
54.68% {
top: -8em;
}
55.40% {
top: 1em;
left: 23em;
}
55.53% {
top: -8em;
}
56.55% {
top: 1em;
left: 23em;
}
56.69% {
top: -8em;
}
57.37% {
top: 2.5em;
left: 29em;
}
57.56% {
top: -8em;
}
58.75% {
top: 1em;
left: 11em;
}
58.90% {
top: -8em;
}
59.51% {
top: 1em;
left: 23em;
}
59.71% {
top: -8em;
}
60.76% {
top: 2.5em;
left: 5em;
}
60.89% {
top: -8em;
}
61.55% {
top: 2.5em;
left: 29em;
}
61.78% {
top: -8em;
}
62.56% {
top: 1em;
left: 23em;
}
62.69% {
top: -8em;
}
63.84% {
top: 2.5em;
left: 5em;
}
63.98% {
top: -8em;
}
64.73% {
top: 1em;
left: 23em;
}
64.91% {
top: -8em;
}
66.07% {
top: 2.5em;
left: 17em;
}
66.24% {
top: -8em;
}
66.90% {
top: 1em;
left: 11em;
}
67.12% {
top: -8em;
}
67.97% {
top: 2.5em;
left: 5em;
}
68.18% {
top: -8em;
}
68.88% {
top: 1em;
left: 11em;
}
69.00% {
top: -8em;
}
69.98% {
top: 1em;
left: 11em;
}
70.13% {
top: -8em;
}
70.74% {
top: 2.5em;
left: 17em;
}
70.87% {
top: -8em;
}
71.51% {
top: 2.5em;
left: 29em;
}
71.65% {
top: -8em;
}
72.66% {
top: 2.5em;
left: 29em;
}
72.89% {
top: -8em;
}
73.58% {
top: 1em;
left: 11em;
}
73.73% {
top: -8em;
}
74.90% {
top: 1em;
left: 11em;
}
75.10% {
top: -8em;
}
75.71% {
top: 1em;
left: 23em;
}
75.90% {
top: -8em;
}
76.86% {
top: 1em;
left: 23em;
}
77.02% {
top: -8em;
}
78.07% {
top: 1em;
left: 23em;
}
78.27% {
top: -8em;
}
79.14% {
top: 2.5em;
left: 17em;
}
79.33% {
top: -8em;
}
79.95% {
top: 1em;
left: 11em;
}
80.91% {
top: 2.5em;
left: 29em;
}
81.10% {
top: -8em;
}
82.29% {
top: 1em;
left: 11em;
}
82.45% {
top: -8em;
}
83.57% {
top: 2.5em;
left: 29em;
}
83.75% {
top: -8em;
}
84.55% {
top: 2.5em;
left: 17em;
}
84.77% {
top: -8em;
}
85.79% {
top: 1em;
left: 11em;
}
85.95% {
top: -8em;
}
86.92% {
top: 2.5em;
left: 29em;
}
87.14% {
top: -8em;
}
87.90% {
top: 2.5em;
left: 17em;
}
88.12% {
top: -8em;
}
88.95% {
top: 2.5em;
left: 29em;
}
89.14% {
top: -8em;
}
89.97% {
top: 2.5em;
left: 5em;
}
90.10% {
top: -8em;
}
91.26% {
top: 1em;
left: 11em;
}
91.41% {
top: -8em;
}
92.29% {
top: 1em;
left: 11em;
}
92.45% {
top: -8em;
}
93.06% {
top: 2.5em;
left: 5em;
}
93.24% {
top: -8em;
}
93.88% {
top: 2.5em;
left: 5em;
}
94.02% {
top: -8em;
}
95.07% {
top: 2.5em;
left: 29em;
}
95.29% {
top: -8em;
}
96.29% {
top: 1em;
left: 23em;
}
96.42% {
top: -8em;
}
97.51% {
top: 2.5em;
left: 17em;
}
97.74% {
top: -8em;
}
98.40% {
top: 2.5em;
left: 29em;
}
98.61% {
top: -8em;
}
99.28% {
top: 2.5em;
left: 29em;
}
99.51% {
top: -8em;
}
}