*{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin-left:auto;margin-right:auto}body{background-color:#121213}.container{align-items:center;display:flex;flex-direction:column;height:85vh;justify-content:space-between}.header{align-items:flex-end;border-bottom:1px solid #3a3a3c;text-align:center;width:510px}@media screen and (max-width:40.5em){.header{font-size:small;margin-bottom:10px;width:auto}}.keyboard{display:flex;flex-shrink:1;flex-wrap:wrap;justify-content:center;width:510px}@media screen and (max-width:40.5em){.keyboard{width:320px}}.keyboard-button{background-color:#818384;border:none;border-radius:4px;flex-shrink:1;height:58px;margin:4px;text-transform:capitalize;width:43px}.keyboard-button:nth-child(20),.keyboard-button:nth-child(28){width:68px}@media screen and (max-width:40.5em){.keyboard-button{height:55px;margin:2px;width:28px}.keyboard-button:nth-child(20),.keyboard-button:nth-child(28){width:40px}}.keyboard-button:hover{background-color:#8fbc8f}.keyboard-button.correct{background-color:green}.keyboard-button.missplaced{background-color:#e38f22}.keyboard-button.incorrect{background-color:#2f4f4f}.keyboard-button:nth-child(11){margin-left:13px}.grid{display:flex;flex-direction:column;margin-bottom:30px;width:330px}@media screen and (max-width:40.5em){.grid{width:100%}}.character,.grid div{display:flex}.character{align-items:center;border:2px solid#3a3a3c;box-sizing:border-box;font-size:x-large;font-weight:700;height:62px;justify-content:center;margin:2px;text-transform:capitalize;width:62px}@media screen and (max-width:40.5em){.character{height:50px;width:50px}}.missplaced{background-color:#e38f22}.correct{background-color:green}.incorrect{background-color:gray}.flip{-webkit-animation:flipping .5s linear;animation:flipping .5s linear}@-webkit-keyframes flipping{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}50%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}@keyframes flipping{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}50%{-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}}footer{bottom:0;height:2rem;position:-webkit-sticky;position:sticky;text-align:center;width:100%}
/*# sourceMappingURL=main.1a9ef1b3.css.map*/