body{font-family:Arial,sans-serif;margin:0;padding:0;overflow:hidden}h1{font-size:3.5em;position:fixed;top:auto;left:50%;transform:translate(-50%);z-index:101;color:#fff}h2{font-size:3em}#root{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-image:url(https://www.bhmpics.com/downloads/background-hd-white-Wallpapers/3.white-abstract-wallpaper_23-2148830027.jpg);background-size:cover;background-position:center}.container{max-width:800px;width:100%;padding:2rem;text-align:center;background-color:#fff;box-shadow:0 0 10px #0000001a}.navbar{display:flex;justify-content:center;align-items:center;padding:10px 20px;position:fixed;top:0;left:0;width:100%;z-index:100}.nav-button{color:#000;padding:10px 20px;text-decoration:none;border-radius:5px;transition:background-color .3s ease;margin-left:10px}.nav-button:hover{background-color:#0056b3;color:#fff}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:none}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.row{text-align:center;display:flex;justify-content:center}.row>div{display:block;width:60px;height:60px;border:1px solid #bbb;margin:4px;text-align:center;line-height:60px;text-transform:uppercase;font-weight:700;font-size:2.5em}.row>div.green{background:#5ac85a;border-color:#5ac85a}.row>div.grey{background:#a1a1a1;border-color:#a1a1a1}.row>div.yellow{background:#e2cc68;border-color:#e2cc68}.row>div.green{--background: #5ac85a;--border-color: #5ac85a;animation:flip .5s ease forwards}.row>div.grey{--background: #a1a1a1;--border-color: #a1a1a1;animation:flip .6s ease forwards}.row>div.yellow{--background: #e2cc68;--border-color: #e2cc68;animation:flip .5s ease forwards}.row>div:nth-child(2){animation-delay:.2s}.row>div:nth-child(3){animation-delay:.4s}.row>div:nth-child(4){animation-delay:.6s}.row>div:nth-child(5){animation-delay:.8s}@keyframes flip{0%{transform:rotateX(0);background:#fff;border-color:#333}45%{transform:rotateX(90deg);background:#fff;border-color:#333}55%{transform:rotateX(90deg);background:var(--background);border-color:var(--border-color)}to{transform:rotateX(0);background:var(--background);border-color:var(--border-color);color:#eee}}.row.current>div.filled{animation:bounce .2s ease-in-out forwards}@keyframes bounce{0%{transform:scale(1);border-color:#ddd}50%{transform:scale(1.2)}to{transform:scale(1);border-color:#333}}.keypad{max-width:500px;margin:20px auto}.keypad>div{margin:5px;width:40px;height:50px;background:#eee;display:inline-block;border-radius:6px;line-height:50px}.keypad>div.green{background:#5ac85a;color:#fff;transition:all .3s ease-in}.keypad>div.yellow{background:#e2cc68;color:#fff;transition:all .3s ease-in}.keypad>div.grey{background:#a1a1a1;color:#fff;transition:all .3s ease-in}.modal{background:#ffffffb3;position:fixed;width:100%;height:100%;top:0;left:0}.modal div{max-width:480px;background:#fff;padding:40px;border-radius:10px;margin:10% auto;box-shadow:2px 2px 10px #0000004d}.modal .solution{border:1px solid MediumSeaGreen;color:#fff;background-color:#3cb371;font-weight:700;font-size:2.5rem;text-transform:uppercase;letter-spacing:1px}.GameBoard{position:relative;border:2px solid #000;margin:0 auto;overflow:hidden}.SnakePart{position:absolute;background-color:#00f}.Apple{position:absolute;background-color:red}.game-over{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-family:Arial,sans-serif}.game-over button{padding:10px 20px;margin-top:20px;font-size:16px;cursor:pointer;background-color:#007bff;color:#fff;border:none;border-radius:5px}.game-over button:hover{background-color:#0056b3}.Score{position:absolute;top:-30px;right:5px;font-size:20px;color:#000}body{text-align:center;font-size:1em;font-family:verdana;margin:0}h1{font-size:1.2em;padding:20px 0;border-bottom:1px solid #eee;margin:0 0 30px;color:#333}main h2{color:#333;font-size:1em}