*{box-sizing:border-box}@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}to{transform:rotate(0)}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.lobster-regular{font-family:Lobster,serif;font-weight:400;font-style:normal;color:#e48832}.open-sans-reg{font-family:Open Sans,serif;font-optical-sizing:auto;font-weight:200;font-style:normal;font-variation-settings:"wdth" 100}body{margin:0;height:100vh;font-family:Open Sans,serif;font-style:normal;background-color:#2d3036;color:#fefee3;padding:20px;display:flex;justify-content:center;align-items:center;font-size:16px}.gameBoard{max-width:100%;max-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#706170;padding:1rem;border-radius:1rem}header{text-align:center;max-width:29rem}header>h1{margin:.5rem;font-size:4rem;text-shadow:0px -2px 11px 0px #4e434e}header>p{display:block;margin:.5rem 0}header>details{display:none}header>details>summary{list-style:none}.msg-container{width:100%;max-width:22rem;height:4rem;background-color:#873714;border-radius:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-block:1rem;box-shadow:inset 2px 2px 5px 2px #3b4047}.msg-container.fail{background-color:#d8623e}.msg-container.win{background-color:#eca703}.msg-container>h2{font-size:1.3rem;margin-bottom:-.4rem;margin-top:.2rem}.msg-container>p{margin:.3rem}.cats{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:1rem;max-width:90%;max-height:90%}.cats>button{all:unset;width:4rem;height:4rem;border-radius:30%;box-shadow:0 -2px 11px #4e434e;font-size:min(0);position:relative;transition:opacity .6s ease}.cats>button:not(lose):hover img{filter:brightness(50%);text-shadow:1px 1px 2px #000}.cats>button.lose{opacity:0}.cat-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:.75em;color:#fff;opacity:0;transition:opacity .3s ease;background-color:#312f2f80;padding:.2em .6em;border-radius:3px;width:auto;min-width:100%;max-width:220%;text-align:center;overflow:visible;z-index:10}button:not(.lose):hover .cat-name{opacity:1}.cats>button[name="Vince the Impailer"]:hover img{filter:none}.cats>button[name="Vince the Impailer"]:hover{animation:wiggle .3s ease-in-out 2}img{width:100%;height:100%}.word-div{display:flex;justify-content:center;font-weight:600;font-size:1.5rem;column-gap:.2rem;margin:1.5rem;min-height:2.5rem;max-width:100%}.word-div>span{display:flex;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;border-bottom:3px solid #afaf9b;border-radius:2px 2px 0 0;background-color:#685968;box-shadow:inset 0 1px 7px 1px #524452}.word-div>span.missed-letter{color:#e95021}.keyboard{margin:.4rem .6rem 1em;max-width:100%;display:flex;flex-direction:column;align-items:center}.upper-keys{display:grid;grid-template-columns:repeat(10,2.5rem);row-gap:.5rem;column-gap:.5rem;max-width:100%}.lower-keys{display:flex;justify-content:center;column-gap:.5rem;margin-top:.5rem;max-width:100%}button.keys{text-align:center;background:linear-gradient(0deg,#d3ad89,#be7c3d 40%);height:2.5rem;width:2.5rem;border:none;border-radius:5px;color:#fefee3;font-size:1.1rem;box-shadow:0 -2px 11px #4e434e;text-shadow:0 0 4px #70451c}button{display:block;margin:0 auto;width:6.2rem;height:2.5rem;padding:.3rem;background:linear-gradient(0deg,#ebc56e,#eca703 40%);border:none;color:#fefee3;font-size:.9rem;border-radius:5px;box-shadow:0 -2px 11px #4e434e;margin-bottom:.3rem;font-family:Open Sans,serif;font-weight:600;cursor:pointer}button.new-game{width:9.2rem;text-shadow:0 0 3px #271402}button.testBtn{height:2rem;width:9.2rem;margin-top:.7em;background:linear-gradient(0deg,#fefee3,#dadabf 40%);color:#271402;text-shadow:0 0 4px #fefee3}.popupBtn{background:linear-gradient(0deg,#e49c59,#e48832 40%);text-shadow:0 0 3px #6e3805;display:inline-block;margin:0}.hidden{visibility:hidden}button.keys:hover:enabled,button.new-game:hover:enabled,button.testBtn:hover{filter:brightness(110%)}button.keys:before,button.new-game:before,button.testBtn:before{height:0%;width:2px}button.keys:active:enabled{box-shadow:4px 4px 6px #7c6b7c,-4px -4px 6px #747d8880,inset -4px -4px 6px #fff3,inset 4px 4px 6px #3a1d04}button.new-game:active:enabled,button.testBtn:active{box-shadow:4px 4px 6px #7c6b7c,-4px -4px 6px #747d8880,inset -4px -4px 6px #fff3,inset 4px 4px 6px #2d3036}button.keys.letter-right{background:linear-gradient(0deg,#7cdba5,#4c956c 40%)}button.keys.letter-wrong{background:linear-gradient(0deg,#d8623e,#9e4226 50%);color:#3a1d04}button.keys:disabled{cursor:grabbing;opacity:.5}.popupCovered{position:relative}.popUp{position:absolute;top:0;left:0;display:flex;flex-direction:column;justify-content:space-around;row-gap:1em;width:100%;height:100%;background-color:#fefee3;color:#271402;padding:1em;border-radius:.2rem;filter:drop-shadow(1px 2px 5px #352d35)}.popUp>textarea{min-width:100%;min-height:77%;max-height:77%;background-color:#fefee3;color:#271402;font-weight:600;font-size:1rem;line-height:2em;outline:none;border:2px solid #e48832;border-radius:.2rem;padding:.75em}.popUp.hidden{display:none}.popupBtnDiv{display:flex;justify-content:center;column-gap:1em;align-items:center}.disabled-div{cursor:grabbing}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media only screen and (max-width: 768px){header>h1{font-size:3rem}.upper-keys{row-gap:.3rem;column-gap:.3rem}.lower-keys{column-gap:.3rem}}@media only screen and (max-width: 450px){#root{max-width:450px;padding:0}body{padding:0}.gameBoard{height:100vh}header>h1{font-size:3.3rem;margin-top:0;margin-bottom:.8rem}header>p{display:none}header>details{display:block;cursor:pointer;margin:.5rem 0}header>details>summary{font-weight:700;color:#ffc9b9;margin-bottom:.5rem;list-style:none}header>details>summary::-webkit-details-marker{display:none}header>details>summary::marker{display:none}header>details>summary:after{content:" ▼";font-size:.8em}header>details[open]>summary:after{content:" ▲"}header>details>p{margin:.7rem;font-size:.9rem}.keyboard{display:flex;flex-direction:column;align-items:center;width:100%}.upper-keys{display:grid;grid-auto-flow:row;grid-template-columns:repeat(7,2.5rem);row-gap:.3rem;column-gap:.3rem;justify-content:center}.upper-keys>button:nth-last-child(-n+6){transform:translate(1.4rem)}.lower-keys{column-gap:.3rem;margin-top:.3rem;justify-content:center}.word-div{column-gap:.1rem;margin:.7rem}.msg-container{height:3.5rem;font-size:.8rem;margin-block:.2rem}h2{font-size:1rem}.cats{gap:.5rem;margin-bottom:.8rem}.cats>button{width:3.6rem;height:3.6rem}button.new-game,button.testBtn{min-width:100%}}@media only screen and (max-width: 375px){#root{height:100%;max-width:375px;padding:0}.gameBoard{height:100vh}header>h1{font-size:2.6rem}header>details{margin:.2rem 0}header>details>summary{margin-bottom:.3rem}header>details>p{margin:.3rem;font-size:.9rem}.word-div{column-gap:.1rem;margin:.4rem 0}.msg-container{height:3.5rem;font-size:.8rem;margin-block:.2rem}h2{font-size:1rem}.cats{gap:.5rem;margin-bottom:.5rem}.cats>button{width:3.5rem;height:3.5rem}}@media only screen and (max-width: 320px){#root{max-width:320px;padding:0}body{height:100%;padding:0;margin:0}.gameBoard{height:100vh}header>h1{font-size:2em;padding:0;margin:0;margin-bottom:.1rem}header>p{display:none;margin-bottom:.1rem}header>details{margin:.4rem 0}header>details>summary{margin-bottom:.4rem}header>details>p{margin:.3em;font-size:.9em}.word-div{column-gap:.1rem;margin:.3em}button.keys{height:2rem;width:2rem;font-size:.9rem}.upper-keys{grid-template-columns:repeat(7,2rem);row-gap:.3rem;column-gap:.3rem}.upper-keys>button:nth-last-child(-n+6){transform:translate(1.15rem)}.lower-keys{column-gap:.3rem}.msg-container{height:2.7rem;font-size:.85em;margin-block:.1em;padding:.1rem}.msg-container>h2{font-size:1em}.cats{gap:.4rem;margin-bottom:.5rem}.cats>button{width:3.2rem;height:3.2rem}}