.App{text-align:center;background-color:#121212;width:100vw;height:100vh;color:#fff}body{padding:0%;margin:0}nav{height:60px;width:100%;margin:0;border-bottom:1px solid #3a3a3c;display:grid;place-items:center}nav h1{margin:0;font-family:Helvetica,Arial,sans-serif;color:#fff;font-size:45px}.game{width:100vw;height:calc(100vh - 170px);display:flex;align-items:center;padding-top:50px;flex-direction:column}.row>div.correct{--background: #5ac85a;--border-color: #5ac85a;animation:flip .5s ease forwards}.row>div.almost{--background: #e2cc68;--border-color: #e2cc68;animation:flip .5s ease forwards}.row>div.error{--background: #a1a1a1;--border-color: #a1a1a1;animation:flip .6s 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:#121212;border-color:#333}45%{transform:rotateX(90deg);background:#121212;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}}.letter{height:52px;width:52px;border:2px solid #3a3a3c;display:grid;place-items:center;font-size:30px;font-weight:bolder;color:#fff;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}.board{width:310px;display:grid;grid-template-rows:repeat(6,1fr);grid-gap:5px;padding:10px;box-sizing:border-box}.row{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:0px;justify-items:center}.key{width:43px;height:58px;margin-left:6px;border-radius:4px;display:grid;place-items:center;font-size:20px;background-color:gray;color:#fff;font-family:Arial,Helvetica,sans-serif;cursor:pointer;font-weight:700}.big{width:65px;font-size:12px}.disabled{background-color:#3a393c}.keyboard{width:700px;height:300px;margin-top:60px}.line1{flex:33%;flex-direction:row;display:flex;justify-content:center;margin:5px}.line2,.line3{flex:33%;display:flex;flex-direction:row;justify-content:center;margin:5px}@media only screen and (max-width: 600px){.keyboard{width:375px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}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}}