html,body{height:100vh;margin:0;overflow:hidden}
body{width:100%;display:flex;flex-direction:column}
header{flex:0 0 auto;height:4rem;min-height:4rem}.game-area{position:relative;flex:1 1 auto;overflow:hidden;height:100%}
h1{text-align:left;padding-left:1%;font-size:30px;display:flex}.background{position:absolute;top:0;left:0;height:100%;width:100%;background:url('./media/images/bg-scroll.png')repeat-x;background-size:cover;z-index:-1;transition:filter 1s ease-in-out}.background.dark{filter:brightness(50%)}.cloud{filter:brightness(1);transform-origin:left center;transition:filter 1s ease-in-out;--scale:1;--dx:0px;--dy:0px;--wiggle-duration:2s;--hflip:1}.cloud.dark{filter:brightness(70%)}.cloud.wiggle{animation:wiggle var(--wiggle-duration)ease-in-out infinite}.cloud.no-transition{transition:none!important}
@keyframes wiggle{0%,100%{transform:translate(0,0)
scaleX(var(--hflip))
scale(var(--scale))}
50%{transform:translate(var(--dx),var(--dy))
scaleX(var(--hflip))
scale(var(--scale))}}.scrolling-object{position:absolute;width:60px;height:auto;z-index:2}.sway{animation:swayCactus 8s infinite;transform-origin:50%100%0}
@keyframes swayCactus{0%,100%{transform:rotate(-6deg)}
50%{transform:rotate(6deg)}}.difficulty-toggle{font-size:1.5rem;color:#331964;margin-top:1rem;display:inline-flex;position:fixed;align-items:center;width:20rem;gap:1rem;border-radius:26px;background-color:coral;z-index:6;justify-content:center;padding:0.5rem 1rem;left:9%;top:13%;transform:translateX(-50%)}.difficulty-toggle.hidden{display:none}.switch{position:relative;display:inline-block;width:50px;height:26px}.switch input{opacity:0;width:0;height:0}.switch.hidden{display:none}.slider{position:absolute;inset:0;background-color:#ccc;border-radius:26px;transition:0.3s}.slider::before{content:"";position:absolute;height:22px;width:22px;left:2px;bottom:2px;background-color:white;border-radius:50%;transition:0.3s}
input:checked+.slider{background-color:#16b0b7}
input:checked+.slider::before{transform:translateX(24px)}.lizard{height:74px;width:250px;position:absolute;background:url('./media/images/sprites/shenron-sprite.png')no-repeat;background-size:500px 74px;top:50vh;left:30vw;z-index:100}.lizard.leap{animation:leapAnim 0.3s steps(2)infinite}
@keyframes leapAnim{0%{background-position:0 0}
100%{background-position:-500px 0}}.lizard.invincible{animation:blink 0.2s steps(1)infinite}
@keyframes blink{0%,100%{opacity:1}
50%{opacity:0}}.pipe_sprite{position:absolute;background-color:transparent;top:40vh;left:100vw;height:70vh;width:8vw;z-index:3}.message{position:absolute;font-size:10vh;font-weight:100;color:#1c1a1a;background-color:#16b0b7;border-radius:22px;top:13vh;left:1vw;z-index:5;text-align:center}.score{z-index:6;position:absolute;display:inline-flex;gap:0.5rem;padding:0.5rem 1rem;background-color:#16b0b7;border-radius:1.5rem;font-size:2rem;color:#331964;top:.2rem;left:.2rem}.score_val{color:#8e045e}.health{width:150px;height:50px;background:url('./media/images/sprites/lives-sprite.png')
no-repeat 0 0;transition:background-position 0.05s ease;transform-origin:top left}.health.lives-3{background-position:0-152px}.health.lives-2{background-position:0-102px}.health.lives-1{background-position:0-52px}.health.lives-0{background-position:0 0}
#hamburger-box{display:flex;width:60px;height:60px;top:0;left:0}.hamburger{position:absolute;top:5em;right:2%;margin-left:-2em;margin-top:-75px;width:2em;height:45px;z-index:5}.hamburger span{display:block;position:relative;width:3em;height:7px;border-radius:3px;background-color:#5BA94A;margin-top:8px;transition:all 0.5s ease-in-out}.nav{position:fixed;width:100%;height:86%;opacity:0.9;background-color:#D4F1CA;top:-100%;left:0;right:0;bottom:0;overflow:visible;transition:all 0.2s ease-in-out;transform:scale(0);display:flex;flex-direction:column;align-items:center;justify-content:center}.nav-wrapper{flex:1;width:100%;overflow-y:auto;padding:1rem 0;box-sizing:border-box}.nav-wrapper nav{display:flex;flex-direction:column;align-items:center;text-align:center}.nav-wrapper nav a{font-size:1.75rem;margin:0 0;width:100%}.nav-wrapper nav h3,.nav-wrapper nav p{font-size:1.5rem;margin:.25rem 0;text-align:center}
#toggle{display:none}
#toggle:checked+.hamburger.top-bun{transform:rotate(-45deg);margin-top:25px}
#toggle:checked+.hamburger.bottom-bun{opacity:0;transform:rotate(45deg)}
#toggle:checked+.hamburger.meat{transform:rotate(45deg);margin-top:-7px}
#toggle:checked+.hamburger+.nav{top:0;transform:scale(1)}
div.top_banner{z-index:1000;position:fixed;display:flex;cursor:auto;justify-content:space-between;align-items:center;width:100%;top:0;right:0;left:0;background:#D0DFD0;height:4em}.worm{position:absolute;z-index:2;width:50px;height:auto;transform-origin:left center}.worm.wiggle{animation:wiggle var(--wiggle-duration)ease-in-out infinite}.worm.eaten{animation:pop 0.2s forwards}
@keyframes pop{to{transform:scale(0)rotate(45deg);opacity:0}}
#mobile-overlay{display:none;touch-action:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0;background:transparent;z-index:100}
#mobile-overlay.hidden{display:none}
@media(pointer:fine){#mobile-overlay{display:none!important}}
@media(pointer:coarse){@keyframes swayCactus-mobile{0%,100%{transform:rotate(-10deg)}
50%{transform:rotate(10deg)}}.sway{animation:swayCactus-mobile 4s infinite;transform-origin:50%100%0}
@keyframes worm-wiggle-mobile{0%,100%{transform:translate(0,0)rotate(-10deg)scale(1)}
50%{transform:translate(35px,30px)rotate(15deg)scale(1.3)}}.worm.wiggle{animation:worm-wiggle-mobile 1.3s ease-in-out infinite}.difficulty-toggle{left:auto;right:2vw;transform:translateX(0)}.message{font-size:7vh;left:0%;top:20vh}.difficulty-toggle{font-size:1.75rem;padding:0.75rem 1.25rem;top:18%}.pipe_sprite{width:9vw;height:72vh}.score{font-size:2.25rem;padding:0.75rem 1.25rem}
#mobile-overlay.hidden{display:none}.lizard{transform:scale(0.45);transform-origin:center center;left:-12vw;top:50vh}}.hidden{display:none!important}