@import"https://fonts.googleapis.com/css2?family=Roboto&display=swap";*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;font-family:roboto,sans-serif;--text-high-color: hsl(0, 0%, 100%, .87);--text-med-color: hsl(0, 0%, 100%, .6);--text-low-color: hsl(0, 0%, 100%, .38);--bg-highx4-color: hsl(0, 0%, 65%);--bg-highx3-color: hsl(0, 0%, 55%);--bg-highx2-color: hsl(0, 0%, 35%);--bg-high-color: hsl(0, 0%, 25%);--bg-med-color: hsl(0, 0%, 19%);--bg-low-color: hsl(0, 0%, 9%);--accent-color-red: hsl(356, 45%, 52%);--accent-color-yellow: hsl(60, 45%, 52%);--accent-color-green: hsl(120, 45%, 52%);--accent-filter-red: brightness(0) saturate(100%) invert(38%) sepia(43%) saturate(855%) hue-rotate(307deg) brightness(91%) contrast(86%);--bg-low-filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(5744%) hue-rotate(60deg) brightness(130%) contrast(82%);--bg-med-filter: brightness(0) saturate(100%) invert(12%) sepia(0%) saturate(125%) hue-rotate(265deg) brightness(99%) contrast(82%);--bg-high-filter: brightness(0) saturate(100%) invert(25%) sepia(0%) saturate(157%) hue-rotate(292deg) brightness(95%) contrast(95%)}#root{max-width:100vw;min-height:100vh;display:grid;grid-template-rows:min-content 1fr min-content;background-color:var(--bg-low-color)}header{display:flex;justify-content:space-evenly;align-items:center;padding:.5rem 0;background-color:var(--bg-med-color);color:var(--accent-color-red)}header>a{text-decoration:none;color:var(--accent-color-red)}.logo-wrapper{display:flex;align-items:center;gap:1rem}.logo-title{font-size:clamp(1.5rem,1rem + 1.5vw,2rem);font-weight:700}.logo-img{max-width:50px;max-height:50px}.logo-img img{width:100%;height:100%;filter:var(--accent-filter-red)}header nav a{color:var(--accent-filter-red);text-decoration:none;font-weight:700}header nav a:hover,header nav a:focus{text-decoration:underline}@media only screen and (max-width:500px){.logo-title{display:none}}.wordle-main{width:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(1rem,.2rem + 1vw,2rem);align-items:center;position:relative}.wordle-board{display:flex;flex-direction:column;gap:.5rem;position:relative}.show-wordle-rules{position:absolute;top:-12%;right:1%;width:35px;display:flex;background:none;border:none;cursor:pointer;border-radius:5px}.show-wordle-rules img{width:100%;filter:invert() opacity(.6)}.show-wordle-rules:hover,.show-wordle-rules:focus{background-color:var(--bg-med-color)}.wordle-input{width:fit-content;display:flex;gap:.5rem;outline:none;cursor:default;-webkit-user-select:none;user-select:none}.wordle-input .input-letter{display:flex;justify-content:center;align-items:center;width:clamp(50px,40px + 1vw,65px);height:clamp(50px,40px + 1vw,65px);border:2px solid var(--text-med-color);border-radius:5px;font-size:clamp(1rem,.6rem + 1.5vw,2rem);font-weight:700;color:var(--text-med-color);background-color:var(--bg-low-color)}.wordle-input .input-letter.wrong{color:var(--bg-low-color);background-color:var(--text-med-color);border:none;will-change:transform;animation-name:wrong-flip;animation-duration:1s;animation-fill-mode:backwards;animation-timing-function:linear}.wordle-input .input-letter.right-letter{background-color:var(--accent-color-yellow);color:var(--bg-low-color);border:none;will-change:transform;animation-name:right-letter-flip;animation-duration:1s;animation-fill-mode:backwards;animation-timing-function:linear}.wordle-input .input-letter.correct{background-color:var(--accent-color-green);color:var(--bg-low-color);border:none;will-change:transform;animation-name:correct-flip;animation-duration:1s;animation-fill-mode:backwards;animation-timing-function:linear}@keyframes wrong-flip{0%{border:2px solid var(--text-med-color);color:var(--text-med-color);background-color:var(--bg-low-color);transform:rotateX(0) perspective(10px)}50%{border:2px solid var(--text-med-color);color:var(--text-med-color);background-color:var(--bg-low-color);transform:rotateX(-90deg) perspective(10px)}51%{color:var(--bg-low-color);background-color:var(--text-med-color);border:none;transform:rotateX(-90deg) perspective(10px)}to{color:var(--bg-low-color);background-color:var(--text-med-color);border:none;transform:rotateX(0) perspective(10px)}}@keyframes right-letter-flip{0%{border:2px solid var(--text-med-color);color:var(--text-med-color);background-color:var(--bg-low-color);transform:rotateX(0) perspective(10px)}50%{border:2px solid var(--text-med-color);color:var(--text-med-color);background-color:var(--bg-low-color);transform:rotateX(-90deg) perspective(10px)}51%{color:var(--bg-low-color);background-color:var(--accent-color-yellow);border:none;transform:rotateX(-90deg) perspective(10px)}to{color:var(--bg-low-color);background-color:var(--accent-color-yellow);border:none;transform:rotateX(0) perspective(10px)}}@keyframes correct-flip{0%{border:2px solid var(--text-med-color);color:var(--text-med-color);background-color:var(--bg-low-color);transform:rotateX(0) perspective(10px)}50%{border:2px solid var(--text-med-color);color:var(--text-med-color);background-color:var(--bg-low-color);transform:rotateX(-90deg) perspective(10px)}51%{background-color:var(--accent-color-green);color:var(--bg-low-color);border:none;transform:rotateX(-90deg) perspective(10px)}to{background-color:var(--accent-color-green);color:var(--bg-low-color);border:none;transform:rotateX(0) perspective(10px)}}.wordle-popup{position:absolute;background-color:var(--accent-color-red);border-radius:5px;padding:.5rem 1rem;color:var(--bg-low-color);font-weight:700;display:flex;align-items:center;gap:.5rem;top:clamp(2%,1.5% + 1vw,5%);z-index:1}.wordle-popup.fade-out{animation-name:fade-out;animation-delay:.5s;animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:linear}.wordle-popup button{background:none;border:none;display:flex;padding:.2rem 0 .2rem .2rem;width:25px;cursor:pointer}.wordle-popup button img{width:100%}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.wordle-keyboard{display:flex;flex-direction:column;align-items:center;gap:clamp(.2rem,.1rem + 1vw,.6rem)}.wordle-keyboard-keys{display:flex;align-items:center;justify-content:center;gap:clamp(.2rem,0rem + 1vw,.6rem);width:100%}.w-keyboard-key{border:2px solid var(--text-med-color);border-radius:5px;font-size:clamp(.8rem,.5rem + .6vw,1.4rem);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-med-color);display:flex;justify-content:center;align-items:center;width:clamp(28px,20px + 1.5vw,51px);height:clamp(55px,45px + 1vw,65px);flex-shrink:0}.w-keyboard-key.enter{flex-grow:1;flex-shrink:1;flex-basis:100%;font-size:clamp(.6rem,.3rem + 1vw,1rem)}.w-keyboard-key.backspace{flex-basis:100%;flex-grow:1;flex-shrink:1;--filter: invert(100%) opacity(.6)}.w-keyboard-key.backspace img{width:35%;filter:var(--filter)}.w-keyboard-key.pressed{background-color:var(--accent-color-red);color:var(--bg-low-color);border-color:var(--accent-color-red)}.w-keyboard-key.backspace.pressed,.w-keyboard-key.backspace.wrong,.w-keyboard-key.backspace.right-letter,.w-keyboard-key.backspace.correct{--filter: var(--bg-low-filter)}.w-keyboard-key.wrong{color:var(--bg-low-color);background-color:var(--text-med-color);border:none}.w-keyboard-key.right-letter{color:var(--bg-low-color);background-color:var(--accent-color-yellow);border:none}.w-keyboard-key.correct{color:var(--bg-low-color);background-color:var(--accent-color-green);border:none}.loading-main{display:flex;gap:2rem;flex-direction:column;align-items:center;padding-top:2rem;position:relative}.loading-img-wrapper{width:clamp(100px,90px + 2vw,120px)}.loading-img-wrapper img{width:100%;filter:var(--accent-filter-red) brightness(.8)}.loading-spinner-wrapper{width:clamp(40px,30px + 1vw,50px);position:relative}.loading-spinner-wrapper .circle-img{position:absolute;width:100%;filter:var(--bg-med-filter)}.loading-spinner-wrapper .spinner-img{width:100%;filter:var(--accent-filter-red) brightness(.8);animation-name:spin;animation-duration:2.5s;animation-iteration-count:infinite}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(90deg)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.wordle-rules-popup{position:absolute;background-color:var(--bg-high-color);display:flex;flex-direction:column;gap:.5rem;padding:1rem;color:var(--text-med-color);top:5%;border-radius:10px;z-index:1}.wordle-rules-popup .exit-wrapper{width:100%;display:flex;justify-content:end}.wordle-rules{display:flex;flex-direction:column;gap:1rem}.wordle-rules ul{padding-left:1rem;display:flex;flex-direction:column;gap:.5rem}.wordle-rules li{width:clamp(30ch,25ch + 2vw,45ch)}.examples-title,.wordle-rules-popup .title{font-size:1.2rem;font-weight:700}.examples-title{margin-top:.5rem}.example-img-wrapper{width:min(250px,100%)}.example-img-wrapper img{width:100%}.wordle-rules-popup button{background:none;border:none;cursor:pointer;width:30px;display:flex}.wordle-rules-popup button img{filter:invert() opacity(.6)}.wordle-rules-popup.hidden{display:none}