.hangmanHolder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.hangman{width:400px;height:400px;display:flex;align-items:center;justify-content:center;position:relative}.hangman .base{width:300px;height:10px;background-color:var(--primary);position:absolute;bottom:0}.hangman .circle{border-radius:50%;border:6px solid var(--primary);background-color:var(--primary);position:absolute}.hangman .body{width:200px;height:150px;bottom:0}.hangman .chest{width:130px;height:100px;bottom:130px}.hangman .face{width:70px;height:70px;bottom:220px}.hangman .hat{bottom:260px;position:absolute;transform:rotate(270deg);border-top:40px solid transparent;border-bottom:40px solid transparent;border-left:40px solid var(--primary)}.hangman .arm{width:100px;height:6px;background-color:var(--primary);position:absolute;bottom:200px}.hangman .right{transform:rotate(-45deg);right:80px}.hangman .left{transform:rotate(45deg);left:80px}.face .nose{width:10px;height:20px;transform:rotate(-100deg) translate(-10px,40px);border-top:10px solid transparent;border-bottom:40px solid transparent;border-left:20px solid red}.face .eye{width:10px;height:10px;border-radius:50%;background-color:#000;position:absolute}.face .right{right:8px;top:10px}.face .left{left:8px;top:10px}.hangmanWord{display:flex;align-items:center;justify-content:center;padding:10px;gap:15px}.hangmanWord .letterBox{width:30px;height:30px;border-bottom:4px solid var(--primary);font-size:20px;font-weight:700;text-align:center;text-transform:capitalize}.hidden{visibility:hidden}.keyboard{min-width:400px;display:flex;flex-direction:column;gap:30px;padding:20px;border:2px solid var(--primary);margin:0 40px}.keyboard .buttonHolder{display:flex;align-items:center;justify-content:center;gap:20px}.keyboard button{width:50px;height:50px;padding:8px;border-radius:4px;border:none;outline:none;font-size:18px;font-weight:700;cursor:pointer;background-color:transparent;color:var(--primary);border:2px solid var(--primary);text-transform:capitalize}button:hover:not(:disabled){background-color:var(--primary);color:#000}button[disabled]{cursor:not-allowed!important;opacity:.5}:root{--primary: aliceblue;--secondary: crimson;--bg: #242424;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:var(--primary);background-color:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{margin:0;padding:0;box-sizing:border-box}.main{display:flex;-webkit-user-select:none;user-select:none;position:relative;min-width:700px}.keyboardContainer,.drawingContainer{width:50%;display:flex;justify-content:center;min-height:100vh;flex-direction:column;gap:50px;padding:20px}.keyboardContainer{min-width:700px}.drawingContainer{min-width:700px;justify-content:flex-start}.keyboardContainer .title{display:flex;align-items:center;justify-content:center;font-size:50px;font-weight:700;color:var(--primary)}.gameOver{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;font-size:30px;font-weight:700;color:var(--primary)}.gameOver span span{color:var(--secondary)}.gameOver button,.help button{padding:8px 12px;border-radius:4px;border:none;outline:none;font-size:18px;font-weight:700;cursor:pointer;background-color:transparent;color:var(--primary);border:2px solid var(--primary)}.gameOver button:hover{background-color:var(--primary)}.help{display:flex;align-items:center;justify-content:center;padding:5px}.helpBox{display:flex;align-items:center;justify-content:center;position:absolute;overflow:hidden;padding:8px 16px;width:100%}.helpBox .info{max-width:400px;background-color:var(--primary);color:var(--bg);font-weight:500;border-radius:4px;padding:16px;transition:all .3s ease-in-out;cursor:pointer}.visible{transform:translateY(0)}.hide{transform:translateY(-110%)}@media screen and (max-width:500px){.main{flex-direction:column}.keyboardContainer,.drawingContainer{padding:50px 0;min-height:auto}.gameOver{font-size:24px}}