@import"https://fonts.googleapis.com/css2?family=Agbalumo&display=swap";#game-canvas{display:block;outline:10px solid #61a3ba;margin-inline:auto;margin-block:1.5rem;background-color:#fff}#snakes-game-container{background-color:#ffd;min-height:100vh;cursor:pointer;overflow:hidden}#game-title{text-align:center;background-color:#a2c579;color:#222;font-size:2.5rem;padding-block:1.5rem;font-family:Agbalumo,Red Hat Display,sans-serif}.high-score{background-color:#d2de32;color:#000;font-variant:small-caps;text-align:center;font-size:1.5rem;font-weight:900;width:fit-content;margin-inline:auto;margin-top:1rem;padding:.2rem 1rem;border-radius:1rem}.score{text-align:center;font-size:2em;font-weight:900;margin-block:1rem;width:fit-content;margin-inline:auto}.score>span:first-child{background-color:#61a3ba;color:#fff;padding-block:.5rem;padding-inline:1rem .3rem;border-top-left-radius:1rem;border-bottom-left-radius:1rem}.score>span:last-child{background-color:#d2de32;color:#222;padding-block:.5rem;padding-inline:.8rem 1rem;border-top-right-radius:1rem;border-bottom-right-radius:1rem}.new-game-hint{text-align:center;color:#000;font-weight:900;font-size:1.5rem;animation:teeter 2s linear infinite;margin-top:2rem}@keyframes teeter{0%,50%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.pause-hint{text-align:center;font-style:italic;color:#333}.pause-hint kbd{display:inline-block;padding:.2rem .5rem;background-color:#333;color:salmon;border-radius:.5rem}#game-over-modal-container{position:fixed;top:0;right:0;bottom:0;left:0;outline:1px solid red;background-color:#a2c579;cursor:pointer}#game-over-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;width:700px;height:300px;display:grid;place-content:center;text-align:center;border-radius:10px;box-shadow:0 0 10px 5px #000,0 0 100px 10px #000}#game-over-modal>h2{font-size:4em}.final-score{font-size:1.3em}.final-score>span{font-weight:900;font-size:2rem}.congratulate{margin-block:.5rem;font-size:1.5rem;background-color:#61a3ba;color:#fff;padding-inline:.5rem;font-weight:900;border-radius:1rem}#paused-modal-container{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#1a1a1ab3;cursor:pointer}#paused-modal{width:500px;height:300px;background-color:#61a3ba;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-content:center;border-radius:1rem;text-align:center}#paused-modal>h2{font-size:3rem}#paused-modal>.click-dir{color:#fff}.click-dir{color:#4d4d4d;font-style:italic;font-size:1.3rem}:root{--base-font-family: Arial, Helvetica, sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{line-height:1.5;min-height:100vh}#root{isolation:isolate;min-height:100vh;font-family:var(--base-font-family)}