html{margin:0;padding:0}body{margin:0;padding:0}*{box-sizing:border-box;user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,0)}.hidden{display:none}#screen{position:absolute;width:100%;height:100%;min-width:300px;max-width:400px;top:0;left:50%;transform:translatex(-50%);margin:0 auto}.scene{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}.scene.hidden{display:none}.sprite{position:absolute;background-position:center center;background-repeat:no-repeat;background-size:contain}.sprite .image-shadow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;margin:7% 0 0 7%;opacity:.3}@font-face{font-family:Barlow;src:url("../fonts/Barlow-SemiBold.ttf") format("truetype")}@font-face{font-family:Nandos;src:url("../fonts/nandos-hand-alt.ttf") format("truetype")}.fade-out{transition:all .3s ease-out;opacity:0}.fade-in-out{animation:fade-in-out 1s ease-in-out forwards}.pop-1{transition:all .7s ease-out;opacity:0;transform:scale(1.5)}.pop-2{transition:all .3s ease-out;opacity:0;transform:translate(0,-100px) scale(2)}.pop-3{transition:all 1s ease-out;opacity:0;transform:translate(0,-40px) scale(1.1)}.pop-3-rotated{transition:all 1s ease-out;opacity:0;transform:rotate(-5deg) translate(0,-40px) scale(1.1)!important}.scale{animation:scale 1s infinite ease-in-out}.up-down{animation:up-down 1s alternate infinite ease-in-out}.highlight{animation:highlight .7s ease-in-out forwards}.highlight-once-out{animation:highlight-once-out .3s ease-in-out forwards}.highlight-left{animation:highlight-left .7s ease-in-out forwards}.highlight-right{animation:highlight-right .7s ease-in-out forwards}.highlight-up{animation:highlight-up .7s ease-in-out forwards}.highlight-down{animation:highlight-down .7s ease-in-out forwards}.wiggle{animation:wiggle .3s ease-in-out forwards}.hit-1{animation:hit-1 .6s forwards}.flash{animation:flash .5s}@keyframes up-down{100%{transform:translate(0,10px)}}@keyframes highlight-left{0%{transform:translate(0,0)}25%{transform:translate(-10px,0)}50%{transform:translate(0,0)}75%{transform:translate(-10px,0)}100%{transform:translate(0,0)}}@keyframes highlight-right{0%{transform:translate(0,0)}25%{transform:translate(10px,0)}50%{transform:translate(0,0)}75%{transform:translate(10px,0)}100%{transform:translate(0,0)}}@keyframes highlight-up{0%{transform:translate(0,0)}25%{transform:translate(0,-10px)}50%{transform:translate(0,0)}75%{transform:translate(0,-10px)}100%{transform:translate(0,0)}}@keyframes highlight-down{0%{transform:translate(0,0)}25%{transform:translate(0,10px)}50%{transform:translate(0,0)}75%{transform:translate(0,10px)}100%{transform:translate(0,0)}}@keyframes highlight{0%{transform:scale(1)}25%{transform:scale(1.15)}50%{transform:scale(1)}75%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes highlight-once-out{0%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.5}100%{transform:scale(1);opacity:0}}@keyframes scale{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes wiggle{0%{transform:translatex(0)}20%{transform:translatex(-5px)}40%{transform:translatex(5px)}60%{transform:translatex(-5px)}80%{transform:translatex(5px)}100%{transform:translatex(0)}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-in-out{0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}}@keyframes hit-1{0%{transform:rotate(0)}100%{transform:rotate(360deg) scale(.5);opacity:0}}@keyframes flash{0%{background-color:#fff}10%{background-color:#000}20%{background-color:#fff}30%{background-color:#000}40%{background-color:#fff}50%{background-color:#000}60%{background-color:#fff}70%{background-color:#000}80%{background-color:#fff}90%{background-color:#000}100%{background-color:#fff}}@keyframes bg{0%{transform:scale(1)}50%{transform:scale(2) rotate(-60deg)}0%{transform:scale(1)}}body[data-game=menu]{background:#f99a25}body[data-game=menu].ready-touch{background:#f88f0c}body[data-game=menu] #screen{font-family:Barlow,"sans-serif";background:#f88f0c url(../img/orange-bg.png) no-repeat center center;background-size:cover}body[data-game=menu] .scene#game.hidden{display:block;opacity:0}body[data-game=menu] .scene#end,body[data-game=menu] .scene#splash{z-index:2}body[data-game=menu] .scene#pause{transform:translate(0,50px);opacity:0}body[data-game=menu] .scene#pause.animate{transform:none;opacity:1;transition:all .3s ease-out}body[data-game=menu] .sprite.bg{width:120%;height:120%;background-image:url(../img/bg-flame-yellow.png);z-index:-1;opacity:.3}body[data-game=menu] .sprite.pause{background-color:#ffe263;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=menu] .sprite.button{min-width:280px;background:#000;padding:10px 20px;font-size:20px;font-family:Barlow,"sans-serif";white-space:nowrap;border-radius:999px;text-align:center;color:#fff;font-weight:400}body[data-game=menu] .sprite.button.white{background:#fff}body[data-game=menu] .sprite.text{color:#fff}body[data-game=menu] .sprite.text-score{font-family:Nandos;font-size:30px;color:#fff}body[data-game=menu] .sprite.title{font-family:Nandos;font-size:50px;white-space:nowrap;background:#ffe263;color:#000;padding:10px 30px;transform:rotate(-3deg);transform-origin:right center;transition:all .3s ease-out}body[data-game=menu] .sprite.title:hover{color:rgba(0,0,0,.5);cursor:pointer}body[data-game=menu] .sprite.title.ball{background-color:#ff4d31;animation:up-down 8s alternate infinite ease-in-out}body[data-game=menu] .sprite.title.slides{background-color:#ffe263;animation:up-down 7s alternate infinite ease-in-out -1s}body[data-game=menu] .sprite.title.ninja{background-color:#ffff49;animation:up-down 5s alternate infinite ease-in-out -.5s}body[data-game=menu] .sprite.title.invaders{background-color:#ff8200;animation:up-down 9s alternate infinite ease-in-out -.3s}body[data-game=menu] .sprite.title.flappy{background-color:#bafae2;animation:up-down 6s alternate infinite ease-in-out .1s}body[data-game=menu] .sprite.header{font-family:Barlow,"sans-serif";font-size:20px;font-weight:700;color:#000}body[data-game=menu] .sprite.text-footer{font-family:Nandos;font-size:30px;color:#000;background:#fff;padding:0 20px;transform:rotate(-5deg)}body[data-game=menu] .sprite.bg{animation:bg 42s infinite ease-in-out}body[data-game=menu] .sprite.clouds{background-repeat:repeat-x;border-bottom:solid #e6f4fa 300px;z-index:1}body[data-game=menu] .sprite.hills{background-repeat:repeat-x;border-bottom:solid #b8d0a6 100px;z-index:2}body[data-game=menu] .sprite.pole{background-position:center bottom}body[data-game=menu] .sprite.bomb{background-size:contain;background-repeat:no-repeat}body[data-game=menu] .sprite.stick{background-size:100% auto;background-repeat:repeat-y}body[data-game=menu] .sprite.tile{overflow:hidden}body[data-game=menu] .sprite.tile:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-top:solid rgba(255,255,255,.5) 2px;border-left:solid rgba(255,255,255,.5) 2px;border-right:solid rgba(0,0,0,.5) 2px;border-bottom:solid rgba(0,0,0,.5) 2px}body[data-game=menu] .sprite.tile .tile-image{position:absolute;background-repeat:no-repeat;background-size:cover;background-position:center center;transition:all .5s ease-out}body[data-game=menu] .sprite.tile.empty .tile-image{opacity:0}body[data-game=menu] .sprite.tile.empty:after{opacity:0}body[data-game=menu] .sprite.tile.animate{transition:all .15s ease-out}body[data-game=menu] .sprite.tile.no-border:after{opacity:0;transition:all .5s ease-out}body[data-game=ball]{background:#ffac7f}body[data-game=ball].ready-touch{background:#ff9c65}body[data-game=ball] #screen{font-family:Barlow,"sans-serif";background:#ff9c65 url(../img/pepper-bg.png) no-repeat center center;background-size:cover}body[data-game=ball] .scene#game.hidden{display:block;opacity:0}body[data-game=ball] .scene#end,body[data-game=ball] .scene#splash{z-index:2}body[data-game=ball] .scene#pause{transform:translate(0,50px);opacity:0}body[data-game=ball] .scene#pause.animate{transform:none;opacity:1;transition:all .3s ease-out}body[data-game=ball] .sprite.bg{width:120%;height:120%;background-image:url(../img/pepper-anim.png)}body[data-game=ball] .sprite.paddle{background:#b40e0c;border-radius:100px}body[data-game=ball] .sprite.ball{background:url(../img/ball.png) no-repeat center center;background-size:cover}body[data-game=ball] .sprite.text-footer{white-space:nowrap;font-size:20px;font-family:Nandos}body[data-game=ball] .sprite.pause{background-color:#ff4d31;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=ball] .sprite.button{min-width:280px;background:#000;padding:10px 20px;font-size:20px;font-family:Barlow,"sans-serif";white-space:nowrap;border-radius:999px;text-align:center;color:#fff;font-weight:400}body[data-game=ball] .sprite.button.white{background:#fff}body[data-game=ball] .sprite.text-score{font-family:Nandos;font-size:30px;color:#000;background:#fff;padding:0 20px;transform:rotate(-5deg)}body[data-game=ball] .sprite.title{font-family:Nandos;font-size:60px;white-space:nowrap;background:#ff4d31;color:#000;padding:8px 20px;transform:rotate(-3deg);transform-origin:right center;animation:up-down 4s alternate infinite ease-in-out}body[data-game=ball] .sprite.bounce{animation:scale 3s infinite ease-in-out}body[data-game=ball] .sprite.bg{animation:bg 42s infinite ease-in-out}body[data-game=slides]{background:#f99a25}body[data-game=slides].ready-touch{background:#f88f0c}body[data-game=slides] #screen{font-family:Barlow,"sans-serif";background:#f88f0c url(../img/orange-bg.png) no-repeat center center;background-size:cover}body[data-game=slides] .scene#game.hidden{display:block;opacity:0}body[data-game=slides] .scene#end,body[data-game=slides] .scene#splash{z-index:2}body[data-game=slides] .scene#pause{transform:translate(0,50px);opacity:0}body[data-game=slides] .scene#pause.animate{transform:none;opacity:1;transition:all .3s ease-out}body[data-game=slides] .sprite.bg{width:120%;height:120%;background-image:url(../img/bg-flame-yellow.png);z-index:-1;opacity:.3}body[data-game=slides] .sprite.pause{background-color:#ffe263;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=slides] .sprite.button{min-width:280px;background:#000;padding:10px 20px;font-size:20px;font-family:Barlow,"sans-serif";white-space:nowrap;border-radius:999px;text-align:center;color:#fff;font-weight:400}body[data-game=slides] .sprite.button.white{background:#fff}body[data-game=slides] .sprite.text{color:#fff}body[data-game=slides] .sprite.text-score{font-family:Nandos;font-size:30px;color:#fff}body[data-game=slides] .sprite.title{font-family:Nandos;font-size:60px;white-space:nowrap;background:#ffe263;color:#000;padding:10px 30px;transform:rotate(-3deg);transform-origin:right center;animation:up-down 4s alternate infinite ease-in-out}body[data-game=slides] .sprite.bounce{animation:scale 3s infinite ease-in-out}body[data-game=slides] .sprite.text-footer{font-family:Nandos;font-size:30px;color:#000;background:#fff;padding:0 20px;transform:rotate(-5deg)}body[data-game=slides] .sprite.bg{animation:bg 42s infinite ease-in-out}body[data-game=slides] .sprite.clouds{background-repeat:repeat-x;border-bottom:solid #e6f4fa 300px;z-index:1}body[data-game=slides] .sprite.hills{background-repeat:repeat-x;border-bottom:solid #b8d0a6 100px;z-index:2}body[data-game=slides] .sprite.pole{background-position:center bottom}body[data-game=slides] .sprite.bomb{background-size:contain;background-repeat:no-repeat}body[data-game=slides] .sprite.stick{background-size:100% auto;background-repeat:repeat-y}body[data-game=slides] .sprite.tile{overflow:hidden}body[data-game=slides] .sprite.tile:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;border-top:solid rgba(255,255,255,.5) 2px;border-left:solid rgba(255,255,255,.5) 2px;border-right:solid rgba(0,0,0,.5) 2px;border-bottom:solid rgba(0,0,0,.5) 2px}body[data-game=slides] .sprite.tile .tile-image{position:absolute;background-repeat:no-repeat;background-size:cover;background-position:center center;transition:all .5s ease-out}body[data-game=slides] .sprite.tile.empty .tile-image{opacity:0}body[data-game=slides] .sprite.tile.empty:after{opacity:0}body[data-game=slides] .sprite.tile.animate{transition:all .15s ease-out}body[data-game=slides] .sprite.tile.no-border:after{opacity:0;transition:all .5s ease-out}body[data-game=ninja]{background:#aac950}body[data-game=ninja].ready-touch{background:#a1c33d}body[data-game=ninja] #screen{font-family:Barlow,"sans-serif";background:#a1c33d url(../img/green-bg.png) no-repeat center center;background-size:cover}body[data-game=ninja] .scene#game.hidden{display:block;opacity:0}body[data-game=ninja] .scene#end,body[data-game=ninja] .scene#splash{z-index:2}body[data-game=ninja] .scene#pause{transform:translate(0,50px);opacity:0}body[data-game=ninja] .scene#pause.animate{transform:none;opacity:1;transition:all .3s ease-out}body[data-game=ninja] .sprite.bg{width:120%;height:120%;background-image:url(../img/pepper-green.png)}body[data-game=ninja] .sprite.pause{background-color:#ffff49;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=ninja] .sprite.button{min-width:280px;background:#000;padding:10px 20px;font-size:20px;font-family:Barlow,"sans-serif";white-space:nowrap;border-radius:999px;text-align:center;color:#fff;font-weight:400}body[data-game=ninja] .sprite.button.white{background:#fff}body[data-game=ninja] .sprite.text-score{font-family:Nandos;font-size:30px;color:#000;background:#fff;padding:0 20px;transform:rotate(-5deg)}body[data-game=ninja] .sprite.title{font-family:Nandos;font-size:60px;white-space:nowrap;background:#ffff49;color:#000;padding:8px 20px;transform:rotate(-3deg);transform-origin:right center;animation:up-down 4s alternate infinite ease-in-out}body[data-game=ninja] .sprite.bounce{animation:scale 3s infinite ease-in-out}body[data-game=ninja] .sprite.text{color:#fff}body[data-game=ninja] .sprite.text-footer{white-space:nowrap;font-size:20px;font-family:Nandos;transform:rotate(-3deg)}body[data-game=ninja] .sprite.bg{animation:bg 42s infinite ease-in-out}body[data-game=ninja] .sprite.tile.animate-fall{transition:top .2s linear}body[data-game=ninja] .sprite.bubble{background:#ffff49;border-radius:5px;transform:rotate(45deg);animation:fade-out .2s forwards}body[data-game=invaders]{background:#ffcd5a}body[data-game=invaders].ready-touch{background:#ffc540}body[data-game=invaders] #screen{font-family:Barlow,"sans-serif";background:#ff9c65 url(../img/bg-yellow.png) no-repeat center center;background-size:cover}body[data-game=invaders] .scene#game.hidden{display:block;opacity:0}body[data-game=invaders] .scene#end,body[data-game=invaders] .scene#splash{z-index:2}body[data-game=invaders] .scene#pause{transform:translate(0,50px);opacity:0}body[data-game=invaders] .scene#pause.animate{transform:none;opacity:1;transition:all .3s ease-out}body[data-game=invaders] .sprite.bg{width:120%;height:120%;background-image:url(../img/bg-flame-yellow.png)}body[data-game=invaders] .sprite.text-footer{white-space:nowrap;font-size:12px;font-family:Barlow,"sans-serif"}body[data-game=invaders] .sprite.pause{background-color:#ff8200;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=invaders] .sprite.button{min-width:280px;background:#000;padding:10px 20px;font-size:20px;font-family:Barlow,"sans-serif";white-space:nowrap;border-radius:999px;text-align:center;color:#fff;font-weight:400}body[data-game=invaders] .sprite.button.white{background:#fff}body[data-game=invaders] .sprite.text-score{font-family:Nandos;font-size:30px;color:#000;background:#fff;padding:0 20px;transform:rotate(-5deg)}body[data-game=invaders] .sprite.title{font-family:Nandos;font-size:60px;white-space:nowrap;background:#ff8200;color:#000;padding:8px 20px;transform:rotate(3deg)}body[data-game=invaders] .sprite.title2{font-family:Nandos;font-size:60px;white-space:nowrap;background:#ff8200;color:#000;padding:8px 20px;transform:rotate(-3deg);transform-origin:right center;animation:up-down 4s alternate infinite ease-in-out}body[data-game=invaders] .sprite.bounce{animation:scale 3s infinite ease-in-out}body[data-game=invaders] .sprite.bg{animation:bg 42s infinite ease-in-out}body[data-game=flappy]{background:#73cdd8}body[data-game=flappy].ready-touch{background:#5fc6d2}body[data-game=flappy] #screen{font-family:Barlow,"sans-serif";background:#5fc6d2 url(../img/bg-cyan.png) no-repeat center center;background-size:cover}body[data-game=flappy] .scene#game.hidden{display:block;opacity:0}body[data-game=flappy] .scene#end,body[data-game=flappy] .scene#splash{z-index:2}body[data-game=flappy] .scene#pause{transform:translate(0,50px);opacity:0}body[data-game=flappy] .scene#pause.animate{transform:none;opacity:1;transition:all .3s ease-out}body[data-game=flappy] .sprite.bg{width:120%;height:120%;background-image:url(../img/bg-flame-white.png);opacity:.1}body[data-game=flappy] .sprite.pause{background-color:#bafae2;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=flappy] .sprite.text-footer{white-space:nowrap;font-size:30px;font-family:Nandos;transform:rotate(-3deg);color:#fff}body[data-game=flappy] .sprite.pause{background-color:#bafae2;background-image:url(../img/pause.png);background-size:20%;border-radius:999px}body[data-game=flappy] .sprite.button{min-width:280px;background:#000;padding:10px 20px;font-size:20px;font-family:Barlow,"sans-serif";white-space:nowrap;border-radius:999px;text-align:center;color:#fff;font-weight:400}body[data-game=flappy] .sprite.button.white{background:#fff}body[data-game=flappy] .sprite.text-score{font-family:Nandos;font-size:30px;color:#000;background:#fff;padding:0 20px;transform:rotate(-5deg)}body[data-game=flappy] .sprite.title{font-family:Nandos;font-size:58px;white-space:nowrap;background:#bafae2;color:#000;padding:8px 25px;transform:rotate(-3deg);transform-origin:right center;animation:up-down 4s alternate infinite ease-in-out}body[data-game=flappy] .sprite.bounce{animation:scale 3s infinite ease-in-out}body[data-game=flappy] .sprite.bg{animation:bg 42s infinite ease-in-out}body[data-game=flappy] .sprite.clouds{background-repeat:repeat-x;border-bottom:solid #e6f4fa 300px;z-index:1}body[data-game=flappy] .sprite.hills{background-repeat:repeat-x;border-bottom:solid #4795a0 100px;z-index:2}body[data-game=flappy] .sprite.pole{background-position:center bottom}body[data-game=flappy] .sprite.bomb{background-size:contain;background-repeat:no-repeat}body[data-game=flappy] .sprite.stick{background-size:100% auto;background-repeat:repeat-y}.close-button{width:40px;height:40px;font-size:40px;color:#000;cursor:pointer;font-family:'Courier New',Courier,monospace}