*{box-sizing:border-box}body{margin:0;font-family:Hanken Grotesk,Arial,sans-serif;font-family:Arial,sans-serif;background-color:#070606e9;padding:20px;color:#fff;height:100vh}main{display:flex;justify-content:center;align-items:center;flex-direction:column}header{text-align:center}.word-row{display:flex;gap:5px;margin-bottom:10px}section.word{margin-bottom:40px}section.word span{height:60px;width:60px;background-color:#323232;display:flex;justify-content:center;align-items:center;font-size:1.5rem;border-bottom:2px solid #F9F4DA}section.word span.correct{background-color:#6aaa64;border-bottom:2px solid #6AAA64;color:#fff;animation:flip .6s ease forwards}section.word span.available{background-color:#e1b412;border-bottom:2px solid #302b01;color:#fff;animation:flip .6s ease forwards}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}51%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.keyboard-row{display:flex;justify-content:center;margin-bottom:8px;gap:8px}button{height:55px;width:55px;background-color:#fcba29;border:1px solid #D7D7D7;border-radius:3px;cursor:pointer}button.available{background-color:#fd0a0a;color:#fff;cursor:default}button.correct{background-color:#6aaa64;color:#fff;cursor:default}button.notavailable{background-color:#323232;color:#fff;cursor:default}button.enter,button.delete{font-size:10px;width:50px}@media (max-width: 768px){body{padding:10px}section.word span{height:40px;width:40px;font-size:1rem}.keyboard-row{gap:5px;flex-wrap:wrap}button{height:30px;width:30px;font-size:.8rem;color:#000}button.enter,button.delete{width:49px;font-size:.7rem}}