:root{--clr-primary:#333333;--clr-primary-light:#3f3f3f;--clr-secondary:#e2e2e2;--clr-success:#000042;--clr-success-rgb:rgba(0, 0, 66,.5);--clr-success-txt:#ffffff;--clr-neutral:#FBCA03;--clr-neutral-rgb:rgba(251, 202, 3, .5);--clr-danger:#00643D;--clr-danger-rgb:rgb(0, 100, 61,.5);--clr-danger-txt:#FFEC83;--clr-danger-doom:#08BF7C}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--clr-primary);font-family:Fira Sans Extra Condensed,sans-serif}header{color:var(--clr-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:3rem 0 1rem}.header-title{font-size:3.5rem;text-align:center;text-transform:uppercase}.header-para{text-align:center;font-weight:200;margin:1rem}main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;margin:1rem}.status-wrap{background:var(--clr-primary);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 2rem;border-radius:.8rem}.status-wrap.won{background:var(--clr-success);color:var(--clr-success-txt)}.status-wrap.lost{background:var(--clr-danger);color:var(--clr-danger-txt)}.status-wrap.doomed{background:var(--clr-danger-doom);color:var(--clr-danger)}.status-title{font-size:3rem}.heroes-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;padding:1rem}.hero-pill{padding:.5rem 1rem;border-radius:2rem;font-size:1.1rem;font-weight:700;text-transform:uppercase;position:relative;transition:all .7s ease-in-out}.hero-pill.lost:before{content:"💀";position:absolute;z-index:2;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;border-radius:1rem;border:1px solid var(--clr-danger-txt);background:#00643dcc}.puzzle-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem;width:100%}.puzzle-letter{background:var(--clr-primary-light);padding:.5rem;text-align:center;text-transform:uppercase;font-size:1.5rem;color:var(--clr-secondary);border-bottom:3px solid var(--clr-secondary);min-height:2.9rem;min-width:2.7rem;display:flex;align-items:center;justify-content:center}.puzzle-letter.game-over{color:var(--clr-danger-txt)}.keyboard-wrap{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(3,1fr);justify-content:center;gap:.5rem}.letter-btn{padding:.6rem;font-size:1.3rem;background-color:var(--clr-neutral);border:1px solid var(--clr-primary-light);border-radius:8px;box-shadow:0 0 9px 2px var(--clr-neutral-rgb);text-transform:uppercase}.letter-btn.correct-guess{background-color:var(--clr-success);color:var(--clr-success-txt);box-shadow:0 0 9px 2px var(--clr-success-rgb)}.letter-btn.wrong-guess{background-color:var(--clr-danger);color:var(--clr-danger-txt);box-shadow:0 0 9px 2px var(--clr-danger-rgb)}.newGame{font-size:1.2rem;font-weight:700;padding:1rem 2rem}button{font-family:Fira Sans Extra Condensed,sans-serif}@media screen and (min-width:1080px){.status-wrap,.heroes-chips,.puzzle-wrap,.keyboard-wrap{width:40vw}.keyboard-wrap{grid-template-columns:repeat(9,1fr);padding:1rem 5rem}}