@import"https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@800;600";*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:100vh;background-color:#121213;color:#f8f8f8;display:flex;justify-content:center;align-items:center;font-family:Libre Franklin,sans-serif;text-transform:uppercase}.wordle__container{display:flex;flex-direction:column;align-items:center;gap:5px}.wordle__container:focus{outline:none}.wordle__title{text-transform:capitalize}.wordle__notification{text-align:center;height:16px;margin:16px;color:salmon;font-weight:600;font-size:20px}.wordle__notification__green{color:#538d4e}.row__container{display:flex;gap:5px;font-weight:800;font-size:32px}.letter__container{width:60px;height:60px;background-color:#121213;border:2px solid rgb(58,58,60);display:flex;justify-content:center;align-items:center;position:relative;transform-style:preserve-3d}.letter__back{position:absolute;z-index:1;width:100%;height:100%;display:flex;justify-content:center;align-items:center;transform:rotateX(180deg);backface-visibility:hidden}.active{border-color:#565758;animation:.1s linear scale}.absent .letter__back{background-color:#3a3a3c}.present .letter__back{background-color:#b59f3b}.correct .letter__back{background-color:#538d4e}.rotate--100{animation:.5s linear .1s rotate forwards}.rotate--200{animation:.5s linear .2s rotate forwards}.rotate--300{animation:.5s linear .3s rotate forwards}.rotate--400{animation:.5s linear .4s rotate forwards}.rotate--500{animation:.5s linear .5s rotate forwards}@keyframes rotate{0%{transform:rotateX(0)}to{transform:rotateX(180deg)}}@keyframes scale{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes bounce{0%{transform:translate(0)}40%{transform:translate(6px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}to{transform:translate(-6px)}}@media only screen and (max-width: 700px){.letter__container{width:50px;height:50px}}.keyboard__container{display:flex;flex-direction:column;gap:8px;margin-top:32px;font-size:20px}.keyboard__row{display:flex;justify-content:center;gap:6px}button{all:unset}button:hover{cursor:pointer}.key{width:40px;height:60px;display:flex;justify-content:center;align-items:center;background-color:#818384;font-weight:600;transition:background-color .3s linear;border-radius:6px}.key__absent{background-color:#3a3a3c}.key__present,.key__correct{background-color:#538d4e}.enter,.backspace{width:60px;font-size:12px}@media only screen and (max-width: 700px){.keyboard{font-size:16px;gap:6px}.keyboard__row{gap:4px}.key{width:30px;height:40px}.enter,.backspace{width:60px;font-size:12px}}