*{box-sizing:border-box;margin:0;padding:0}.App,body{overflow-x:hidden}.App{display:flex;height:0;max-width:100vw;min-height:100vh;width:100vw}.App #games{display:grid;grid-auto-rows:50%;grid-template-columns:repeat(2,50%);height:100%;left:0;position:relative;transition:all .5s ease-in-out;width:80%}.App #games>*{border:1px solid #000;cursor:pointer;z-index:0}.App #games>.not-compatible{align-items:center;background-color:#4188de;flex-direction:column;font-family:sans-serif;text-align:center}.App #games>.not-compatible>*{background-color:initial;color:#fff;font-size:clamp(.8rem,2.5vw,5rem)}.App #games>* video{object-fit:fill}.App #games>* img,.App #games>* video{height:100%;width:100%}.App #games>*>h1{background-color:#fff}.App #games>.active>i{display:block}.App #games>*>i{color:#222;display:none;font-size:2rem;position:absolute;right:20px;top:20px;z-index:10}.App #games>*>i:hover{color:#666}.App #games.active{width:100vw}.App #user-credentials{align-items:center;background-color:#fff;display:flex;flex-direction:column;font-family:sans-serif;gap:clamp(.3rem,1vw,2.5rem);height:100%;justify-content:flex-start;position:absolute;right:-20%;text-align:center;transition:all .5s ease-in-out;width:20vw;z-index:5}.App #user-credentials .logo{height:30%}.App #user-credentials .logo img{height:100%;width:100%}.App #user-credentials>h1{font-size:clamp(1rem,2vw,4rem)}.App #user-credentials .login,.App #user-credentials .register{align-items:center;display:none;flex-direction:column;gap:clamp(.6rem,1.5vw,2.5rem);justify-content:center;width:100%}.App #user-credentials .login.active,.App #user-credentials .register.active{display:flex}.App #user-credentials .login>h1,.App #user-credentials .register>h1{font-family:Roboto,sans-serif;font-size:clamp(1rem,2vw,4rem);text-transform:capitalize}.App #user-credentials .login form,.App #user-credentials .register form{align-items:center;display:flex;flex-direction:column;gap:clamp(.6rem,1.5vw,2.5rem);justify-content:center;width:80%}.App #user-credentials .login form input,.App #user-credentials .register form input{border:2px solid #999;border-radius:5px;font-size:clamp(.6rem,1vw,3rem);outline:none;padding:clamp(.5rem,.6vw,2rem);transition:all .3s ease-in-out;width:100%}.App #user-credentials .login form input:focus,.App #user-credentials .register form input:focus{border:2px solid #4188de;color:#4188de}.App #user-credentials .login form button,.App #user-credentials .register form button{background-color:#4188de;border:1px solid #222;border-radius:5px;color:#fff;cursor:pointer;font-size:clamp(.6rem,1vw,3rem);max-width:50%;outline:none;padding:clamp(.5rem,.6vw,2rem);transition:all .3s ease-in-out;width:100%}.App #user-credentials .login form button:hover,.App #user-credentials .register form button:hover{background-color:#fff;color:#4188de}.App #user-credentials .login p,.App #user-credentials .register p{font-size:clamp(.6rem,1.2vw,2.5rem)}.App #user-credentials .login p span,.App #user-credentials .register p span{color:#4188de;cursor:pointer;font-weight:800}.App #user-credentials .login p span:active,.App #user-credentials .login p span:focus,.App #user-credentials .login p span:hover,.App #user-credentials .register p span:active,.App #user-credentials .register p span:focus,.App #user-credentials .register p span:hover{color:#0555b5}.App #user-credentials .login .warning,.App #user-credentials .register .warning{color:red;font-family:sans-serif;font-size:clamp(.6rem,1.2vw,1.2rem);text-transform:uppercase}.App #user-credentials .games-history{overflow-y:scroll;padding:0 clamp(.2rem,.8vw,2rem);transition:inherit;width:100%}.App #user-credentials .games-history::-webkit-scrollbar{width:clamp(.3rem,.5vw,1rem)}.App #user-credentials .games-history::-webkit-scrollbar-track{background:#f1f1f1}.App #user-credentials .games-history::-webkit-scrollbar-thumb{background:#4188de;border-radius:50px}.App #user-credentials .games-history::-webkit-scrollbar-thumb:hover{background:#0555b5}.App #user-credentials .games-history .game-header{border-radius:clamp(.4rem,.6vw,1.5rem);box-shadow:0 0 6px 1px rgba(65,136,222,.8);cursor:pointer;font:1.5rem/1.7 sans-serif;font-size:clamp(.6rem,1.5vw,3.5rem);margin:clamp(.4rem,.6vw,1.5rem) 0;position:relative;text-align:center;text-transform:capitalize}.App #user-credentials .games-history .game-header i{color:#4188de;font-size:clamp(.6rem,1.5vw,3.5rem);position:absolute;right:clamp(.4rem,.6vw,1.5rem);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:all .3s ease-in-out}.App #user-credentials .games-history .game-header i[class*=down]{display:inline-block}.App #user-credentials .games-history .game-header i[class*=up],.App #user-credentials .games-history .game-header.active i[class*=down]{display:none}.App #user-credentials .games-history .game-header.active i[class*=up]{display:inline-block}.App #user-credentials .games-history .game-data{height:0;overflow-y:hidden;padding:0 clamp(.2rem,.5vw,1rem);transition:inherit;width:100%}.App #user-credentials .games-history .game-data>div{align-items:center;border-radius:clamp(.25rem,.5vw,1rem);box-shadow:0 0 6px 1px rgba(65,136,222,.6);display:flex;font-size:clamp(.5rem,1vw,2.5rem);justify-content:space-between;margin:clamp(.4rem,.8vw,1.5rem) 0;padding:clamp(.4rem,.8vw,1.5rem)}.App #user-credentials .games-history .game-data .no-data{color:#555;margin:10px 0;text-align:center}.App #user-credentials #resize-credentials{left:0;position:absolute;top:50%;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%);transition:all .3s ease-in-out}.App #user-credentials #resize-credentials span{background-color:#fff;border-radius:10%;box-shadow:-10px 0 5px 0 rgba(0,0,0,.1);color:#4188de;cursor:pointer;font-size:clamp(.5rem,1.7vw,3rem);padding:clamp(.3rem,.4vw,1rem);transition:all .3s ease-in-out}.App #user-credentials #resize-credentials span:hover{background-color:#4188de;color:#fff}.App #user-credentials #resize-credentials span i{display:none}.App #user-credentials #resize-credentials span i[class*=left]{display:inline-block}.App #user-credentials.active{right:0}.App #user-credentials.active #resize-credentials{-webkit-transform:translateY(-50%);transform:translateY(-50%)}.App #user-credentials.active #resize-credentials span i{display:none}.App #user-credentials.active #resize-credentials span i[class*=right]{display:inline-block}.App #user-credentials #log-out{background-color:#fff;border-radius:clamp(.3rem,.6vw,1rem);box-shadow:0 0 4px 2px rgba(65,136,222,.8);cursor:pointer;font-family:sans-serif;font-size:clamp(.5rem,1.5vw,2.5rem);margin-top:20px;padding:clamp(.25rem,.5vw,1rem) clamp(.5rem,1vw,2rem);transition:.3s ease-in-out}.App #user-credentials #log-out:hover{background-color:#4188de;color:#fff}.App .loading-screen{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-color:rgba(0,0,0,.7);display:none;inset:0;position:absolute;z-index:50}.App .loading-screen.active{display:block}@media screen and (max-width:768px){.App #games{height:80%;top:20%;width:100%}.App #games.active{height:100%;top:0}.App #user-credentials{flex-direction:row;height:20%;left:0;top:-20%;width:100%}.App #user-credentials .logo{height:100%}.App #user-credentials .games-history{height:100%;max-width:50%}.App #user-credentials .login,.App #user-credentials .register{gap:clamp(.2rem,.5vw,.4rem)}.App #user-credentials .login>h1,.App #user-credentials .register>h1{font-size:clamp(.8rem,1vw,1rem)}.App #user-credentials .login form,.App #user-credentials .register form{gap:clamp(.2rem,.5vw,1rem)}.App #user-credentials .login form input,.App #user-credentials .register form input{border-width:1px;padding:clamp(.3rem,.8vw,.5rem)}.App #user-credentials .login form button,.App #user-credentials .register form button{max-width:100%;padding:clamp(.25rem,1vw,.5rem)}.App #user-credentials .register{gap:0}.App #user-credentials .register form{gap:clamp(0rem,.3vw,.2rem)}.App #user-credentials #resize-credentials{left:50%;top:100%;-webkit-transform:translate(-50%);transform:translate(-50%)}.App #user-credentials #resize-credentials span{font-size:clamp(.7rem,2vw,2rem);padding:clamp(.1rem,.8vw,.5rem)}.App #user-credentials #resize-credentials span i{display:none!important}.App #user-credentials #resize-credentials span i[class*=down]{display:inline-block!important}.App #user-credentials.active{top:0}.App #user-credentials.active #resize-credentials{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.App #user-credentials.active #resize-credentials span i{display:none!important}.App #user-credentials.active #resize-credentials span i[class*=up]{display:inline-block!important}}#sudoku-container{align-items:center;background-color:#4188de;display:flex;flex-direction:column;height:100%;justify-content:center;position:relative;transition:all .3s ease-in-out;transition-property:width,height,left,top;width:100%;z-index:10}#sudoku-container .difficulty{-webkit-animation:appear-sudoku .5s ease-in-out;animation:appear-sudoku .5s ease-in-out;color:#ff6453;font-family:sans-serif;font-size:clamp(.8rem,1.6vw,3.2rem);text-align:center;text-shadow:0 0 8px #000;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out}#sudoku-container .difficulty button{background-color:#fff;border:1px solid #000;border-radius:5px;box-shadow:0 0 6px #000;cursor:pointer;font-size:clamp(.8rem,1.6vw,3.2rem);margin:clamp(.5rem,1.8vw,4rem);padding:clamp(.4rem,.7vw,1.2rem) clamp(.8rem,1.2vw,2.4rem);transition:all .2s ease-in-out}#sudoku-container .difficulty button:active{box-shadow:0 0 0 0}#sudoku-container .difficulty button:hover{background-color:#ff6453;-webkit-transform:scale(1.1);transform:scale(1.1)}#sudoku-container .difficulty button:nth-of-type(2):hover{background-color:orange}#sudoku-container .difficulty button:first-of-type:hover{background-color:#49b449}@-webkit-keyframes appear-sudoku{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}#sudoku-container #sudoku{display:none;-webkit-transform:scale(0);transform:scale(0)}#sudoku-container #sudoku.active{-webkit-animation:appear-sudoku .5s ease-in-out forwards;animation:appear-sudoku .5s ease-in-out forwards;display:block;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out}#sudoku-container #sudoku>h1{font-family:sans-serif;font-size:clamp(2rem,2.5vw,4.8rem);margin-bottom:clamp(5px,.8rem,10px);text-align:center;text-shadow:0 0 16px #000;text-transform:uppercase}#sudoku-container #sudoku>h1.Easy{color:#90ee90}#sudoku-container #sudoku>h1.Medium{color:orange}#sudoku-container #sudoku>h1.Hard{color:red}#sudoku-container #sudoku .row{align-items:center;border-left:3px solid #000;border-right:3px solid #000;display:flex;justify-content:center}#sudoku-container #sudoku .row:first-of-type{border-top:3px solid #000}#sudoku-container #sudoku .row:first-of-type .box span{left:0;top:calc(-100% + -4px)}#sudoku-container #sudoku .row:nth-of-type(3n){border-bottom:3px solid #000}#sudoku-container #sudoku .row .box{--size:70px;align-items:center;background-color:initial;border:1px solid rgba(0,0,0,.5);cursor:pointer;display:flex;font-family:sans-serif;font-size:calc(var(--size)/1.8);font-weight:700;height:var(--size);justify-content:center;position:relative;width:var(--size)}#sudoku-container #sudoku .row .box:first-child span{left:calc(-100% + -4px)}#sudoku-container #sudoku .row .box:nth-child(3n){border-right:3px solid #000}#sudoku-container #sudoku .row .box span{align-items:center;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.5);color:rgba(0,0,0,.7);content:"\f303";display:none;font-family:Font Awesome\ 5 Free,sans-serif;font-size:calc(var(--size)/2.2);font-weight:900;height:100%;justify-content:center;left:calc(100% + 4px);position:absolute;top:0;width:100%;z-index:1}#sudoku-container #sudoku .row .box span:hover{background-color:#ddd}#sudoku-container #sudoku .row .box.selected{border:4px solid #ff6453}#sudoku-container #sudoku .row .box.selected span{display:flex}#sudoku-container #sudoku .row .box.new{background-color:initial;color:#ff6453}#sudoku-container #sudoku .row .box.pencil{color:rgba(0,0,0,.5);font-size:calc(var(--size)/5);letter-spacing:10px;word-break:break-all}#sudoku-container #sudoku .row .box.pencil span{background-color:blue;color:#3f3;letter-spacing:0}#sudoku-container #sudoku.error .row{border:5px solid red}#sudoku-container .timer{color:#ff6453;display:none;font-family:sans-serif;font-size:clamp(.7rem,1.4vw,2.8rem);left:clamp(10px,1.2vw,30px);position:absolute;text-shadow:0 0 16px #000;top:clamp(10px,1.2vw,30px);z-index:1}#sudoku-container .result{display:none;font-size:30px;text-align:center}#sudoku-container .result h1{margin-bottom:20px;text-align:center}#sudoku-container .result h1 span{-webkit-animation:dance .5s linear infinite;animation:dance .5s linear infinite;display:inline-block}@-webkit-keyframes dance{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.5);transform:scale(1.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes dance{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.5);transform:scale(1.5)}to{-webkit-transform:scale(1);transform:scale(1)}}#sudoku-container .result.active{-webkit-animation:appear-sudoku .5s ease-in-out;animation:appear-sudoku .5s ease-in-out;display:block}@keyframes appear-sudoku{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@media screen and (max-width:768px){#sudoku-container .result{font-size:clamp(.4rem,3.5vw,1.5rem)}}#snake-container{--size:50px;align-items:center;background-color:#fff;display:flex;flex-direction:column;font-family:sans-serif;height:100%;justify-content:center;left:0;position:relative;transition:all .3s ease-in-out;transition-property:width,height,left,top;width:100%}#snake-container.active{left:-100%;z-index:10}#snake-container #snake-game{align-items:center;background-color:#ff6453;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.5);display:flex;flex-wrap:wrap;height:100%;justify-content:center;width:100%}#snake-container #snake-game .box{height:var(--size);position:relative;width:var(--size)}#snake-container #snake-game .box i{display:none;font-size:calc(var(--size)*.75);left:50%;position:absolute;text-shadow:0 0 8px #000;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#snake-container #snake-game .box.apple i{-webkit-animation:glow .5s linear infinite;animation:glow .5s linear infinite;display:block}@-webkit-keyframes glow{0%,to{color:red;text-shadow:0 0 20px #555;-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}50%{color:#f99;-webkit-transform:scale(1.05) translate(-50%,-50%);transform:scale(1.05) translate(-50%,-50%)}}@keyframes glow{0%,to{color:red;text-shadow:0 0 20px #555;-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}50%{color:#f99;-webkit-transform:scale(1.05) translate(-50%,-50%);transform:scale(1.05) translate(-50%,-50%)}}#snake-container #snake-game .box.snake{align-items:center;background-color:#5f5;border:1px solid #000;border-radius:20%;display:flex;justify-content:center;position:relative}#snake-container #snake-game .box.snake:before{background-color:#000;border-radius:50%;content:"";display:none;height:clamp(5px,1vw,10px);position:absolute;width:clamp(5px,1vw,10px)}#snake-container #snake-game .box[class*=head]{border-radius:30%}#snake-container #snake-game .box[class*=head]:before{display:block}#snake-container #snake-game .box.head-right{border-bottom-right-radius:50%;border-top-right-radius:50%}#snake-container #snake-game .box.head-left{border-bottom-left-radius:50%;border-top-left-radius:50%}#snake-container #snake-game .box.head-up{border-top-left-radius:50%;border-top-right-radius:50%}#snake-container #snake-game .box.head-down{border-bottom-left-radius:50%;border-bottom-right-radius:50%}#snake-container .snake-modal{align-items:center;-webkit-animation:appear-snake .4s ease-in-out;animation:appear-snake .4s ease-in-out;background-color:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.5);cursor:default;display:none;height:clamp(200px,50%,400px);justify-content:center;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:clamp(300px,50%,500px)}#snake-container .snake-modal.active{display:flex}#snake-container .snake-modal #snake-game-over{align-items:center;background-color:#fff;border-radius:10px;color:#4188de;display:none;flex-direction:column;font-size:30px;gap:20px;height:100%;justify-content:center;width:100%}#snake-container .snake-modal #snake-game-over button{background-color:#4188de;border-radius:10px;color:#fff;cursor:pointer;font-size:20px;min-width:100px;padding:10px}#snake-container .snake-modal #snake-game-over button:hover{background-color:#0d74f3}#snake-container .snake-modal #snake-game-over h4{color:#ff6453;font-size:25px}#snake-container .snake-modal .start-game{align-items:center;border-radius:10px;color:#4188de;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;width:100%}#snake-container .snake-modal .start-game>h1{font-size:clamp(2rem,2.5vw,3rem);text-shadow:1px -1px 0 #111,1px 1px 0 #111}#snake-container .snake-modal .start-game .choose-difficulty{align-items:center;color:#ff6453;display:flex;gap:clamp(1.5rem,2vw,3rem);justify-content:center;text-transform:uppercase}#snake-container .snake-modal .start-game .choose-difficulty button{background-color:#fff;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.7);color:#000;cursor:pointer;font-size:clamp(1rem,1.2vw,2rem);padding:.5rem 1rem;transition:all .3s ease-in-out}#snake-container .snake-modal .start-game .choose-difficulty button.selected{background-color:#0d74f3;color:#fff;-webkit-transform:scale(1.1);transform:scale(1.1)}#snake-container .snake-modal .start-game .choose-difficulty button:hover{background-color:#0859bc;color:#fff;-webkit-transform:scale(1.1);transform:scale(1.1)}#snake-container .snake-modal .start-game p{color:#4188de;font-size:clamp(1rem,1.5vw,2rem);margin-top:-20px;text-shadow:-1px -1px 0 #333}#snake-container .snake-modal .start-game p img{height:50px;position:relative;top:20px;width:50px}#snake-container .snake-modal .start-game #start-btn-snake{align-items:center;background-color:#3d85de;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.7);color:#fff;cursor:pointer;display:flex;font-size:clamp(1rem,1.5vw,2rem);justify-content:center;padding:.5rem 1rem;transition:all .2s ease-in-out}#snake-container .snake-modal .start-game #start-btn-snake:hover{background-color:#116ad7;-webkit-transform:scale(1.05);transform:scale(1.05)}#snake-container .snake-modal.game-over{height:200px;width:400px}#snake-container .snake-modal.game-over .start-game{display:none}#snake-container .snake-modal.game-over #snake-game-over{display:flex}#snake-container .snake-modal.game-over #snake-game-over h2{text-shadow:-1px -1px 0 #111,-1px 1px 0 #111}#snake-container .snake-modal.game-over #snake-game-over button{transition:all .2s ease-in-out}@-webkit-keyframes appear-snake{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}to{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@keyframes appear-snake{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0)}to{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}}@media screen and (max-width:768px){#snake-container .snake-modal{height:40%;width:70%}}@media screen and (max-width:500px){#snake-container .snake-modal{width:90%}#snake-container .snake-modal .start-game h1{font-size:clamp(1rem,8vw,2rem)}#snake-container .snake-modal .start-game p{font-size:clamp(.6rem,5vw,1.5rem)}#snake-container .snake-modal .start-game .choose-difficulty button{font-size:clamp(.6rem,4vw,1.2rem)}#snake-container .snake-modal #snake-game-over h2{font-size:clamp(1rem,8vw,2rem)}#snake-container .snake-modal #snake-game-over h4{font-size:clamp(.8rem,6vw,1.5rem)}#snake-container .snake-modal #snake-game-over button{font-size:clamp(.6rem,4vw,1.2rem);min-width:70px}#snake-container .snake-modal.game-over{width:90%}}#snake-container .score{align-items:center;display:flex;font-size:clamp(1rem,1.8vw,4rem);font-weight:700;gap:20px;justify-content:center}#snake-container .score #score{color:#f55;font-size:clamp(1.5rem,2.5vw,5rem)}#pong-game{align-items:center;background-color:#4188de;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:relative;top:0;transition:all .3s ease-in-out;transition-property:width,height,left,top;width:100%}#pong-game.active{left:-100%;top:-100%}#pong-game.active>i{color:#fff}#pong-game.active>i:hover{color:#aaa}#pong-game #start-pong{background:transparent;border:1px solid #ccc;border-radius:clamp(2px,.3vw,10px);box-shadow:0 0 10px rgba(0,0,0,.5);color:#fff;cursor:pointer;font:1.7rem/1.5 sans-serif;font-size:clamp(1rem,1.8vw,4rem);left:50%;padding:clamp(5px,.6vw,20px) clamp(15px,1.8vw,60px);position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .3s ease-in-out;z-index:10}#pong-game #start-pong:hover{background:#fff;color:#000}#pong-game #boards{--height:150px;--width:30px;align-items:center;display:flex;display:none;inset:0;justify-content:center;position:absolute}#pong-game #boards .computer,#pong-game #boards .user{border:clamp(3px,.3vw,10px) dashed #fff;height:100%;width:100%}#pong-game #boards #computer-board,#pong-game #boards #user-board{background:#fff;border:1px solid grey;border-radius:calc(var(--width)/2);box-shadow:0 0 8px 2px rgba(0,0,0,.5);height:var(--height);left:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:var(--width)}#pong-game #boards #computer-board{background-color:#000;box-shadow:0 0 8px 2px hsla(0,0%,100%,.5);left:100%;top:50%;-webkit-transform:translate(calc(var(--width)*-1),-50%);transform:translate(calc(var(--width)*-1),-50%);transition:top 1s ease-in-out}#pong-game #score{align-items:center;background-color:#4188de;border:clamp(1px,.17vw,4px) solid #fff;color:#fff;display:none;flex-direction:column;font-family:sans-serif;font-size:clamp(.6rem,1.2vw,2.4rem);gap:clamp(.5rem,1.2vw,2.5rem);justify-content:center;left:50%;padding:clamp(.5rem,1.2vw,2.5rem);position:absolute;top:10px;-webkit-transform:translate(-50%);transform:translate(-50%);transition:all .5s ease-in-out;z-index:2}#pong-game #score>:nth-child(2){font-size:clamp(1rem,2vw,4rem);text-align:center}#pong-game #score.game-over{box-shadow:0 0 10px hsla(0,0%,100%,.5);font-size:clamp(1rem,1.7vw,4rem);padding:clamp(3rem,6vw,10rem);top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}#pong-game #score.game-over .play-again-pong{display:block}#pong-game #score .play-again-pong{background:#4188de;border:2px solid #ccc;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.5);color:#fff;cursor:pointer;display:none;font:20px/1.5 sans-serif;font-size:clamp(.8rem,1.5vw,3rem);padding:clamp(5px,.6vw,20px) clamp(15px,1.8vw,60px);transition:all .3s ease-in-out;z-index:10}#pong-game #score .play-again-pong:hover{background:#fff;color:#000}#pacman-game{align-items:center;background-color:#fff;display:flex;flex-direction:center;height:100%;justify-content:center;left:0;position:relative;top:0;transition:all .3s ease-in-out;transition-property:width,height,left,top;width:100%}#pacman-game.active{align-items:flex-end;left:0;top:-100%}#pacman-game .game{background-color:#000;border:1px solid red;display:none;height:90vh;width:100%}#pacman-game .game .pac-map{height:100%;position:relative;width:100%}#pacman-game .game .pac-map .pac-row{align-items:center;display:flex;justify-content:center}#pacman-game .game .pac-map .pac-col{height:50px;width:50px}#pacman-game .game .pac-map .pac-col.dot{position:relative}#pacman-game .game .pac-map .pac-col.dot:before{background-color:#eee;border-radius:2px;content:"";height:8px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:8px}#pacman-game .game .pac-map .pac-col.wall{border:1px solid #fff}#pacman-game .game .pac-map .pac-col.wall:before{display:none}#pacman-game .game .pac-map .pac{background-color:#ff0;border-radius:50%;height:40px;left:0;position:absolute;top:0;width:40px}#pacman-game .game .pac-map .pac .pac-mouth{-webkit-animation:.2s linear infinite;animation:.2s linear infinite;-webkit-animation-name:hello;animation-name:hello;background-color:#000;content:"";display:inline-block;inset:0;position:absolute}#pacman-game .game .pac-map .pac:after{background-color:#000;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:20%;width:8px}@-webkit-keyframes hello{0%{-webkit-clip-path:polygon(100% 100%,44% 48%,100% 0);clip-path:polygon(100% 100%,44% 48%,100% 0)}50%{-webkit-clip-path:polygon(100% 50%,44% 48%,100% 50%);clip-path:polygon(100% 50%,44% 48%,100% 50%)}to{-webkit-clip-path:polygon(100% 100%,44% 48%,100% 0);clip-path:polygon(100% 100%,44% 48%,100% 0)}}@keyframes hello{0%{-webkit-clip-path:polygon(100% 100%,44% 48%,100% 0);clip-path:polygon(100% 100%,44% 48%,100% 0)}50%{-webkit-clip-path:polygon(100% 50%,44% 48%,100% 50%);clip-path:polygon(100% 50%,44% 48%,100% 50%)}to{-webkit-clip-path:polygon(100% 100%,44% 48%,100% 0);clip-path:polygon(100% 100%,44% 48%,100% 0)}}#pacman-game .game .pac-map .monster{border-top-left-radius:50%;border-top-right-radius:50%;height:50px;left:0;position:absolute;top:0;width:50px}#pacman-game .game .pac-map .monster .eye{background-color:#fff;border-radius:50%;content:"";height:15px;left:20%;position:absolute;top:20%;width:12px}#pacman-game .game .pac-map .monster .eye:nth-of-type(2){left:60%}#pacman-game .game .pac-map .monster .eye .eye-ball{background-color:#000;border-radius:50%;content:"";height:8px;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:8px}#pacman-game .game .pac-map .monster .monster-mouth{-webkit-animation:monster-mouth .3s linear infinite;animation:monster-mouth .3s linear infinite;background-color:#000;-webkit-clip-path:polygon(0 100%,16% 80%,33% 100%,49% 80%,67% 100%,84% 80%,100% 100%);clip-path:polygon(0 100%,16% 80%,33% 100%,49% 80%,67% 100%,84% 80%,100% 100%);content:"";inset:0;position:absolute}@-webkit-keyframes monster-mouth{0%{-webkit-clip-path:polygon(0 100%,16% 80%,33% 100%,49% 80%,67% 100%,84% 80%,100% 100%);clip-path:polygon(0 100%,16% 80%,33% 100%,49% 80%,67% 100%,84% 80%,100% 100%)}to{-webkit-clip-path:polygon(0 100%,12.5% 80%,25% 100%,37.5% 80%,50% 100%,62.5% 80%,75% 100%,87.5% 80%,100% 100%);clip-path:polygon(0 100%,12.5% 80%,25% 100%,37.5% 80%,50% 100%,62.5% 80%,75% 100%,87.5% 80%,100% 100%)}}@keyframes monster-mouth{0%{-webkit-clip-path:polygon(0 100%,16% 80%,33% 100%,49% 80%,67% 100%,84% 80%,100% 100%);clip-path:polygon(0 100%,16% 80%,33% 100%,49% 80%,67% 100%,84% 80%,100% 100%)}to{-webkit-clip-path:polygon(0 100%,12.5% 80%,25% 100%,37.5% 80%,50% 100%,62.5% 80%,75% 100%,87.5% 80%,100% 100%);clip-path:polygon(0 100%,12.5% 80%,25% 100%,37.5% 80%,50% 100%,62.5% 80%,75% 100%,87.5% 80%,100% 100%)}}#pacman-game #extra-data{align-items:center;display:flex;display:none;font-family:sans-serif;font-size:2rem;gap:50px;justify-content:center;left:50%;position:absolute;top:30px;-webkit-transform:translate(-50%);transform:translate(-50%);transition:all .3s ease-in-out}#pacman-game #extra-data #pacman-lives,#pacman-game #extra-data #pacman-lives span{align-items:center;display:flex;gap:10px;justify-content:center}#pacman-game #extra-data #pacman-lives span{color:red;font-size:2rem}#pacman-game #extra-data #pacman-lives span i.break{-webkit-animation:break-heart 1s linear;animation:break-heart 1s linear}@-webkit-keyframes break-heart{0%{-webkit-transform:translate(0);transform:translate(0)}30%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:0;-webkit-transform:translateY(100px);transform:translateY(100px)}}@keyframes break-heart{0%{-webkit-transform:translate(0);transform:translate(0)}30%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:0;-webkit-transform:translateY(100px);transform:translateY(100px)}}#pacman-game #extra-data.game-over{background-color:#000;border:4px solid #fff;border-radius:10px;color:#fff;flex-direction:column;font-size:3rem;font-weight:700;left:50%;padding:4rem;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:100}#pacman-game #extra-data.game-over #pacman-lives{display:none}#pacman-game #extra-data.game-over #play-again-pac{background-color:#000;border:1px solid #fff;color:#fff;cursor:pointer;display:inline-block;font-size:2rem;padding:10px 20px;transition:all .3s ease-in-out}#pacman-game #extra-data.game-over #play-again-pac:hover{background-color:#fff;color:#000}#pacman-game #extra-data #play-again-pac{display:none}#pacman-game .start-btn{background-color:#000;border:1px solid #000;border-radius:10px;color:#fff;cursor:pointer;font:1.7rem Roboto,sans-serif;left:50%;padding:15px 30px;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:all .3s ease-in-out}#pacman-game .start-btn:hover{background-color:#fff;color:#000}
/*# sourceMappingURL=main.44b64e06.css.map*/