@charset "UTF-8";:root{--color-wall: rgb(28, 28, 139);--game-grid-min-width-small: 336px;--game-grid-max-width-small: 336px;--game-grid-min-width-large: 616px;--game-grid-max-width-large: 616px;--game-grid-div-height-small: 10px;--game-grid-div-width-small: 10px;--game-grid-div-height-large: 20px;--game-grid-div-width-large: 20px;--ctn-section-1-full-screen: 100px;--ctn-section-3-full-screen: 100px;--font-size-small: .5rem;--font-size-large: 1rem}#game-grid{display:flex;flex-wrap:wrap;min-width:var(--game-grid-min-width-small);max-width:var(--game-grid-max-width-small);border:solid #111 3px;color:orange;margin:0 auto}#game-grid div{height:var(--game-grid-div-height-small);width:var(--game-grid-div-width-small)}.game-board-square{border:1px solid black;height:var(--game-grid-div-height-small);width:var(--game-grid-div-width-small)}.wall{background-color:var(--color-wall);border-color:var(--color-wall)!important}.level-completed{animation:levelCompleted .5s 4 forwards}@keyframes levelCompleted{0%{--color-wall: lightgray}to{--color-wall: rgb(28,28,139)}}.powerPellet{background-color:#000;border-radius:50%;transform:scale(.7);animation:powerPelletBlink .3s infinite}@keyframes powerPelletBlink{0%{background:#f5f5f5}to{background:#000}}.pellet{background-color:#f5f5f5;transform:scale(.2)}.lairWall{background-color:#fff;transform:scaleY(.3)}.lairText{text-align:center}.bonusFruit:after{content:"🍒"}.roundTopLeft{border-top-left-radius:50%;background-color:var(--color-wall)}.roundTopRight{border-top-right-radius:50%;background-color:var(--color-wall)}.roundBottomLeft{border-bottom-left-radius:50%;background-color:var(--color-wall)}.roundBottomRight{border-bottom-right-radius:50%;background-color:var(--color-wall)}body{background-color:#333;margin:0;padding:0;box-sizing:border-box}.ghost-red{background-color:#ff0c0e}.ghost-pink{background-color:#ffa5a6}.ghost-blue{background-color:#93ffff}.ghost-orange{background-color:#fd7b0d}.ghost-small{border:.05px solid white;position:relative;width:10px;height:10px;border-top-left-radius:50%;border-top-right-radius:50%;clip-path:polygon(50% 0%,100% 0,100% 100%,81% 91%,66% 100%,49% 91%,31% 100%,15% 91%,0 100%,0 0)}.ghost-small:before{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:5px;margin:0 0 0 2.5px}.ghost-small:after{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:5px;margin:0 0 0 5px}.ghost-look-up-small{border:.05px solid white;position:relative;width:10px;height:10px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-up-small:before{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:6.25px;margin:0 0 0 2px}.ghost-look-up-small:after{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:6.25px;margin:0 0 0 5px}.ghost-look-down-small{border:.05px solid white;position:relative;width:10px;height:10px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-down-small:before{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:3.75px;margin:0 0 0 2.5px}.ghost-look-down-small:after{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:3.75px;margin:0 0 0 5px}.ghost-look-left-small{border:.05px solid white;position:relative;width:10px;height:10px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-left-small:before{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:5px;margin:0 0 0 1.25px}.ghost-look-left-small:after{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:5px;margin:0 0 0 3.75px}.ghost-look-right-small{border:.05px solid white;position:relative;width:10px;height:10px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-right-small:before{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:5px;margin:0 0 0 3.75px}.ghost-look-right-small:after{border:.6px solid white;border-radius:50%;background-color:#000;content:"";width:1.5px;height:1.5px;position:absolute;bottom:5px;margin:0 0 0 6.25px}.ghost-large{border:.1px solid white;position:relative;width:20px;height:20px;border-top-left-radius:50%;border-top-right-radius:50%;clip-path:polygon(50% 0%,100% 0,100% 100%,81% 91%,66% 100%,49% 91%,31% 100%,15% 91%,0 100%,0 0)}.ghost-large:before{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:10px;margin:0 0 0 3px}.ghost-large:after{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:10px;margin:0 0 0 13px}.ghost-look-up-large{border:.1px solid white;position:relative;width:20px;height:20px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-up-large:before{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:12.5px;margin:0 0 0 5px}.ghost-look-up-large:after{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:12.5px;margin:0 0 0 10px}.ghost-look-down-large{border:.1px solid white;position:relative;width:20px;height:20px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-down-large:before{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:7.5px;margin:0 0 0 5px}.ghost-look-down-large:after{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:7.5px;margin:0 0 0 10px}.ghost-look-left-large{border:.1px solid white;position:relative;width:20px;height:20px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-left-large:before{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:10px;margin:0 0 0 2.5px}.ghost-look-left-large:after{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:10px;margin:0 0 0 7.5px}.ghost-look-right-large{border:.1px solid white;position:relative;width:20px;height:20px;border-top-left-radius:50%;border-top-right-radius:50%}.ghost-look-right-large:before{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:10px;margin:0 0 0 7.5px}.ghost-look-right-large:after{border:1.2px solid white;border-radius:50%;background-color:#000;content:"";width:3px;height:3px;position:absolute;bottom:10px;margin:0 0 0 13px}.scared{background-color:#00f}.scared:before,.scared:after{background-color:#fff}.scaredBlink{animation:scaredBlink .01s 1}@keyframes scaredBlink{0%{background:#f5f5f5}to{background:#00f}}#ctn-pac-man-lives{display:flex}.pac-man-lives{border:1px solid black;background-color:orange;border-radius:50%;height:var(--game-grid-div-height-small);width:var(--game-grid-div-width-small);clip-path:polygon(100% 0,100% 0,50% 50%,50% 50%,100% 100%,100% 100%,0 100%,0 50%,0 0)}.pacMan{background-color:orange;border-radius:50%}.pacMan-move-left{animation:pacManMoveLeft .3s infinite}.pacMan-move-right{animation:pacManMoveRight .3s infinite}.pacMan-move-up{animation:pacManMoveUp .3s infinite}.pacMan-move-down{animation:pacManMoveDown .3s infinite}.pacMan-move-stop{animation:pacManMoveStop .3s infinite}.pacMan-move-die{animation:pacManMoveDie 1.5s forwards}.pacMan-explode{border:1px dotted orange;border-radius:50%}@keyframes pacManMoveLeft{0%{clip-path:polygon(0 0,100% 0,100% 30%,100% 70%,100% 100%,0 100%,61% 53%,61% 53%)}}@keyframes pacManMoveRight{0%{clip-path:polygon(100% 0,100% 0,49% 53%,49% 52%,100% 100%,100% 100%,0 100%,0 50%,0 0)}}@keyframes pacManMoveUp{0%{clip-path:polygon(100% 0,100% 0,100% 51%,100% 55%,100% 100%,100% 100%,0 100%,1% 0,52% 59%)}}@keyframes pacManMoveDown{0%{clip-path:polygon(0 0,100% 0,100% 30%,100% 100%,51% 45%,0 100%,0% 30%)}}@keyframes pacManMoveStop{}@keyframes pacManMoveDie{0%{clip-path:polygon(51% 43%,100% 43%,100% 43%,100% 100%,68% 100%,32% 100%,0 100%,0% 43%,0 43%)}25%{clip-path:polygon(51% 43%,100% 70%,100% 70%,100% 100%,68% 100%,32% 100%,0 100%,0% 43%,0 70%)}50%{clip-path:polygon(51% 43%,100% 100%,100% 100%,100% 100%,68% 100%,32% 100%,0 100%,0% 43%,0 100%)}75%{clip-path:polygon(51% 43%,68% 100%,67% 100%,67% 100%,68% 100%,32% 100%,0 100%,33% 100%,32% 100%)}to{clip-path:polygon(51% 43%,50% 100%,50% 100%,50% 100%,52% 100%,51% 100%,51% 100%,52% 100%,50% 100%)}}body{box-sizing:border-box;margin:0;padding:0;background-color:#000;font-family:Fredoka One,cursive;font-size:var(--font-size-small);display:flex;flex-direction:column;justify-content:center;align-items:center}#ctn-game{display:flex;justify-content:center;color:#fff;width:100vw}#instructions{order:1;border:5px solid rgb(150,0,0);background-color:#333;border-top-left-radius:50px;border-bottom-left-radius:50px;width:20%;min-width:150px;padding:25px;display:block;font-size:2em}#instructions #instruct{padding:10px 0;margin-top:25px}#instructions .fa-male{border:2px solid whitesmoke;width:15px;height:20px;border-radius:50px;padding-left:8px;padding-top:3px}#section-middle{order:2;display:flex;flex-direction:column;justify-content:center;align-items:center}#credits{border:5px solid rgb(150,0,0);background-color:#333;border-top-right-radius:50px;border-bottom-right-radius:50px;width:20%;min-width:150px;padding:25px;order:3;display:block;font-size:2em}@media only screen and (max-width: 600px){body{flex-direction:column}#marquee{display:block}#ctn-section-1,#ctn-section-2,#ctn-section-3{margin:0}}#ctn-section-1,#ctn-section-2,#ctn-section-3{margin:0 25px}#ctn-section-3 #control-board-upper{position:absolute;left:0}h1{margin:0}#title{text-align:center;display:flex;justify-content:center}#marquee-border{display:flex;width:var(--game-grid-min-width-small);flex-direction:column;align-items:center}#marquee{color:orange;text-shadow:1px 1px 1px rgba(0,0,0,.7);background:#f5f5f5;font-size:25px;width:100%;height:60px}.toggle-text{font-size:10px;padding-left:10px}.toggle{border:1px solid #777;background-color:#333;color:#f5f5f5;display:flex;align-items:center;margin:10px;font-size:10px;width:250px;height:30px;border-radius:25px}.toggle p{margin:0 8px}.toggle-btn{display:flex;align-items:center;height:30px;width:60px;height:15px;width:30px;background-color:#000;border-radius:30px;padding:5px;margin:0 10px}.toggle-btn:hover{cursor:pointer}.toggle-btn:after{position:absolute;content:". . . .";margin-bottom:5px;margin-left:5px}.inner-circle{width:30px;height:30px;width:15px;height:15px;border-radius:50%;background-color:#fff;transition:all .25s;background-position:center;background-repeat:no-repeat;background-size:cover;background-color:orange!important;z-index:1}.inner-circle-pac-man-right{clip-path:polygon(100% 0,100% 0,49% 53%,49% 52%,100% 100%,100% 100%,0 100%,0 50%,0 0)}.inner-circle-pac-man-left{clip-path:polygon(0 0,100% 0,100% 30%,100% 70%,100% 100%,0 100%,61% 53%,61% 53%)}.toggle-btn.toggled>.inner-circle{transform:translate(15px);background-color:#fff;background-position:center;background-repeat:no-repeat;background-size:cover}.unselected{opacity:.25}.score-top{color:#fff;display:flex;justify-content:space-around;min-width:var(--game-grid-min-width-small);max-width:var(--game-grid-max-width-small);margin:0 auto}.ctn-level-bottom{color:#000;color:inherit;display:flex;justify-content:space-between;min-width:var(--game-grid-min-width-small);max-width:var(--game-grid-max-width-small);margin:0 auto}#level-bottom{color:#000;display:flex;flex-direction:row-reverse;height:20px}#controller{color:#fff;min-width:var(--game-grid-min-width-small);max-width:var(--game-grid-max-width-small);margin:0 auto}#control-board{color:#f5f5f5;font-family:Orbitron,sans-serif;font-family:Monoton,cursive;font-family:Fascinate Inline,cursive;min-width:400px;max-width:625px;display:flex;flex-direction:column}#control-board-upper{width:98%;min-width:400px;display:flex;justify-content:space-evenly;align-items:center;border:5px solid whitesmoke;border-radius:50px;height:125px;background-image:url(public/images/pexels-francesco-ungaro-998641.jpg);background-position:center;background-repeat:no-repeat;background-size:cover}#control-board-upper #control-left-logo{background-image:url(/images/LaRocCade-01.png);height:75px;background-position:center;background-repeat:no-repeat;background-size:cover;width:140px;display:flex;flex-direction:column;grid-area:left-logo;font-size:1.5rem;font-weight:bolder}#control-board-upper #control-left-logo-games{font-size:2rem}#control-board-upper #control-middle-joy-stick{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;font-size:2rem;grid-gap:0 10px;margin-right:50px}#control-board-upper #control-middle-joy-stick #joystick-up,#control-board-upper #control-middle-joy-stick #joystick-down,#control-board-upper #control-middle-joy-stick #joystick-left,#control-board-upper #control-middle-joy-stick #joystick-right{border:3px solid whitesmoke;padding:5px 10px;border-radius:100%;font-size:1rem}#control-board-upper #control-right{display:flex}#control-board-upper #control-board-button-1,#control-board-upper #control-board-button-2{border:3px solid whitesmoke;margin:0 10px;padding:5px 12px;border-radius:100%}#control-board-upper #control-board-button-2{display:block}#control-board-upper #control-board-button-pause{border:3px solid whitesmoke;margin:0 10px;padding:5px 8px;border-radius:100%}#control-board-upper #control-middle-space-bar{position:relative;bottom:5px}@media only screen and (max-width: 600px){#ctn-game{margin-top:50px}#control-board,#control-board-upper{display:flex;align-self:center;max-width:350px;min-width:350px}#control-board #control-board-button-1,#control-board-upper #control-board-button-1{height:15px;font-size:12px}#control-left-logo{font-size:1rem!important;width:90px!important;height:50px!important}#control-right{margin-left:-50px}#ctn-section-3 #control-board-upper{position:relative;width:var("--game-grid-max-width-small")}.toggle,#instructions,#credits{display:none}}.blink{animation:blink 1s steps(1,end) infinite}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}