html,body{height:400px;overflow:hidden;width:900px}html{border:7px solid #333;margin:50px auto;background-color:#000}body{background-image:linear-gradient(#080d11,#162432);color:#fff;margin:0;padding:0;cursor:default;font-family:'Open Sans','Helvetica Neue','Arial';font-size:16px;user-select:none;transform:translateZ(0)}body::after{content:url(parachute_btn.svg) url(shield_btn.svg) url(separation_btn.svg) url(parachute.svg) url(capsule.svg) url(shield.svg) url(skycrane_hd.svg) url(friction.svg);display:none}.h{display:none}#main,#DOMgame,#canvasGame,#panel,.stars{bottom:0;left:0;position:absolute;right:0;top:0}#main{background:transparent url(surface.svg) left bottom repeat-x;text-align:center}.stars{background-image:url(stars.svg);pointer-events:none;bottom:25%}h1{font-size:3.5em;font-weight:400;margin-bottom:.25em}h2{font-size:1em;font-weight:400}button{background-color:#f5f5f5;border:0;border-bottom:1px solid #bbb;border-radius:.5em;box-shadow:0 .5em 0 #c5c5c5;color:#333;cursor:pointer;font-size:1em;height:4.5em;margin:1em 0;width:5em}button.parachute_stg{background-image:url(parachute_btn.svg)}button.shield_stg{background-image:url(shield_btn.svg)}button.separation_stg{background-image:url(separation_btn.svg)}button.parachute_stg,button.shield_stg,button.separation_stg{background-position:center;background-repeat:no-repeat;background-size:2.5em}#main img{width:60px;height:40px;vertical-align:bottom;margin-right:10px}#time{font-size:3em;line-height:1em;position:absolute;right:.3em;top:.2em}#time::before{content:'time';display:inline-block;font-size:.34em;left:-1.75em;line-height:1em;position:absolute;text-align:center;top:1.1em;transform:rotate(-90deg)}#action{bottom:.5em;height:3.9em;position:absolute;right:1em;width:4.25em}#message{bottom:.5em;left:0;position:absolute;right:0;text-align:center}#DOMgame{animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;height:150%;left:-25%;top:-25%;transform:rotate(6deg);width:150%}#spacecraft{transition:all 1.5s ease;left:50%;top:50%;width:160px;margin-left:-80px;height:104px;margin-top:-52px}#parachute{background:transparent url(parachute.svg) bottom center no-repeat;top:5px;transform:scaleY(0);width:498px;height:1554px;left:-173px}#capsule{background:transparent url(capsule.svg) bottom center no-repeat;height:70%;top:0;width:100%}#shield{background:transparent url(shield.svg) top center no-repeat;bottom:0;height:30%;width:100%}#curiosity{background-image:url(skycrane_hd.svg);width:118px;height:58px;left:21px;top:23px}#spacecraft,#parachute,#capsule,#shield,#curiosity,#friction{background-size:100%;position:absolute}@keyframes entry-tremor{0%{transform:translate(-.2%,-1%)}33%{transform:translate(.2%,.1%)}66%{transform:translate(.1%,-.3%)}100%{transform:translate(-.2%,.3%)}}.entry_stg{animation-name:entry-tremor;animation-duration:100ms;background-image:linear-gradient(transparent 50%,#e8835e)}.entry_stg #spacecraft{transform:rotate(-62deg)}@keyframes resistance{0%{opacity:0}30%{opacity:.6}80%{opacity:.6}100%{opacity:0}}.entry_stg #friction{animation:resistance 21s ease-in-out;background-image:url(friction.svg);bottom:0;display:block;height:90%;left:-9%;opacity:0;width:118%}@keyframes parachute-tremor{0%{transform:translate(-.05%,-.1%) rotate(-1deg)}33%{transform:translate(.1%,.1%)}66%{transform:translate(.05%,-.05%)}100%{transform:translate(-.05%,.05%) rotate(1deg)}}#DOMgame.parachute_stg{animation-name:parachute-tremor;animation-duration:100ms;background-image:linear-gradient(transparent 45%,#e8835e)}.parachute_stg #spacecraft{transform:rotate(-50deg) scale(.25)}@keyframes parachute-deploy{0%{transform:translateY(-50%) scaleY(0)}75%{transform:translateY(-100%) scaleY(1)}}.parachute_stg #parachute{animation:parachute-deploy 200ms ease-out;transform:translateY(-100%) scaleY(1)}@keyframes shield-tremor{0%{transform:translate(-.1%,-.1%)}33%{transform:translate(.02%,.1%)}66%{transform:translate(.05%,-.2%)}100%{transform:translate(-.04%,.02%)}}#DOMgame.shield_stg{animation-name:shield-tremor;animation-duration:200ms;background-image:linear-gradient(transparent 40%,#e8835e)}.shield_stg #spacecraft{transform:rotate(-30deg)}.shield_stg #shield{transform:translateY(5000%) rotate(-100deg);transition:all 2s ease-in 200ms}.separation_stg #capsule{transform:translateY(-5000%);transition:all 2s ease-in 250ms}.separation_stg #parachute{transform:translateY(-335%);transition:all 2s ease-in 250ms}.separation_stg #spacecraft{transform:rotate(-20deg)}#canvasGame{background:transparent url(surface.svg) left 85% repeat-x}#canvas{background-image:linear-gradient(transparent 85%,#ec865d 85%)}#landing{border:.16em dashed #fff;border-radius:.5em;height:35px;left:720px;position:absolute;top:260px;width:60px}#landing::before{content:'Hold onto this area by 5 seconds';display:inline-block;height:100%;position:absolute;right:0;text-align:right;top:-100%;width:1000%}#landing.holding{background-color:rgba(255,255,255,.4)}