@-webkit-keyframes dogMove {
from {
left: 0px;
}
to {
left: 450px;
}
}
@keyframes dogMove {
from {
left: 0px;
}
to {
left: 450px;
}
}
@-webkit-keyframes dogWalk {
0% {
background-position: 0px 0px;
}
3% {
background-position: -120px 0px;
}
6% {
background-position: -240px 0px;
}
9% {
background-position: -360px 0px;
}
12% {
background-position: 0px 0px;
}
15% {
background-position: -120px 0px;
}
18% {
background-position: -240px 0px;
}
21% {
background-position: -360px 0px;
}
24% {
background-position: 0px 0px;
}
27% {
background-position: -120px 0px;
}
30% {
background-position: -240px 0px;
}
33% {
background-position: -360px 0px;
}
36% {
background-position: 0px 0px;
}
39% {
background-position: -120px 0px;
}
42% {
background-position: -240px 0px;
}
45% {
background-position: -360px 0px;
}
48% {
background-position: 0px 0px;
}
51% {
background-position: -120px 0px;
}
54% {
background-position: -240px 0px;
}
57% {
background-position: -360px 0px;
}
60% {
background-position: 0px 0px;
}
63% {
background-position: -120px 0px;
}
66% {
background-position: -240px 0px;
}
69% {
background-position: -360px 0px;
}
/* Walk */
72% {
background-position: -480px 0px;
}
/* Snif */
75% {
background-position: -360px 0px;
}
78% {
background-position: -480px 0px;
}
81% {
background-position: -360px 0px;
}
90% {
background-position: 0px -110px;
}
/* Find */
93% {
background-position: -120px -110px;
}
/* Jump */
96% {
background-position: -240px -110px;
}
100% {
background-position: 1000px 1000px;
}
/*Hide*/
}
@keyframes dogWalk {
0% {
background-position: 0px 0px;
}
3% {
background-position: -120px 0px;
}
6% {
background-position: -240px 0px;
}
9% {
background-position: -360px 0px;
}
12% {
background-position: 0px 0px;
}
15% {
background-position: -120px 0px;
}
18% {
background-position: -240px 0px;
}
21% {
background-position: -360px 0px;
}
24% {
background-position: 0px 0px;
}
27% {
background-position: -120px 0px;
}
30% {
background-position: -240px 0px;
}
33% {
background-position: -360px 0px;
}
36% {
background-position: 0px 0px;
}
39% {
background-position: -120px 0px;
}
42% {
background-position: -240px 0px;
}
45% {
background-position: -360px 0px;
}
48% {
background-position: 0px 0px;
}
51% {
background-position: -120px 0px;
}
54% {
background-position: -240px 0px;
}
57% {
background-position: -360px 0px;
}
60% {
background-position: 0px 0px;
}
63% {
background-position: -120px 0px;
}
66% {
background-position: -240px 0px;
}
69% {
background-position: -360px 0px;
}
/* Walk */
72% {
background-position: -480px 0px;
}
/* Snif */
75% {
background-position: -360px 0px;
}
78% {
background-position: -480px 0px;
}
81% {
background-position: -360px 0px;
}
90% {
background-position: 0px -110px;
}
/* Find */
93% {
background-position: -120px -110px;
}
/* Jump */
96% {
background-position: -240px -110px;
}
100% {
background-position: 1000px 1000px;
}
/*Hide*/
}
@-webkit-keyframes dogLaugh {
0% {
background-position: -360px -110px;
}
50% {
background-position: -480px -110px;
}
100% {
background-position: -360px -110px;
}
}
@keyframes dogLaugh {
0% {
background-position: -360px -110px;
}
50% {
background-position: -480px -110px;
}
100% {
background-position: -360px -110px;
}
}
@-webkit-keyframes dogShow {
0% {
top: 560px;
}
25% {
top: 480px;
}
75% {
top: 480px;
}
100% {
top: 560px;
}
}
@keyframes dogShow {
0% {
top: 560px;
}
25% {
top: 480px;
}
75% {
top: 480px;
}
100% {
top: 560px;
}
}
@-webkit-keyframes lvlStart {
from {
left: 5000px;
}
to {
left: 0px;
}
}
@keyframes lvlStart {
from {
left: 5000px;
}
to {
left: 0px;
}
}
@-webkit-keyframes lvlEnd {
from {
left: 0px;
}
to {
left: 5000px;
}
}
@keyframes lvlEnd {
from {
left: 0px;
}
to {
left: 5000px;
}
}
@-webkit-keyframes duckWing {
0% {
background-position: 0px -220px;
}
33% {
background-position: -85px -220px;
}
66% {
background-position: -170px -220px;
}
100% {
background-position: -170px -220px;
}
}
@keyframes duckWing {
0% {
background-position: 0px -220px;
}
33% {
background-position: -85px -220px;
}
66% {
background-position: -170px -220px;
}
100% {
background-position: -170px -220px;
}
}
@-webkit-keyframes duck1 {
from {
left: -100px;
top: 0px;
}
to {
left: 1280px;
top: 400px;
}
}
@keyframes duck1 {
from {
left: -100px;
top: 0px;
}
to {
left: 1280px;
top: 400px;
}
}
@-webkit-keyframes duck2 {
0% {
left: -100px;
top: 300px;
}
50% {
left: 200px;
top: 0px;
}
100% {
left: 1280px;
top: 100px;
}
}
@keyframes duck2 {
0% {
left: -100px;
top: 300px;
}
50% {
left: 200px;
top: 0px;
}
100% {
left: 1280px;
top: 100px;
}
}
@-webkit-keyframes duck3 {
0% {
left: -100px;
top: 600px;
}
50% {
left: 600px;
top: 0px;
}
100% {
left: 1280px;
top: 600px;
}
}
@keyframes duck3 {
0% {
left: -100px;
top: 600px;
}
50% {
left: 600px;
top: 0px;
}
100% {
left: 1280px;
top: 600px;
}
}
@-webkit-keyframes duck4 {
0% {
left: -100px;
top: 100px;
}
50% {
left: 800px;
top: 500px;
}
100% {
left: 1280px;
top: 0px;
}
}
@keyframes duck4 {
0% {
left: -100px;
top: 100px;
}
50% {
left: 800px;
top: 500px;
}
100% {
left: 1280px;
top: 0px;
}
}
@-webkit-keyframes duck5 {
0% {
left: -100px;
top: 600px;
}
50% {
left: 600px;
top: 0px;
}
100% {
left: 1280px;
top: 600px;
}
}
@keyframes duck5 {
0% {
left: -100px;
top: 600px;
}
50% {
left: 600px;
top: 0px;
}
100% {
left: 1280px;
top: 600px;
}
}
@-webkit-keyframes duck6 {
0% {
left: -100px;
top: 0px;
}
30% {
left: 800px;
top: 150px;
}
60% {
left: 200px;
top: 0px;
}
100% {
left: 1280px;
top: 600px;
}
}
@keyframes duck6 {
0% {
left: -100px;
top: 0px;
}
30% {
left: 800px;
top: 150px;
}
60% {
left: 200px;
top: 0px;
}
100% {
left: 1280px;
top: 600px;
}
}
@-webkit-keyframes duck7 {
0% {
left: -100px;
top: 300px;
}
30% {
left: 100px;
top: 10px;
}
60% {
left: 600px;
top: 600px;
}
100% {
left: 1280px;
top: 0px;
}
}
@keyframes duck7 {
0% {
left: -100px;
top: 300px;
}
30% {
left: 100px;
top: 10px;
}
60% {
left: 600px;
top: 600px;
}
100% {
left: 1280px;
top: 0px;
}
}
@-webkit-keyframes duck8 {
0% {
left: -100px;
top: 100px;
}
30% {
left: 750px;
top: 500px;
}
60% {
left: 600px;
top: 600px;
}
100% {
left: 1280px;
top: 0px;
}
}
@keyframes duck8 {
0% {
left: -100px;
top: 100px;
}
30% {
left: 750px;
top: 500px;
}
60% {
left: 600px;
top: 600px;
}
100% {
left: 1280px;
top: 0px;
}
}
@-webkit-keyframes duck9 {
0% {
left: -100px;
top: 300px;
}
20% {
left: 300px;
top: 10px;
}
40% {
left: 400px;
top: 600px;
}
60% {
left: 900px;
top: 200px;
}
80% {
left: 1100px;
top: 500px;
}
100% {
left: 1280px;
top: 0px;
}
}
@keyframes duck9 {
0% {
left: -100px;
top: 300px;
}
20% {
left: 300px;
top: 10px;
}
40% {
left: 400px;
top: 600px;
}
60% {
left: 900px;
top: 200px;
}
80% {
left: 1100px;
top: 500px;
}
100% {
left: 1280px;
top: 0px;
}
}
@-webkit-keyframes duck10 {
0% {
left: -100px;
top: 300px;
}
10% {
left: 300px;
top: 300px;
}
20% {
left: 900px;
top: 600px;
}
30% {
left: 0px;
top: 200px;
}
40% {
left: 1100px;
top: 500px;
}
50% {
left: 600px;
top: 10px;
}
60% {
left: 400px;
top: 600px;
}
70% {
left: 900px;
top: 200px;
}
80% {
left: 400px;
top: 500px;
}
90% {
left: 1100px;
top: 200px;
}
100% {
left: 1280px;
top: 8px;
}
}
@keyframes duck10 {
0% {
left: -100px;
top: 300px;
}
10% {
left: 300px;
top: 300px;
}
20% {
left: 900px;
top: 600px;
}
30% {
left: 0px;
top: 200px;
}
40% {
left: 1100px;
top: 500px;
}
50% {
left: 600px;
top: 10px;
}
60% {
left: 400px;
top: 600px;
}
70% {
left: 900px;
top: 200px;
}
80% {
left: 400px;
top: 500px;
}
90% {
left: 1100px;
top: 200px;
}
100% {
left: 1280px;
top: 8px;
}
}
@-webkit-keyframes duckFall {
from {
top: 0px;
}
to {
top: 769px;
}
}
@keyframes duckFall {
from {
top: 0px;
}
to {
top: 769px;
}
}
#stage {
background: #897200 url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/stage.png") no-repeat left top;
width: 1280px;
height: 769px;
position: relative;
overflow: hidden;
}
#stage > input {
display: none;
}
#shootingArea {
width: 1280px;
height: 550px;
overflow: hidden;
}
#shootingArea > div {
position: absolute;
width: 1280px;
height: 550px;
left: 5000px;
overflow: hidden;
}
#shootingArea > div > div {
position: relative;
width: 100%;
height: 100%;
}
#shootingArea > div > div > label {
position: absolute;
top: 0;
left: 0;
height: 550px;
width: 1280px;
}
#shootingArea > div > div > div > label, #shootingArea > div > div > div > span {
background: url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/sprite.png") no-repeat;
height: 76px;
display: block;
width: 70px;
position: relative;
background-position: 0px -220px;
-webkit-animation: duckWing 200ms infinite step-end alternate;
animation: duckWing 200ms infinite step-end alternate;
}
#shootingArea > div > div > div > span {
display: none;
}
.console {
height: 56px;
background-color: #000;
border: 1px solid #7FCE16;
position: absolute;
bottom: 10px;
border-radius: 5px;
display: relative;
overflow: hidden;
}
#bullets {
width: 78px;
left: 305px;
}
#bullets > div {
position: relative;
margin-left: 9px;
margin-top: 5px;
}
#bullets > div > div {
width: 78px;
height: 56px;
position: absolute;
left: 5000px;
top: 0;
}
#bullets div span {
background: #000 url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/sprite.png") no-repeat left top;
display: block;
height: 20px;
width: 20px;
float: left;
background-position: 0px -557px;
}
#bullets > span {
color: #0099FF;
position: relative;
top: 25px;
left: 7px;
font-weight: bold;
letter-spacing: 3px;
}
#hits {
width: 313px;
left: 405px;
}
#hits > span {
color: #33CC33;
letter-spacing: 5px;
font-size: 28px;
margin-left: 5px;
vertical-align: top;
}
#hits > div {
display: inline-block;
width: 230px;
height: 45px;
}
#hits > div > span {
background: #000 url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/sprite.png") no-repeat left top;
display: block;
height: 20px;
width: 20px;
float: left;
background-position: -50px -557px;
margin-top: 10px;
margin-right: 3px;
}
#points {
width: 142px;
left: 740px;
}
#points div {
position: absolute;
background-color: #000;
color: #fff;
width: 10000px;
}
#points div span {
display: block;
float: left;
width: 142px;
font-size: 25px;
letter-spacing: 3px;
text-align: center;
font-family: "Times New Roman";
}
#points > span {
position: relative;
top: 25px;
left: 22px;
color: #fff;
font-size: 25px;
letter-spacing: 3px;
text-align: center;
font-family: "Times New Roman";
}
#dogIntro {
position: absolute;
bottom: 120px;
z-index: 1;
background: url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/sprite.png") no-repeat;
width: 120px;
height: 100px;
}
#dogLaugh {
width: 1280px;
height: 570px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#dogLaugh > div {
position: absolute;
top: 560px;
left: 560px;
}
#dogLaugh > div > span {
width: 150px;
height: 100px;
}
#dogLaugh > div > span:nth-child(1) {
display: block;
background: url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/sprite.png") no-repeat;
-webkit-animation: dogLaugh 200ms infinite steps(1) alternate;
animation: dogLaugh 200ms infinite steps(1) alternate;
}
#dogLaugh > div > span:nth-child(2) {
display: none;
background: url("https://raw.githubusercontent.com/vaielab/DuckHuntCss/master/sprite.png") no-repeat;
background-position: -600px 0px;
}
#bc1-1:checked ~ #shootingArea > div:nth-child(1) > div > label:nth-child(1),
#bc1-1:checked ~ #shootingArea > div:nth-child(1) > div > div > label,
#bc1-1:checked ~ #bullets div > div:nth-child(1) > span:nth-child(3) {
display: none;
}
#bc1-1:checked ~ #shootingArea > div:nth-child(1) > div > div > span {
display: block;
}
#bc1-2:checked ~ #shootingArea > div:nth-child(1) > div > label:nth-child(2),
#bc1-2:checked ~ #bullets div > div:nth-child(1) > span:nth-child(2) {
display: none;
}
#bc1-3:checked ~ #shootingArea > div:nth-child(1) > div > label:nth-child(3),
#bc1-3:checked ~ #bullets div > div:nth-child(1) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(1) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d1:checked ~ #points .pts1 {
left: -142px;
}
#d1:checked ~ #shootingArea > div:nth-child(1) label {
display: none;
}
#d1:checked ~ #shootingArea > div:nth-child(1) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d1:checked ~ #shootingArea > div:nth-child(1) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d1:checked ~ #dogLaugh > div:nth-child(1) > span:nth-child(1) {
display: none;
}
#d1:checked ~ #dogLaugh > div:nth-child(1) > span:nth-child(2) {
display: block;
}
#d1:checked ~ #hits > div > span:nth-child(1) {
background-position: -25px -557px;
}
#bc2-1:checked ~ #shootingArea > div:nth-child(2) > div > label:nth-child(1),
#bc2-1:checked ~ #shootingArea > div:nth-child(2) > div > div > label,
#bc2-1:checked ~ #bullets div > div:nth-child(2) > span:nth-child(3) {
display: none;
}
#bc2-1:checked ~ #shootingArea > div:nth-child(2) > div > div > span {
display: block;
}
#bc2-2:checked ~ #shootingArea > div:nth-child(2) > div > label:nth-child(2),
#bc2-2:checked ~ #bullets div > div:nth-child(2) > span:nth-child(2) {
display: none;
}
#bc2-3:checked ~ #shootingArea > div:nth-child(2) > div > label:nth-child(3),
#bc2-3:checked ~ #bullets div > div:nth-child(2) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(2) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d2:checked ~ #points .pts2 {
left: -142px;
}
#d2:checked ~ #shootingArea > div:nth-child(2) label {
display: none;
}
#d2:checked ~ #shootingArea > div:nth-child(2) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d2:checked ~ #shootingArea > div:nth-child(2) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d2:checked ~ #dogLaugh > div:nth-child(2) > span:nth-child(1) {
display: none;
}
#d2:checked ~ #dogLaugh > div:nth-child(2) > span:nth-child(2) {
display: block;
}
#d2:checked ~ #hits > div > span:nth-child(2) {
background-position: -25px -557px;
}
#bc3-1:checked ~ #shootingArea > div:nth-child(3) > div > label:nth-child(1),
#bc3-1:checked ~ #shootingArea > div:nth-child(3) > div > div > label,
#bc3-1:checked ~ #bullets div > div:nth-child(3) > span:nth-child(3) {
display: none;
}
#bc3-1:checked ~ #shootingArea > div:nth-child(3) > div > div > span {
display: block;
}
#bc3-2:checked ~ #shootingArea > div:nth-child(3) > div > label:nth-child(2),
#bc3-2:checked ~ #bullets div > div:nth-child(3) > span:nth-child(2) {
display: none;
}
#bc3-3:checked ~ #shootingArea > div:nth-child(3) > div > label:nth-child(3),
#bc3-3:checked ~ #bullets div > div:nth-child(3) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(3) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d3:checked ~ #points .pts3 {
left: -142px;
}
#d3:checked ~ #shootingArea > div:nth-child(3) label {
display: none;
}
#d3:checked ~ #shootingArea > div:nth-child(3) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d3:checked ~ #shootingArea > div:nth-child(3) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d3:checked ~ #dogLaugh > div:nth-child(3) > span:nth-child(1) {
display: none;
}
#d3:checked ~ #dogLaugh > div:nth-child(3) > span:nth-child(2) {
display: block;
}
#d3:checked ~ #hits > div > span:nth-child(3) {
background-position: -25px -557px;
}
#bc4-1:checked ~ #shootingArea > div:nth-child(4) > div > label:nth-child(1),
#bc4-1:checked ~ #shootingArea > div:nth-child(4) > div > div > label,
#bc4-1:checked ~ #bullets div > div:nth-child(4) > span:nth-child(3) {
display: none;
}
#bc4-1:checked ~ #shootingArea > div:nth-child(4) > div > div > span {
display: block;
}
#bc4-2:checked ~ #shootingArea > div:nth-child(4) > div > label:nth-child(2),
#bc4-2:checked ~ #bullets div > div:nth-child(4) > span:nth-child(2) {
display: none;
}
#bc4-3:checked ~ #shootingArea > div:nth-child(4) > div > label:nth-child(3),
#bc4-3:checked ~ #bullets div > div:nth-child(4) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(4) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d4:checked ~ #points .pts4 {
left: -142px;
}
#d4:checked ~ #shootingArea > div:nth-child(4) label {
display: none;
}
#d4:checked ~ #shootingArea > div:nth-child(4) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d4:checked ~ #shootingArea > div:nth-child(4) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d4:checked ~ #dogLaugh > div:nth-child(4) > span:nth-child(1) {
display: none;
}
#d4:checked ~ #dogLaugh > div:nth-child(4) > span:nth-child(2) {
display: block;
}
#d4:checked ~ #hits > div > span:nth-child(4) {
background-position: -25px -557px;
}
#bc5-1:checked ~ #shootingArea > div:nth-child(5) > div > label:nth-child(1),
#bc5-1:checked ~ #shootingArea > div:nth-child(5) > div > div > label,
#bc5-1:checked ~ #bullets div > div:nth-child(5) > span:nth-child(3) {
display: none;
}
#bc5-1:checked ~ #shootingArea > div:nth-child(5) > div > div > span {
display: block;
}
#bc5-2:checked ~ #shootingArea > div:nth-child(5) > div > label:nth-child(2),
#bc5-2:checked ~ #bullets div > div:nth-child(5) > span:nth-child(2) {
display: none;
}
#bc5-3:checked ~ #shootingArea > div:nth-child(5) > div > label:nth-child(3),
#bc5-3:checked ~ #bullets div > div:nth-child(5) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(5) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d5:checked ~ #points .pts5 {
left: -142px;
}
#d5:checked ~ #shootingArea > div:nth-child(5) label {
display: none;
}
#d5:checked ~ #shootingArea > div:nth-child(5) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d5:checked ~ #shootingArea > div:nth-child(5) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d5:checked ~ #dogLaugh > div:nth-child(5) > span:nth-child(1) {
display: none;
}
#d5:checked ~ #dogLaugh > div:nth-child(5) > span:nth-child(2) {
display: block;
}
#d5:checked ~ #hits > div > span:nth-child(5) {
background-position: -25px -557px;
}
#bc6-1:checked ~ #shootingArea > div:nth-child(6) > div > label:nth-child(1),
#bc6-1:checked ~ #shootingArea > div:nth-child(6) > div > div > label,
#bc6-1:checked ~ #bullets div > div:nth-child(6) > span:nth-child(3) {
display: none;
}
#bc6-1:checked ~ #shootingArea > div:nth-child(6) > div > div > span {
display: block;
}
#bc6-2:checked ~ #shootingArea > div:nth-child(6) > div > label:nth-child(2),
#bc6-2:checked ~ #bullets div > div:nth-child(6) > span:nth-child(2) {
display: none;
}
#bc6-3:checked ~ #shootingArea > div:nth-child(6) > div > label:nth-child(3),
#bc6-3:checked ~ #bullets div > div:nth-child(6) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(6) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d6:checked ~ #points .pts6 {
left: -142px;
}
#d6:checked ~ #shootingArea > div:nth-child(6) label {
display: none;
}
#d6:checked ~ #shootingArea > div:nth-child(6) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d6:checked ~ #shootingArea > div:nth-child(6) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d6:checked ~ #dogLaugh > div:nth-child(6) > span:nth-child(1) {
display: none;
}
#d6:checked ~ #dogLaugh > div:nth-child(6) > span:nth-child(2) {
display: block;
}
#d6:checked ~ #hits > div > span:nth-child(6) {
background-position: -25px -557px;
}
#bc7-1:checked ~ #shootingArea > div:nth-child(7) > div > label:nth-child(1),
#bc7-1:checked ~ #shootingArea > div:nth-child(7) > div > div > label,
#bc7-1:checked ~ #bullets div > div:nth-child(7) > span:nth-child(3) {
display: none;
}
#bc7-1:checked ~ #shootingArea > div:nth-child(7) > div > div > span {
display: block;
}
#bc7-2:checked ~ #shootingArea > div:nth-child(7) > div > label:nth-child(2),
#bc7-2:checked ~ #bullets div > div:nth-child(7) > span:nth-child(2) {
display: none;
}
#bc7-3:checked ~ #shootingArea > div:nth-child(7) > div > label:nth-child(3),
#bc7-3:checked ~ #bullets div > div:nth-child(7) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(7) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d7:checked ~ #points .pts7 {
left: -142px;
}
#d7:checked ~ #shootingArea > div:nth-child(7) label {
display: none;
}
#d7:checked ~ #shootingArea > div:nth-child(7) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d7:checked ~ #shootingArea > div:nth-child(7) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d7:checked ~ #dogLaugh > div:nth-child(7) > span:nth-child(1) {
display: none;
}
#d7:checked ~ #dogLaugh > div:nth-child(7) > span:nth-child(2) {
display: block;
}
#d7:checked ~ #hits > div > span:nth-child(7) {
background-position: -25px -557px;
}
#bc8-1:checked ~ #shootingArea > div:nth-child(8) > div > label:nth-child(1),
#bc8-1:checked ~ #shootingArea > div:nth-child(8) > div > div > label,
#bc8-1:checked ~ #bullets div > div:nth-child(8) > span:nth-child(3) {
display: none;
}
#bc8-1:checked ~ #shootingArea > div:nth-child(8) > div > div > span {
display: block;
}
#bc8-2:checked ~ #shootingArea > div:nth-child(8) > div > label:nth-child(2),
#bc8-2:checked ~ #bullets div > div:nth-child(8) > span:nth-child(2) {
display: none;
}
#bc8-3:checked ~ #shootingArea > div:nth-child(8) > div > label:nth-child(3),
#bc8-3:checked ~ #bullets div > div:nth-child(8) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(8) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d8:checked ~ #points .pts8 {
left: -142px;
}
#d8:checked ~ #shootingArea > div:nth-child(8) label {
display: none;
}
#d8:checked ~ #shootingArea > div:nth-child(8) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d8:checked ~ #shootingArea > div:nth-child(8) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d8:checked ~ #dogLaugh > div:nth-child(8) > span:nth-child(1) {
display: none;
}
#d8:checked ~ #dogLaugh > div:nth-child(8) > span:nth-child(2) {
display: block;
}
#d8:checked ~ #hits > div > span:nth-child(8) {
background-position: -25px -557px;
}
#bc9-1:checked ~ #shootingArea > div:nth-child(9) > div > label:nth-child(1),
#bc9-1:checked ~ #shootingArea > div:nth-child(9) > div > div > label,
#bc9-1:checked ~ #bullets div > div:nth-child(9) > span:nth-child(3) {
display: none;
}
#bc9-1:checked ~ #shootingArea > div:nth-child(9) > div > div > span {
display: block;
}
#bc9-2:checked ~ #shootingArea > div:nth-child(9) > div > label:nth-child(2),
#bc9-2:checked ~ #bullets div > div:nth-child(9) > span:nth-child(2) {
display: none;
}
#bc9-3:checked ~ #shootingArea > div:nth-child(9) > div > label:nth-child(3),
#bc9-3:checked ~ #bullets div > div:nth-child(9) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(9) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d9:checked ~ #points .pts9 {
left: -142px;
}
#d9:checked ~ #shootingArea > div:nth-child(9) label {
display: none;
}
#d9:checked ~ #shootingArea > div:nth-child(9) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d9:checked ~ #shootingArea > div:nth-child(9) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d9:checked ~ #dogLaugh > div:nth-child(9) > span:nth-child(1) {
display: none;
}
#d9:checked ~ #dogLaugh > div:nth-child(9) > span:nth-child(2) {
display: block;
}
#d9:checked ~ #hits > div > span:nth-child(9) {
background-position: -25px -557px;
}
#bc10-1:checked ~ #shootingArea > div:nth-child(10) > div > label:nth-child(1),
#bc10-1:checked ~ #shootingArea > div:nth-child(10) > div > div > label,
#bc10-1:checked ~ #bullets div > div:nth-child(10) > span:nth-child(3) {
display: none;
}
#bc10-1:checked ~ #shootingArea > div:nth-child(10) > div > div > span {
display: block;
}
#bc10-2:checked ~ #shootingArea > div:nth-child(10) > div > label:nth-child(2),
#bc10-2:checked ~ #bullets div > div:nth-child(10) > span:nth-child(2) {
display: none;
}
#bc10-3:checked ~ #shootingArea > div:nth-child(10) > div > label:nth-child(3),
#bc10-3:checked ~ #bullets div > div:nth-child(10) > span:nth-child(1) {
display: none;
}
#shootingArea > div:nth-child(10) > div > div {
position: absolute;
left: -100px;
top: 0;
width: 70px;
height: 76px;
}
#d10:checked ~ #points .pts10 {
left: -142px;
}
#d10:checked ~ #shootingArea > div:nth-child(10) label {
display: none;
}
#d10:checked ~ #shootingArea > div:nth-child(10) > div > div > span {
-webkit-animation: duckFall 500ms linear forwards;
animation: duckFall 500ms linear forwards;
background-position: -65px -460px;
display: block;
}
#d10:checked ~ #shootingArea > div:nth-child(10) > div > div {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#d10:checked ~ #dogLaugh > div:nth-child(10) > span:nth-child(1) {
display: none;
}
#d10:checked ~ #dogLaugh > div:nth-child(10) > span:nth-child(2) {
display: block;
}
#d10:checked ~ #hits > div > span:nth-child(10) {
background-position: -25px -557px;
}
#dogIntro {
-webkit-animation: dogMove 2.8s linear forwards, dogWalk 4s step-start 1 forwards;
animation: dogMove 2.8s linear forwards, dogWalk 4s step-start 1 forwards;
}
#shootingArea > div:nth-child(1),
#bullets > div > div:nth-child(1) {
-webkit-animation: lvlStart 1ms steps(1) 5s forwards, lvlEnd 1ms steps(1) 14s forwards;
animation: lvlStart 1ms steps(1) 5s forwards, lvlEnd 1ms steps(1) 14s forwards;
}
#shootingArea > div:nth-child(1) > div > div {
-webkit-animation: duck1 5s linear 5s forwards;
animation: duck1 5s linear 5s forwards;
}
#dogLaugh > div:nth-child(1) {
-webkit-animation: dogShow 4s 10s;
animation: dogShow 4s 10s;
}
#shootingArea > div:nth-child(2),
#bullets > div > div:nth-child(2) {
-webkit-animation: lvlStart 1ms steps(1) 14s forwards, lvlEnd 1ms steps(1) 23s forwards;
animation: lvlStart 1ms steps(1) 14s forwards, lvlEnd 1ms steps(1) 23s forwards;
}
#shootingArea > div:nth-child(2) > div > div {
-webkit-animation: duck2 5s linear 14s forwards;
animation: duck2 5s linear 14s forwards;
}
#dogLaugh > div:nth-child(2) {
-webkit-animation: dogShow 4s 19s;
animation: dogShow 4s 19s;
}
#shootingArea > div:nth-child(3),
#bullets > div > div:nth-child(3) {
-webkit-animation: lvlStart 1ms steps(1) 23s forwards, lvlEnd 1ms steps(1) 32s forwards;
animation: lvlStart 1ms steps(1) 23s forwards, lvlEnd 1ms steps(1) 32s forwards;
}
#shootingArea > div:nth-child(3) > div > div {
-webkit-animation: duck3 5s linear 23s forwards;
animation: duck3 5s linear 23s forwards;
}
#dogLaugh > div:nth-child(3) {
-webkit-animation: dogShow 4s 28s;
animation: dogShow 4s 28s;
}
#shootingArea > div:nth-child(4),
#bullets > div > div:nth-child(4) {
-webkit-animation: lvlStart 1ms steps(1) 32s forwards, lvlEnd 1ms steps(1) 41s forwards;
animation: lvlStart 1ms steps(1) 32s forwards, lvlEnd 1ms steps(1) 41s forwards;
}
#shootingArea > div:nth-child(4) > div > div {
-webkit-animation: duck4 5s linear 32s forwards;
animation: duck4 5s linear 32s forwards;
}
#dogLaugh > div:nth-child(4) {
-webkit-animation: dogShow 4s 37s;
animation: dogShow 4s 37s;
}
#shootingArea > div:nth-child(5),
#bullets > div > div:nth-child(5) {
-webkit-animation: lvlStart 1ms steps(1) 41s forwards, lvlEnd 1ms steps(1) 50s forwards;
animation: lvlStart 1ms steps(1) 41s forwards, lvlEnd 1ms steps(1) 50s forwards;
}
#shootingArea > div:nth-child(5) > div > div {
-webkit-animation: duck5 5s linear 41s forwards;
animation: duck5 5s linear 41s forwards;
}
#dogLaugh > div:nth-child(5) {
-webkit-animation: dogShow 4s 46s;
animation: dogShow 4s 46s;
}
#shootingArea > div:nth-child(6),
#bullets > div > div:nth-child(6) {
-webkit-animation: lvlStart 1ms steps(1) 50s forwards, lvlEnd 1ms steps(1) 59s forwards;
animation: lvlStart 1ms steps(1) 50s forwards, lvlEnd 1ms steps(1) 59s forwards;
}
#shootingArea > div:nth-child(6) > div > div {
-webkit-animation: duck6 5s linear 50s forwards;
animation: duck6 5s linear 50s forwards;
}
#dogLaugh > div:nth-child(6) {
-webkit-animation: dogShow 4s 55s;
animation: dogShow 4s 55s;
}
#shootingArea > div:nth-child(7),
#bullets > div > div:nth-child(7) {
-webkit-animation: lvlStart 1ms steps(1) 59s forwards, lvlEnd 1ms steps(1) 68s forwards;
animation: lvlStart 1ms steps(1) 59s forwards, lvlEnd 1ms steps(1) 68s forwards;
}
#shootingArea > div:nth-child(7) > div > div {
-webkit-animation: duck7 5s linear 59s forwards;
animation: duck7 5s linear 59s forwards;
}
#dogLaugh > div:nth-child(7) {
-webkit-animation: dogShow 4s 64s;
animation: dogShow 4s 64s;
}
#shootingArea > div:nth-child(8),
#bullets > div > div:nth-child(8) {
-webkit-animation: lvlStart 1ms steps(1) 68s forwards, lvlEnd 1ms steps(1) 77s forwards;
animation: lvlStart 1ms steps(1) 68s forwards, lvlEnd 1ms steps(1) 77s forwards;
}
#shootingArea > div:nth-child(8) > div > div {
-webkit-animation: duck8 5s linear 68s forwards;
animation: duck8 5s linear 68s forwards;
}
#dogLaugh > div:nth-child(8) {
-webkit-animation: dogShow 4s 73s;
animation: dogShow 4s 73s;
}
#shootingArea > div:nth-child(9),
#bullets > div > div:nth-child(9) {
-webkit-animation: lvlStart 1ms steps(1) 77s forwards, lvlEnd 1ms steps(1) 86s forwards;
animation: lvlStart 1ms steps(1) 77s forwards, lvlEnd 1ms steps(1) 86s forwards;
}
#shootingArea > div:nth-child(9) > div > div {
-webkit-animation: duck9 5s linear 77s forwards;
animation: duck9 5s linear 77s forwards;
}
#dogLaugh > div:nth-child(9) {
-webkit-animation: dogShow 4s 82s;
animation: dogShow 4s 82s;
}
#shootingArea > div:nth-child(10),
#bullets > div > div:nth-child(10) {
-webkit-animation: lvlStart 1ms steps(1) 86s forwards, lvlEnd 1ms steps(1) 95s forwards;
animation: lvlStart 1ms steps(1) 86s forwards, lvlEnd 1ms steps(1) 95s forwards;
}
#shootingArea > div:nth-child(10) > div > div {
-webkit-animation: duck10 5s linear 86s forwards;
animation: duck10 5s linear 86s forwards;
}
#dogLaugh > div:nth-child(10) {
-webkit-animation: dogShow 4s 91s;
animation: dogShow 4s 91s;
}