@-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; }