body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{margin:0;text-align:center}.App{align-items:center;display:flex;flex-direction:column;gap:5px;justify-content:space-between}.App>h1{margin:10px auto 20px}.tile{align-items:center;border:2px solid #d3d6da;display:flex;font-size:1.7rem;font-weight:700;height:47px;justify-content:space-around;text-transform:uppercase;width:47px}.key_board,.line{display:flex;gap:5px}.key_board{flex-wrap:wrap;margin-left:25px;margin-top:10px;width:500px}.key{align-items:center;background-color:#d3d6da;border-radius:5px;border-width:0;display:flex;font-size:.9rem;font-weight:600;height:60px;justify-content:center;opacity:90%;width:43px}.key:nth-of-type(11){margin-left:25px}.key:nth-of-type(20),.key:nth-of-type(28){width:70px}.line>div:nth-child(2){-webkit-animation-delay:.3s;animation-delay:.3s}.line>div:nth-child(3){-webkit-animation-delay:.6s;animation-delay:.6s}.line>div:nth-child(4){-webkit-animation-delay:.9s;animation-delay:.9s}.line>div:nth-child(5){-webkit-animation-delay:1.2s;animation-delay:1.2s}.green{--background-color:#5ac85a;--border-color:#5ac85a}.green,.yellow{-webkit-animation:flip .7s ease forwards;animation:flip .7s ease forwards}.yellow{--background-color:#e2cc68;--border-color:#e2cc68}.grey{--background-color:#a1a1a1;--border-color:#a1a1a1;-webkit-animation:flip .7s ease forwards;animation:flip .7s ease forwards}@-webkit-keyframes flip{0%{background-color:#fff;border-color:#a1a1a1;-webkit-transform:rotateX(0);transform:rotateX(0)}45%{background-color:#fff;border-color:#a1a1a1;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background-color:var(--background-color);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background-color:var(--background-color);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(0);transform:rotateX(0)}}@keyframes flip{0%{background-color:#fff;border-color:#a1a1a1;-webkit-transform:rotateX(0);transform:rotateX(0)}45%{background-color:#fff;border-color:#a1a1a1;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}55%{background-color:var(--background-color);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(90deg);transform:rotateX(90deg)}to{background-color:var(--background-color);border-color:var(--border-color);color:#fff;-webkit-transform:rotateX(0);transform:rotateX(0)}}.floating{background-color:#000;border-radius:5px;color:#fff;font-weight:700;height:35px;padding:10px 10px 0;position:absolute;top:70px;transition:opacity 1s ease;z-index:10}
/*# sourceMappingURL=main.0bd9473a.css.map*/