*{font-family:system-ui}body{background:#fff;margin:0;font-family:system-ui}.navbar{}.navbar .title{text-align:center;color:#000;min-width:130px}.svg-logo{width:130px;margin:1.5em;margin-bottom:2em}.container{display:grid;grid-template-columns:1fr auto 1fr;gap:2em;max-width:1140px;margin:0 auto;padding-left:2em;padding-right:2em}.left-col{min-width:200px}.right-col{min-width:200px}.game-history{list-style-type:none;padding:0;font-size:14px}.game-history li{display:grid;grid-template-columns:1fr 4fr 2fr;gap:0;grid-auto-flow:column;vertical-align:middle;border-bottom:1px solid #d3d3d3;margin:.5em 0;padding:.5em;line-height:1em}.game-history li:first-child{border-top:1px solid #d3d3d3}.game-result-icon{width:10px;height:10px;background-color:gray;border-radius:5px;display:inline-block}.game-result-icon.win{background-color:#79ca43}.game-result-icon.loss{background-color:#ca4345}.game-history .game-date{color:gray}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.1)}#modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;min-width:300px;max-width:20%;box-shadow:rgba(0,0,0,.1)0 5px 10px 5px;position:relative;opacity:0;transition:opacity .8s ease}#modal-content.open{opacity:1}#modal-content>.heading{font-size:24px;text-align:center}#modal-content>.heading:first-child{margin-top:0}.close{color:#aaa;float:right;font-size:28px;font-weight:700;line-height:.35em;position:absolute;right:.35em;top:.35em}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.center-col{width:300px;margin:0 auto}.center-column>h1{text-align:center}.content{margin-top:1em;margin-bottom:1em}.center{display:flex;justify-content:center;margin:1em 0}.intro{display:none;border:2px solid #d0d0d0;background:#fff;padding:1em;border-radius:8px}.intro>.small-heading{margin-top:0;font-weight:700;font-size:1.2em}.intro>*{margin:1em 0}.btn{padding:.5em 1em;font-size:1.2em;transition:.2s}.btn2{padding:.4em .8em;font-size:1.2em;color:#fff;background:#43aaca;border-radius:8px;border:1px solid #00779c;transition:.2s}.btn2:hover{background:#4dbcde;border-color:#00779c}.btn2:active{background:#3899b7;transform:scale(.92)}.navbar .right-col{display:flex;align-items:center;justify-content:right}#post-game-zone{margin:2em 1em}@keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes shrink{from{transform:scale(1.1)}to{transform:none}}.notification{padding:1em;border-radius:8px;animation:fadein shrink 2s}.notification.success{background:#d2eeff;border:2px solid hsl(203deg 100% 76%);animation:fadein 2s}.notification.fail{background:#ffd2d2;border:2px solid hsl(0deg 100% 76%);animation:fadein 2s}.fadeout{opacity:0}#board{width:300px;margin:0 auto}.row{display:flex;flex-wrap:nowrap;justify-content:space-evenly;align-content:space-between;margin:.3em 0}.input-row{}.tile{background:#fff;width:54px;height:54px;flex:none;text-align:center;line-height:50px;column-gap:2em;border-radius:8px;border:2px solid #000;font-size:26px;font-weight:700;box-sizing:border-box;cursor:default;user-select:none;transition:all .2s ease-in-out}.flip{background:red;border-color:red;transform:rotateY(180deg)}.submitted-word>.tile{color:#fff;background:#a9a9a9;border-color:#a9a9a9}.correct-letter,.submitted-word>.correct-letter,.key.correct-letter{color:#fff;background:orange;border-color:#e67e00}.correct-position,.submitted-word>.correct-position,.key.correct-position{color:#fff;background:#79ca43;border-color:#5b9f2d}.submitted-word>.tile.correct-letter{}.submitted-word>.tile.correct-position{}@keyframes border-dance{0%{background-position:0 0,100% 100%,0 100%,100% 0}100%{background-position:15px 0,right 15px bottom,left bottom 15px,100% 15px}}.tile.input-selected{background-image:linear-gradient(90deg,black 50%,transparent 50%),linear-gradient(90deg,black 50%,transparent 50%),linear-gradient(0deg,black 50%,transparent 50%),linear-gradient(0deg,black 50%,transparent 50%);background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:15px 2px,15px 2px,2px 15px,2px 15px;background-position:0 0,100% 100%,0 100%,100% 0;animation:border-dance 1s infinite linear}.keyboard-container{display:flex;flex-direction:column;align-items:center}.keyboard-row{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;flex-direction:row}.key{display:flex;align-items:center;justify-content:center;background-color:#fff;color:#000;font-size:24px;border:1px solid #000;height:40px;min-width:40px;margin:5px;cursor:pointer;border-radius:5px;text-transform:capitalize;box-sizing:border-box;transition:.2s}.key:active{transform:scale(.92)}.key.no-match{background:#a9a9a9;border-color:#a9a9a9;color:#fff}.key:hover{border-color:#000}.space-bar{width:180px}.key:hover{background-color:#000;color:#fff}.key[data-key=delete]{width:80px}@media(max-width:800px){.svg-logo{width:100px;margin-left:0}.content{flex-direction:column}.left-col,.right-col{}.navbar .title{text-align:inherit}.navbar .container{justify-content:space-between;padding:0;margin:0 1em;grid-template-columns:1fr 1fr}.navbar .left-col{display:none}.right-col{}.notification{text-align:center}#modal-content{max-width:50%}.container{grid-template-columns:1fr}}@media(max-width:500px){.key[data-key=delete]{width:auto}.key{min-width:29px;margin:.1em;font-size:20px}}@media only screen and (min-device-width:375px) and (max-device-width:400px) and (-webkit-min-device-pixel-ratio:3) and (orientation:portrait){.keyboard-container{max-width:393px}.key{min-width:30px;margin:.1em;font-size:16px;padding:.2em .5em}}@media only screen and (min-device-width:375px) and (max-device-width:812px) and (-webkit-min-device-pixel-ratio:3) and (orientation:landscape){}