*{box-sizing:border-box}body,html{margin:0;padding:0;overflow-x:hidden}.gameContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:.7rem;margin:0 auto;background-color:#202020}.gameHeader{display:flex;align-self:flex-end}.gameHeader p{margin-right:1rem}.gameHeader button{padding:.4rem .7rem;background-color:gray;color:#fff;border:none;border-radius:.4rem;font-size:.8rem;cursor:pointer}h1{text-align:center}.tile{display:flex;width:4rem;height:4rem;justify-content:center;align-items:center;border:.15rem solid gray;font-size:3rem;text-transform:uppercase;margin:.2rem;background-color:#000;color:#fff}.tile.correct{--background-color: green;--border-color: rgb(0, 75, 0);animation:flip .6s ease forwards}.tile.wrongSpot{--background-color: gold;--border-color: rgb(185, 158, 2);animation:flip .6s ease forwards}.tile.incorrect{--background-color: gray;--border-color: rgb(78, 78, 78);animation:flip .6s ease forwards}@keyframes flip{0%{transform:rotateX(0);background-color:#000;border-color:gray}50%{transform:rotateX(90deg);background-color:#000;border-color:gray}51%{transform:rotateX(90deg);background-color:var(--background-color);border-color:var(--border-color)}to{transform:rotateX(0);background-color:var(--background-color);border-color:var(--border-color)}}.row{display:flex;flex-direction:row}.grid{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.key{height:3rem;width:2.5rem;margin:.2rem;border-radius:.3rem;align-items:center;color:#fff;background-color:gray;transition:background-color .2s ease}.key.correct{background-color:green}.key.wrongSpot{background-color:gold}.key.incorrect{background-color:#3c3c3c}.key-large{width:4rem}.keyboardRow{display:flex;justify-content:center}.keyboard{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:30rem;margin-top:3rem}.modalBackground{width:100vw;height:100vh;background-color:#141414b3;position:fixed;display:flex;justify-content:center;align-items:center}.modalContainer{width:50%;height:60%;border-radius:.5rem;background-color:#525252;box-shadow:#000000b3 1rem 1rem 1rem;display:flex;flex-direction:column;padding:2rem}.closeButton{display:flex;justify-content:flex-end}.closeButton button{background-color:transparent;border:none;font-size:2rem;cursor:pointer}.modalContainer .title{display:inline-block;text-align:center;margin-top:1rem}.modalContainer .body{flex:50%;display:flex;justify-content:center;align-items:center;font-size:1.7rem;text-align:center}.modalContainer .footer{flex:20%;display:flex;flex-direction:column;justify-content:center;align-items:center}.stats{display:flex;justify-content:center}.stats ul{display:flex;list-style:none;padding:0;margin:0}.stats li{width:25%;margin:1rem}.statNum{text-align:center;font-size:2rem;font-weight:700}.statName{text-align:center;font-size:1rem}.statsResetButton{padding:.5rem .8rem;background-color:#ff2f2f;color:#fff;border:none;border-radius:.4rem;font-size:.8rem;cursor:pointer}.resetButton{margin:.2rem;padding:.8rem 1rem;background-color:#4caf50;color:#fff;border:none;border-radius:.4rem;font-size:1rem;cursor:pointer}.resetButton:hover{background-color:#45a049}@media (max-width: 500px){.keyboard{width:90%}.grid{max-width:20rem}.key{width:2rem;margin:.15rem}.key-large{width:3rem}.tile{width:3rem;height:3rem;font-size:2.5rem}}@media (max-width: 430px){.key{width:1.8rem}.key-large{width:3rem}}@media (max-width: 390px){.key{width:1.6rem}.key-large{width:3rem}}