body{background:#eee;display:flex;justify-content:center;align-items:center;font-family:Lucida Sans Unicode,sans-serif}.board{width:400px;background:#fff;border-radius:10px;box-shadow:1px 1px 5px 5px #0003;padding:20px}.startGame{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;height:300px}.startGame button,.victory button,.gameOver button{width:100%;padding:20px;background:green;color:#fff;text-transform:uppercase;font-weight:700;font-size:20px;cursor:pointer;border-radius:5px;border:0;transition:background .5s ease}.startGame button:hover,.victory button:hover,.gameOver button:hover{background:rgb(44,187,0)}@keyframes swing{0%{transform:rotate(3deg)}to{transform:rotate(-3deg)}}.startGame>div{text-transform:uppercase;margin:0;position:relative;top:60px;animation:swing ease-in-out 1s infinite alternate;transform-origin:center -110px;border:5px solid #000;margin-bottom:1rem;padding:10px;background:url(/hangman/assets/wood_pattern.png)}.startGame h1{margin:0;font-size:50px}.startGame h1:before{content:"";position:absolute;width:6px;height:86px;background:#000;left:calc(50% - 6px);top:-86px;border-radius:10px}.startGame div p{margin:0;color:#000}.main{display:flex;height:100%;flex-direction:column;justify-content:space-between;align-items:center}.word{display:flex;font-weight:700;font-size:20px;text-transform:uppercase;padding:1rem 0}.blanks{border-bottom:3px solid #000;margin:0 5px;width:30px;padding-top:31px}.blanks.visibleLetter{padding-top:0}.letter{margin:0 5px}.letter.red{color:red}.letter.green{color:green}.blanks span,.word span{display:inline-block;min-width:20px;text-align:center}.letters{background:none;border:1px solid rgba(0,0,0,.25);padding:5px;margin:2px;width:calc(12.5% - 5px);transition:background .25s ease;cursor:pointer}.letters:hover{background:rgba(0,0,0,.25)}.letters:disabled{cursor:default}.letters:disabled:hover{background:none}.gameOver,.victory{width:100%}.gameOver p,.victory p{font-size:50px;margin:0;font-weight:700;text-transform:uppercase;text-align:center}.gameOver button{background:red}.winStreakCounter{display:flex;justify-content:space-between;width:100%}.winStreakCounter p{font-size:14px;color:#aaa}.winStreakCounter p span{color:green;font-weight:700}.gallows{background:url(/hangman/assets/white-waves.webp);border:1px solid rgba(0,0,0,.25);width:100%;height:300px;position:relative}.gallows.victory:after{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(/hangman/assets/confetti.gif);background-size:cover;mix-blend-mode:multiply}.base,.base:before,.base:after,.beam,.top,.top:before,.rope,.ropeGO{display:block;background:#000;height:10px;width:100px;position:absolute;border-radius:5px}.base,.base:before,.base:after{height:10px;width:120px;bottom:10px;left:10px}.base:before,.base:after{content:"";width:70px;bottom:22px;left:auto;right:4px;transform:rotate(45deg)}.base:after{transform:rotate(-45deg);right:auto;left:4px}.beam{bottom:150px;left:-30px;width:200px;transform:rotate(90deg)}.top{bottom:250px;left:50px;width:200px}.top:before{content:"";width:70px;top:24px;left:8px;transform:rotate(-45deg)}.rope{left:208px;transform:rotate(90deg);bottom:225px;width:55px;height:5px}.ropeGO{left:10px;transform:rotate(90deg);top:-20px;width:50px;height:5px}.hangman{position:absolute;left:200px;top:90px}.hangman.swinging{animation:swing ease-in-out 3s infinite alternate;transform-origin:center -110px}.head,.body,.left_arm,.right_arm,.left_leg,.right_leg{display:block;background:#000;height:10px;width:100px;position:absolute;border-radius:5px}.head{width:30px;height:30px;left:12px;top:5px;background:none;position:absolute}.head:before{content:"\1f615";display:block;width:100%;height:100%;font-size:50px;position:absolute;left:-10px;top:-14px}.gallows.victory .hangman{top:150px}.gallows.victory .hangman .right_arm{transform:rotate(320deg);top:50px}.gallows.victory .hangman .left_arm{transform:rotate(220deg);top:50px}.gallows.victory .hangman .head:before{content:"\1f604"}.head.tries-4:before{content:"\1f616"}.head.tries-3:before{content:"\1f62b"}.head.tries-2:before{content:"\1f635"}.head.tries-1:before{content:"\1f62c"}.head.tries-0:before{content:"\1f480";top:-12px}.body{transform:rotate(90deg);top:70px;left:5px;width:60px}.left_arm{width:50px;top:70px;left:-6px;transform:rotate(-45deg)}.right_arm{width:50px;top:70px;left:26px;transform:rotate(45deg)}.right_leg{width:50px;top:110px;left:20px;transform:rotate(60deg)}.left_leg{width:50px;top:110px;left:0px;transform:rotate(-60deg)}