.nav{font-size:x-large;color:#828282;width:100%;text-align:center;padding:20px 0;border-bottom:solid 1px;border-color:#828282;letter-spacing:5px}.tile{display:flex;width:2em;height:2em;border:solid 1px;border-color:#828282;align-items:center;justify-content:center}.row{display:flex;gap:6px;margin:6px}.app{font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;margin:auto;color:#fff;width:100%;height:100vh;font-size:25px;background-color:#121213;display:flex;flex-direction:column}.board{margin:10px}.board-div,.keyboard-div,.keyboard-row{display:flex;justify-content:center}button{width:40px;height:60px;margin:3px;font-size:20px;align-items:center;border-radius:3px;border:none;background-color:#828282;color:#fff}.key-wide{font-size:15px;width:80px}@media screen and (max-width:500px){.app{font-size:20px}button{width:28px;height:32px;margin:2px;font-size:18px;align-items:center;border-radius:2px;border:none}.key-wide{font-size:12px;width:55px}}.tile.correct{background:#6aaa64;border-color:#6aaa64;color:#fff}.tile.present{background:#c9b458;border-color:#c9b458;color:#fff}.tile.absent{background:#3a3a3c;border-color:#3a3a3c;color:#fff}.key.correct{background:#6aaa64;color:#fff}.key.present{background:#c9b458;color:#fff}.key.absent{background:#3a3a3c;color:#fff}.key:focus{outline:none}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#2d2d2d99;z-index:40}.popup{background:#3d3d3ddb;color:#f8fafc;padding:24px 28px;border-radius:12px;text-align:center;min-width:260px;box-shadow:0 10px 30px #3e3f4499}.popup h2{margin:0 0 8px;font-size:20px}.popup .small{margin:8px 0 16px;color:#d1d5db}.restart{background:#767a80ec;border:none;color:#fff;width:9em;border-radius:8px;font-weight:700;cursor:pointer}.restart:hover{filter:brightness(1.06)}.msgpopup{background:#68686892;border-radius:10px;text-align:center;padding:10px 20px;line-height:2}.message{font-size:14px;color:#fff}html,body{margin:0;padding:0}