*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.wordle{margin:65px auto 0;display:flex;flex-direction:column;gap:25px;align-items:center;position:relative}.wordle__result{padding:7px;position:absolute;top:-55px;font-size:20px;border:2px solid #d2d2d2;border-radius:5px;font-weight:500}.wordle__button{margin-top:7px;margin-left:10px;cursor:pointer;padding:0 10px;font-size:26px;border-radius:50px;border:2px solid #d2d2d2;width:50px;height:50px}.wordle__button:active{background-color:#d2d2d2}.wordle__button-restart{margin-top:10px;padding:10px;font-size:20px;border:2px solid #d2d2d2;border-radius:5px;font-weight:500;cursor:pointer}.wordle__button-restart:active{background-color:#d2d2d2}.wordle__table{display:flex;flex-direction:column;gap:5px}.wordle__table__word{display:flex;width:335px;height:65px;justify-content:space-between}.wordle__table__word-wrong{animation:.1s linear 1 forwards wrong-word}.wordle__table__word__letter{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border:2px solid #d2d2d2;padding:15px;font-size:30px;font-weight:700}.wordle__table__word__letter-jump{animation:.1s ease-in-out 1 alternate letter-jump}.wordle__table__word__letter-result{animation:.2s ease-in-out 1 forwards letter-result;backface-visibility:hidden}.keyboard{display:flex;flex-direction:column;gap:8px}.keyboard>div{display:flex;gap:0 8px;justify-content:center}.keyboard>div>button{width:45px;height:60px;background-color:#d2d2d2;border:0;border-radius:5px;color:#000;font-size:26px;font-weight:500;cursor:pointer;text-align:center}.keyboard>div>button:active{background-color:#bebebe}.heading{margin:30px 0 0 50px;text-align:center;display:flex;justify-content:center;align-items:center}.heading>h3,.heading h1{margin:0}.heading>h3>a,.heading h1>a{text-decoration:none;cursor:pointer}.heading>h3{font-size:18px}.logo{margin:0 auto;display:block;height:100px}.overflow{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:#00000080;position:fixed;top:0;left:0}.tutorial{border-radius:10px;background-color:#fff;width:500px;height:fit-content;padding:20px}.tutorial__button{text-align:end}.tutorial__button>button{cursor:pointer;padding:0 10px;font-size:20px;border-radius:50px;border:2px solid #d2d2d2;width:40px;height:40px}.tutorial__button>button:active{background-color:#bebebe}.tutorial__content{margin-top:20px;display:flex;flex-direction:column;gap:15px}.tutorial__content>div>h2{text-align:center}.tutorial__content>div>ul{padding-left:20px}.tutorial__content__pic{margin:0 auto;display:block;width:300px}.tutorial__content span{font-weight:700}@keyframes letter-jump{0%{scale:1}50%{scale:1.1}to{scale:1}}@keyframes letter-result{0%{rotate:x 0deg}50%{rotate:x 180deg}to{rotate:x 360deg}}@keyframes wrong-word{0%{translate:15px}33%{translate:0px}67%{translate:-15px}to{translate:0px}}@media (max-width: 420px){.keyboard{scale:.7}.wordle{margin-top:0}.wordle__table{scale:.9;height:350px}.tutorial{scale:.8}}@media (max-width: 390px){.wordle{margin-top:0;gap:0}}@media (max-width: 380px){.keyboard{scale:.7}.wordle{margin-top:0;gap:0}.wordle__table{scale:.9;height:350px}.heading{margin-top:0}}@media (max-width: 320px){.keyboard{scale:.6}}